feat: fazendo js

gulpfile.js

@@ -1,7 +1,8 @@
 const { src, dest, watch } = require("gulp");
-const sass = require("gulp-sass")(
+const sass = require("gulp-sass")(require("sass"));
-    require("sass")
+const browserify = require("browserify");
-);
+const babelify = require("babelify");
+const source = require("vinyl-source-stream");
 
 function style() {
     return src("src/style/main.scss")
@@ -14,16 +15,32 @@ function style() {
     // chamar o caminho do arquivo, conectar com o pipe, chama o gulp, e chama o dest para os arquivos finais
 }
 
+function scripts() {
+    //bundle: fazer a conversão do arquivo
+    return browserify("src/scripts/main.js")
+        .transform(babelify.configure({ presets: ["@babel/preset-env"] }))
+        .bundle()
+        .pipe(source("bundle.js"))
+        .pipe(dest("dist"));
+}
+
 //Para fazer tudo automaticamente
 function sentinel() {
     //quais arquivos serão observados (), um objeto com algumas confifurações e depois a função que será executada
     watch(
-        "src/style/*.scss",
+        "src/style/**/*.scss",
         {
             ignoreInitial: false,
         },
         style
     );
+    watch(
+        "src/scripts/**/*.js",
+        {
+            ignoreInitial: false,
+        },
+        scripts
+    );
 }
 
 exports.sentinel = sentinel;

package.json

@@ -14,8 +14,13 @@
   "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"
+    "sass": "^1.56.1",
+    "vinyl-source-stream": "^2.0.0"
   }
 }

public/index.html

@@ -52,6 +52,6 @@
                 </div>
             </section>
         </main>
-        <script src="main.js"></script>
+        <script src="../src/scripts/main.js"></script>
     </body>
 </html>

src/scripts/components/ShoppingList.js

@@ -0,0 +1,70 @@
+export class ShoppingList {
+    constructor() {
+        this.list = [];
+        this.selectors();
+        this.events();
+    }
+    selectors() {
+        this.form = document.querySelector(".shopping-form");
+        this.inputItem = document.querySelector(".shopping-form-item-input");
+
+        this.quantityInput = document.querySelector(".shopping-form-quantity-input");
+        this.incrementBtn = document.querySelector(".shopping-form-increment-button");
+        this.decrementBtn = document.querySelector(".shopping-form-decrement-button");
+
+        this.items = document.querySelector(".shopping-items");
+    }
+
+    events() {
+        this.incrementBtn.addEventListener("click", increment);
+        this.decrementBtn.addEventListener("click", decrement);
+        this.form.addEventListener("submit", addItemToList);
+    }
+    increment() {
+        const currentValue = Number(this.quantityInput.value);
+        const newValue = currentValue + 1;
+
+        this.quantityInput.value = newValue;
+    }
+
+    decrement() {
+        const currentValue = Number(this.quantityInput.value);
+        const newValue = currentValue - 1;
+        if (newValue > 0) {
+            this.quantityInput.value = newValue;
+        }
+    }
+    addItemToList(e) {
+        e.preventDefault();
+        const itemName = e.target["item-name"].value; /* name do input */
+        const itemQuantity = e.target["item-quantity"].value;
+
+        if (itemName !== "") {
+            const item = {
+                name: itemName,
+                quantity: itemQuantity,
+            };
+            this.list.push(item);
+            this.renderListItems();
+            this.resetInputs();
+        }
+    }
+    renderListItems() {
+        let itemsStructure = "";
+
+        this.list.forEach(function (item) {
+            itemsStructure += `
+        <li class="shopping-item">
+            <span>${item.name}</span>
+            <span>${item.quantity}</span>
+        </li>
+      `;
+        });
+        this.items.innerHTML = itemsStructure;
+    }
+
+    resetInputs() {
+        this.inputItem.value = "";
+        this.quantityInput.value = 1;
+    }
+}

src/scripts/main.js

@@ -1,64 +1,4 @@
+import { ShoppingList } from "./components/ShoppingList";
 document.addEventListener("DOMContentLoaded", () => {
-    const list = [];
+    new ShoppingList();
-
-    const form = document.querySelector(".shopping-form");
-    const inputItem = document.querySelector(".shopping-form-item-input");
-
-    const quantityInput = document.querySelector(".shopping-form-quantity-input");
-    const incrementBtn = document.querySelector(".shopping-form-increment-button");
-    const decrementBtn = document.querySelector(".shopping-form-decrement-button");
-
-    const items = document.querySelector(".shopping-items");
-
-    incrementBtn.addEventListener("click", increment);
-    decrementBtn.addEventListener("click", decrement);
-    form.addEventListener("submit", addItemToList);
-
-    function increment() {
-        const currentValue = Number(quantityInput.value);
-        const newValue = currentValue + 1;
-
-        quantityInput.value = newValue;
-    }
-
-    function decrement() {
-        const currentValue = Number(quantityInput.value);
-        const newValue = currentValue - 1;
-        if (newValue > 0) {
-            quantityInput.value = newValue;
-        }
-    }
-    function addItemToList(e) {
-        e.preventDefault();
-        const itemName = e.target["item-name"].value; /* name do input */
-        const itemQuantity = e.target["item-quantity"].value;
-
-        if (itemName !== "") {
-            const item = {
-                name: itemName,
-                quantity: itemQuantity,
-            };
-            list.push(item);
-            renderListItems();
-            resetInputs();
-        }
-    }
-    function renderListItems() {
-        let itemsStructure = "";
-
-        list.forEach(function (item) {
-            itemsStructure += `
-        <li class="shopping-item">
-            <span>${item.name}</span>
-            <span>${item.quantity}</span>
-        </li>
-      `;
-        });
-        items.innerHTML = itemsStructure;
-    }
-
-    function resetInputs() {
-        inputItem.value = "";
-        quantityInput.value = 1;
-    }
 });