Solution: Ethan Alfaro & Hayk Petrosyan

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": [["@babel/preset-env",{"targets": {"browsers": [">=1%","not ie 11","not op_mini all"]},"debug": true}]]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

README.md

@@ -1,61 +1,205 @@
-`#html` `#css` `#sass` `#javascript` `#webpack` `#es6` `#master-in-software-engineering`
+`javascript` `webpack` `jquery` `html` `sass`
 
-# WebPack Basics <!-- omit in toc -->
+# Webpack Project
 
-<p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
-</p>
+## Get started 🚀
 
-> WebPack is a tool that allows you to manage the resources and dependencies of a website. 
->
-> It mainly solves Javascript dependencies, although it can also work with css, images, Javascript preprocessors, CSS preprocessors, template systems, and much more.
+Documentation of our Webpack project
 
-## Index <!-- omit in toc -->
+### Pre-requirements 📋
 
-- [Requirements](#requirements)
-- [Repository](#repository)
-- [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
-- [Resources](#resources)
+_You must have npm installed. If not you can run:_
 
-## Requirements
+```
+npm install
+```
 
-- You must make use of the new features of ECMAScript 6
-- You must import several files so that the final result is a single bundle for Javascript and a single bundle for sass
-- Verify that the output bundle generated by WebPack for the Javascript layer has made the transformation from ECMAScript 6 to ECMAScript 5
-- Create a clear and orderly directory structure
+### Installation 🔧
 
+_We need to set an enviroment installing the basics documents, scripts and modules_
 
-## Repository
+Setting environment
 
-First of all you must fork this project into your GitHub account.
+```
+npm init -y
+```
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
+Installation of Webpack
 
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+```
+npm install -D webpack webpack-cli
+```
 
-## Technologies used
+Installation of Webpack Server
 
-\* HTML
+```
+npm install -D webpack-dev-server
+```
+Installation of css-loader and style-loader
 
-\* CSS
+```
+npm install -D css-loader style-loader
+```
 
-\* JS
+Installation of sass & sass-loader
 
-\* SASS
+```
+npm install -D sass sass-loader
+```
 
-\* webpack
+Installation of css-loader and style-loader
 
-\* ES6
+```
+npm install -D css-loader style-loader
+```
 
-## Project delivery
+Installation of jQuery
 
-To deliver this project you must follow the steps indicated in the document:
+```
+npm install -D jquery
+```
 
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+Installation of htmlWebpackPlugin and html-loader
 
-## Resources
+```
+npm install -D html-webpack-plugin html-loader
+```
 
+Installation of url-loader
 
-- [WebPack Official](https://webpack.js.org/)
-- [ECMAScript 6 compatibility](https://kangax.github.io/compat-table/es6/)
+```
+npm install -D url-loader
+```
+
+Installation of Babel
+
+```
+npm install -D @babel/core @babel/preset-en babel-loader
+```
+
+## Project structure ⚙️
+
+```
+./assets
+./dist
+./node_modules
+./src
+./.babelrc
+./LICENSE
+./package-lock.json
+./package.json
+./README.md
+./webpack.config.js
+```
+
+## /assets
+
+Folder for sass files
+
+## /dist
+
+Folder for webpack generated files
+
+## /src
+
+Folder for source code
+
+## . /
+
+Root folder for .json files and webpack configuration file
+
+# Workflow 🔩
+
+_Base elements_
+
+```
+- /src/index.html
+- /src/js/index.js
+```
+./webpack.config.js
+
+```
+entry: "./src/js/index.js",
+    output: {
+        filename: "bundle.js",
+        path: path.resolve(__dirname, "dist"),
+    },  
+```
+```
+new HtmlWebpackPlugin({
+    filename: "index.html",
+    template: "./src/index.html",
+})
+```
+
+We set the entry point of our bundle using the index.js and we set the output to a new bundle.js wiche will be created in the ./dist folder.
+
+This will generate the following structure:
+
+```
+./dist
+    bundle.js
+    index.html
+```
+
+In our /src/js folder we have the js files wiche run all the functions:
+
+```
+./src
+    index.js
+    module-a.js
+    module-b.js
+```
+
+index.js is the entry file where we will import all the needed modules.
+
+```
+- /src/js/index.js
+
+import "../index.html";
+import './module-a.js';
+import './module-b.js';
+import "../../assets/main.scss";
+import "../img/background-image.jpg";
+import "../img/elipse.png";
+import "../img/elipse2.svg";
+import "../img/elipse3.png";
+
+```
+
+## Deployment 📦
+
+Now we can build our application:
+
+Generating the /dist/bundle.js and the /dist/index.thml
+
+```
+npm run build
+```
+Setting a watcher for SASS
+
+```
+sass --watch ./assets/main.scss ./src/css/style.css
+```
+Starting webpack server
+
+```
+npm start
+```
+
+## Build with 🛠️
+
+* [NPM](https://www.npmjs.com/)
+* [Webpack](https://webpack.js.org/)
+* [jQuery](https://jquery.com/)
+* [SASS](https://sass-lang.com/)
+
+## Autors ✒️
+
+* 👨‍💻 **Ethan Alfaro** - *Trabajo en equipo* - [Ethan Alfaro Github](https://github.com/Ethan-Alfaro)
+* 👨‍💻 **Hayk Petrosyan** - *Trabajo en equipo* - [Hayk Petrosyan Github](https://github.com/haykbit)
+
+## Resources 📎
+
+* [Webpack Doc](https://webpack.js.org/concepts/) - Webpack official documentation
+* [Stackoverflow](https://es.stackoverflow.com/)

assets/_color.scss

@@ -0,0 +1,2 @@
+$containerColor: white;
+$buttonColor: #3157ff;

assets/_text.scss

@@ -0,0 +1,2 @@
+$fontFamily: 'Spartan', sans-serif;
+$textColor: white;

assets/main.scss

@@ -0,0 +1,91 @@
+@use "./color" as color;
+@use "./text" as text;
+
+@mixin borders {
+  border: 3px solid rgb(255, 255, 255);
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: rgb(17, 17, 17);
+  font-family: text.$fontFamily;
+  color: text.$textColor;
+}
+.container {
+  width: 100%;
+  height: 400px;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  margin-top: 50px;
+  margin-bottom: 50px;
+  flex-wrap: wrap;
+  .codeContainer {
+    width: 40%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 5px;
+    background-color: color.$containerColor;
+    @include borders;
+    .headCont {
+      width: 100%;
+      height: 20%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      color: black;
+      box-shadow: -1px 10px 5px -2px rgba(219,219,219,1);
+    }
+    .cont {
+      width: 100%;
+      height: 80%;
+      padding: 15px;
+      color: black;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+    }
+  }
+  .result {
+    width: 40%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  .btn {
+    height: 50px;
+    cursor: pointer;
+    margin-top: 15px;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    margin: 10px;
+    background-color: color.$buttonColor;
+  }
+  code{
+    width: 100%;
+    display: block;
+    white-space: pre-wrap; 
+    font-weight: 600;
+  }
+
+  .contImg {
+    width: 100%;
+    padding: 15%;
+    height: 100%;
+    color: black;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    box-sizing: border-box;
+  }
+}

dist/bundle.js.LICENSE.txt

@@ -0,0 +1,24 @@
+/*!
+ * Sizzle CSS Selector Engine v2.3.6
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://js.foundation/
+ *
+ * Date: 2021-02-16
+ */
+
+/*!
+ * jQuery JavaScript Library v3.6.0
+ * https://jquery.com/
+ *
+ * Includes Sizzle.js
+ * https://sizzlejs.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2021-03-02T17:08Z
+ */