Feat(feito automação): Feito automação

gulpfile.js

@@ -1,5 +1,10 @@
 const { src, dest, watch} = require ('gulp');
 const sass = require('gulp-sass')(require('sass'));
+const browserify = require('browserify');
+const babelify = require('babelify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const uglify = require('gulp-uglify');
 
 function styles() {
     return src("src/styles/main.scss")
@@ -8,8 +13,24 @@ function styles() {
     .pipe(dest("dist"));
 }
 
+function scripts() {
+    return browserify('src/scripts/app.js')
+    .transform(
+            babelify.configure({
+                presets: ["@babel/preset-env"],
+            })
+
+      )
+      .bundle()
+      .pipe(source('bundle.js'))
+      .pipe(buffer())
+      .pipe(uglify())
+      .pipe(dest("dist"));
+}
+
 function sentinel() {
-    watch('src/styles/*scss', { ignoreInitial: false }, styles);
+    watch('src/styles/**/*.scss', { ignoreInitial: false }, styles);
+    watch('src/scripts/**/*.js', { ignoreInitial: false }, scripts);
 }
 
 exports.sentinel = sentinel;

package.json

@@ -14,8 +14,15 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "babelify": "^10.0.0",
+    "browserify": "^17.0.0",
     "gulp": "^4.0.2",
     "gulp-sass": "^5.1.0",
-    "sass": "^1.56.1"
+    "gulp-uglify": "^3.0.2",
+    "sass": "^1.56.1",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
   }
 }

public/index.html

@@ -19,7 +19,7 @@
                         <label class="shopping-form-label" for="item-name">Item name</label>
                         <input class="shopping-form-item-input" type="text" name="item-name" id="item-name">
                     </div>
- 
+
                     <div class="shopping-form-quatity-warapper">
                         <button class="shopping-form-quatity-button shopping-form-decrement-button" type="button"></button>
                         <input class="shopping-form-quantity-input" name="item-quatity" type="text" value="1" disabled>
@@ -31,13 +31,13 @@
                 <button  class="shopping-form-submit-button" type="submit">Add to list</button>
 
             </form>
-            
+
             <div class="shopping-result">
                 <div class="shopping-result-head">
                     <strong>Item</strong>
                     <strong>Quantity</strong>
                 </div>
-    
+
                 <ul class="shopping-items"></ul>
             </div>
         </section>
@@ -45,6 +45,6 @@
 
     </main>
 
-    <script src="../src/scripts/app.js"></script>
+    <script src="../dist/bundle.js"></script>
 </body>
-</html>
+</html>

src/scripts/app.js

@@ -1,74 +1,5 @@
-document.addEventListener('DOMContentLoaded', function(){
+import { ShoppingList } from "./components/shoppingList";
- const list = [];
 
-    const quantityInput = document.querySelector('.shopping-form-quantity-input');
+document.addEventListener("DOMContentLoaded", function(){
-    const increment = document.querySelector('.shopping-form-increment-button');
+    new ShoppingList();
-    const decrement = document.querySelector('.shopping-form-decrement-button');
+})
-    const form = document.querySelector('.shopping-form');
-    const itemInput = document.querySelector('.shopping-form-item-input');
-    const items = document.querySelector('.shopping-items')
-
-    increment.addEventListener('click', addIcrement);
-    decrement.addEventListener('click', addDecrement);
-    form.addEventListener('submit', addTextValue);
-
-    function addIcrement() {
-        const valueQuantityInput = Number(quantityInput.value);
-        const newValue = valueQuantityInput + 1;
-
-        quantityInput.value = newValue;
-    }
-        function addDecrement() {
-            const valueQuantityInput = Number(quantityInput.value);
-            const newValue = valueQuantityInput - 1;
-            if(newValue > 0) {
-                quantityInput.value = newValue;
-            }
-            
-        }
-        const ul = document.querySelector('ul')
-        const li = createElement('li');
-        
-
-    function addTextValue(event) {
-        event.preventDefault();
-
-        const itemName = event.target['item-name'].value
-        const itemQuantity = event.target['item-quatity'].value
-        
-        if(itemName != "") {
-            const item = {
-                nome: itemName,
-                quantity: itemQuantity
-            };
-    
-            list.push(item);
-            renderListItems()
-            resetInput()
-        }
-    }
-
-    function renderListItems() {
-        let itemStructure = "";
-
-        list.forEach(function (item) {
-            itemStructure += `
-                <li class="shopping-item">
-                    <span>${item.nome}</span>
-                    <span>${item.quantity}</span>
-                </li>
-            `;
-        })
-        items.innerHTML = itemStructure
-    }
-
-
-    function resetInput() {
-        itemInput.value = "";
-        quantityInput.value = 1;
-    }
-
-
-    
-
-})

src/scripts/components/shoppingList.js

@@ -0,0 +1,77 @@
+export class ShoppingList {
+    constructor() {
+        this.list = [];
+        this.selectors();
+        this.events();
+    }
+
+    selectors() {
+        this.quantityInput = document.querySelector('.shopping-form-quantity-input');
+        this.increment = document.querySelector('.shopping-form-increment-button');
+        this.decrement = document.querySelector('.shopping-form-decrement-button');
+        this.form = document.querySelector('.shopping-form');
+        this.itemInput = document.querySelector('.shopping-form-item-input');
+        this.items = document.querySelector('.shopping-items');
+
+    }
+
+    events() {
+        addEventListener("click", this.addIcrement.bind(this));
+        addEventListener("click", this.addDecrement.bind(this));
+        addEventListener("submit", this.addTextValue.bind(this));
+
+    }
+
+     addIcrement() {
+        const valueQuantityInput = Number(this.quantityInput.value);
+        const newValue = valueQuantityInput + 1;
+        this.quantityInput.value = newValue;
+    }
+    addDecrement() {
+        const valueQuantityInput = Number(this.quantityInput.value);
+        const newValue = valueQuantityInput - 1;
+            if(newValue > 0) {
+                this.quantityInput.value = newValue;
+            }
+
+    }
+
+    addTextValue(event) {
+        event.preventDefault();
+
+        const itemName = event.target['item-name'].value
+        const itemQuantity = event.target['item-quatity'].value
+
+        if(itemName != "") {
+            const item = {
+                nome: itemName,
+                quantity: itemQuantity
+            };
+
+            this.list.push(item);
+            this.renderListItems()
+            this.resetInput()
+        }
+    }
+
+     renderListItems() {
+        let itemStructure = "";
+
+        this.list.forEach(function(item) {
+            itemStructure += `
+                <li class="shopping-item">
+                    <span>${item.nome}</span>
+                    <span>${item.quantity}</span>
+                </li>
+            `;
+        })
+        this.items.innerHTML = itemStructure
+    }
+
+
+     resetInput() {
+        this.itemInput.value = "";
+        this.quantityInput.value = 1;
+    }
+
+}