Adicionando todo projeto, esqueci de commitar antes

.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

gulpfile.js

@@ -0,0 +1,65 @@
+const { src, dest, watch, parallel } = require("gulp");
+const sass = require("gulp-sass")(require("sass"));
+const connect = require("gulp-connect");
+const browserify = require("browserify");
+const source = require("vinyl-source-stream");
+const babelify = require("babelify");
+const uglify = require("gulp-uglify");
+const buffer = require("vinyl-buffer");
+
+const paths = {
+    html: {
+        all: "src/templates/**/*.html",
+    },
+    styles: {
+        all: "src/styles/**/*.scss",
+        main: "src/styles/main.scss",
+    },
+    scripts: {
+        all: "src/scripts/**/*.js",
+        main: "src/scripts/app.js",
+    },
+    output: "dist",
+};
+
+function server() {
+    connect.server({
+        root: paths.output,
+        livereload: true,
+        port: 3000,
+    });
+}
+
+function sentinel() {
+    watch(paths.html.all, { ignoreInitial: false }, html);
+    watch(paths.styles.all, { ignoreInitial: false }, styles);
+    watch(paths.scripts.all, { ignoreInitial: false }, scripts);
+}
+
+function html() {
+    return src(paths.html.all).pipe(dest(paths.output));
+}
+
+function styles() {
+    return src(paths.styles.main)
+        .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
+        .pipe(dest(paths.output))
+        .pipe(connect.reload());
+}
+
+function scripts() {
+    return browserify(paths.scripts.main)
+        .transform(
+            babelify.configure({
+                presets: ["@babel/preset-env"],
+            })
+        )
+        .bundle()
+        .pipe(source("bundle.js"))
+        .pipe(buffer())
+        .pipe(uglify())
+        .pipe(dest(paths.output))
+        .pipe(connect.reload());
+}
+
+exports.default = parallel(server, sentinel);

package.json

@@ -0,0 +1,29 @@
+{
+    "name": "practice-time-shopping-list",
+    "version": "1.0.0",
+    "description": "To make it easy for you to get started with GitLab, here's a list of recommended next steps.",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "dev": "gulp"
+    },
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@gitea.ecommercetools.com.br:22022/M3-Academy/practice-time-shopping-list.git"
+    },
+    "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-connect": "^5.7.0",
+        "gulp-sass": "^5.1.0",
+        "gulp-uglify": "^3.0.2",
+        "sass": "^1.56.1",
+        "vinyl-buffer": "^1.0.1",
+        "vinyl-source-stream": "^2.0.0"
+    }
+}

src/scripts/app.js

@@ -0,0 +1,5 @@
+import { ShoppingList } from "./components/ShoppingList.js";
+
+document.addEventListener("DOMContentLoaded", function () {
+    new ShoppingList();
+});

src/scripts/components/ShoppingList.js

@@ -0,0 +1,76 @@
+export class ShoppingList {
+    constructor() {
+        this.list = [];
+
+        this.selectors();
+        this.events();
+    }
+
+    selectors() {
+        this.form = document.querySelector(".shopping-form");
+        this.itemInput = document.querySelector(".shopping-form-item-input");
+        this.quantityInput = document.querySelector(".shopping-form-quantity-input");
+        this.incrementButton = document.querySelector(".shopping-form-increment-button");
+        this.decrementButton = document.querySelector(".shopping-form-decrement-button");
+        this.itens = document.querySelector(".shopping-itens");
+    }
+
+    events() {
+        this.incrementButton.addEventListener("click", this.incrementQuantity.bind(this));
+        this.decrementButton.addEventListener("click", this.decrementQuantity.bind(this));
+        this.form.addEventListener("submit", this.addItemList.bind(this));
+    }
+
+    incrementQuantity() {
+        const currentValue = Number(this.quantityInput.value);
+        const newValue = currentValue + 1;
+
+        this.quantityInput.value = newValue;
+    }
+    decrementQuantity() {
+        const currentValue = Number(this.quantityInput.value);
+        const newValue = currentValue - 1;
+
+        if (newValue > 0) {
+            this.quantityInput.value = newValue;
+        }
+    }
+
+    addItemList(event) {
+        event.preventDefault();
+
+        const itemName = event.target["item-name"].value; // -> proprio form
+        const itemQuantity = event.target["item-quantity"].value;
+
+        if (itemName !== "") {
+            const item = {
+                name: itemName,
+                quantity: itemQuantity,
+            };
+
+            this.list.push(item);
+            this.renderListItens();
+            this.resetInputs();
+
+            // console.log(this.list);
+        }
+
+        // console.log(itemName);
+        // console.log(itemQunatity);
+    }
+
+    renderListItens() {
+        let itemsStructure = "";
+
+        this.list.forEach(function (item) {
+            itemsStructure += `<li class="shopping-item"> <span>${item.name}</span><span>${item.quantity}</span></li>`;
+        });
+
+        this.itens.innerHTML = itemsStructure;
+    }
+
+    resetInputs() {
+        this.itemInput.value = "";
+        this.itemQuantity.value = 1;
+    }
+}

src/styles/common/global.scss

@@ -0,0 +1,9 @@
+body, input, button {
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    color: var(--gray-500);
+}
+
+button {
+    cursor: pointer;
+}

src/styles/common/reset.scss

@@ -0,0 +1,5 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}

src/styles/main.scss

@@ -0,0 +1,11 @@
+@import 'utils/variable.scss';
+
+@import 'common/reset.scss';
+@import 'common/global.scss';
+
+@import 'partials/container.scss';
+@import 'partials/form.scss';
+@import 'partials/itens.scss';
+
+
+

src/styles/partials/container.scss

@@ -0,0 +1,10 @@
+.shopping-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 15px;
+
+    .shopping-title {
+        margin: 32px 0;
+        font-size: 32px;
+    }
+}

src/styles/partials/form.scss

@@ -0,0 +1,98 @@
+.shopping-form {
+    margin-bottom: 32px;
+
+    .shopping-form-inputs {
+        display: flex;
+        margin-bottom: 24px;
+        align-items: flex-end;
+
+        .shopping-form-item-wrapper{
+            flex: 1; /* faz com que a div item wrapper ocupe todo o espaço disponivel, empurrando a proxima para o final */
+            max-width: 256px;
+
+            .shopping-form-label {
+                display: block;
+                margin-bottom: 4px;
+            }
+        }
+        .shopping-form-item-input, .shopping-form-quantity-input {
+            width: 100%;
+            height: 32px;
+            padding: 0 12px;
+            border: 1px solid $gray-300;
+            border-radius: 4px;
+            background: $white;
+        }
+
+        .shopping-form-quantity-wrapper {
+            display: flex;
+            align-items: center;
+            margin-left: 24px;
+
+            .shopping-form-quantity-input {
+                max-width: 64px;
+                text-align: center;
+                margin: 0 4px;
+            }
+
+            .shopping-form-quantity-button {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+                width: 32px;
+                height: 32px;
+                border: 0;
+                border-radius: 4px;
+                background: $gray-100;
+                transition: background-color 0.2s linear;
+
+                &:hover{
+                    background: $orange-500;
+                }
+                &:active {
+                    background: $orange-300;
+                }
+            }
+
+            .shopping-form-quantity-button::before,
+            .shopping-form-increment-button::after{
+                content: '';
+                position: absolute;
+                width: 16px;
+                height: 4px;
+                border-radius: 4px;
+                background: $white;
+            }
+            .shopping-form-increment-button{
+                &::after{
+                    transform: rotate(90deg);
+                }
+            }
+        }
+    }
+}
+.shopping-form-submit-button {
+    width: 100%;
+    max-width: 128px;
+    height: 32px;
+    border: 0;
+    border-radius: 4px;
+    color: $white;
+    font-weight: 700;
+    background: $orange-500;
+    transition: background-color 0.2s linear;
+
+    &:hover{
+        background: $orange-300;
+    }
+    &:active {
+        background: $orange-500;
+    }
+
+}
+
+
+
+
+

src/styles/partials/itens.scss

@@ -0,0 +1,27 @@
+.shopping-result {
+    max-width: 416px;
+
+    .shopping-result-head, .shopping-item {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        padding: 8px 16px;
+    }
+    
+    .shopping-result-head {
+        background: var(--gray-100);
+    }
+    
+    .shopping-itens {
+        list-style: none;
+
+        .shopping-item{
+            
+            &:nth-child(even) {
+                background: var(--gray-100);
+            }
+        }
+    }
+    
+    
+}
+

src/styles/utils/variable.scss

@@ -0,0 +1,9 @@
+//colors
+    $white: #fff;
+    
+    $gray-100: #e5e5e5;
+    $gray-300: #bdbdbd;
+    $gray-500: #333;
+
+    $orange-300: #f6ad55;
+    $orange-500: #ed8936;

src/templates/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Shopping List</title>
+
+        <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
+            rel="stylesheet"
+        />
+        <link rel="stylesheet" href="main.css" />
+    </head>
+    <body>
+        <main>
+            <section class="shopping-container">
+                <h2 class="shopping-title">Shopping List</h2>
+                <form class="shopping-form">
+                    <div class="shopping-form-inputs">
+                        <div class="shopiing-form-intem-wrapper">
+                            <label class="shopping-form-label" for="item-name"></label>
+                            <input
+                                id="item-name"
+                                type="text"
+                                name="item-name"
+                                class="shopping-form-item-input"
+                            />
+                        </div>
+
+                        <div class="shopping-form-quantity-wrapper">
+                            <button
+                                class="shopping-form-quantity-button shopping-form-decrement-button"
+                                type="button"
+                            ></button>
+                            <input
+                                type="text"
+                                name="item-quantity"
+                                class="shopping-form-quantity-input"
+                                value="1"
+                                disabled
+                            />
+                            <button
+                                class="shopping-form-quantity-button shopping-form-increment-button"
+                                type="button"
+                            ></button>
+                        </div>
+                    </div>
+                    <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>Quantidade:</strong>
+                        <ul class="shopping-itens"></ul>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <script src="bundle.js"></script>
+    </body>
+</html>