1.3.0 Save Cookies

index.html

@@ -18,7 +18,7 @@
     <link rel="stylesheet" href="/styles/partial/forms.css">
     <link rel="stylesheet" href="/styles/pages/index.css">
 
-    <script src="scripts/index.js" defer type="module"></script>
+    <script src="/scripts/index.js" defer type="module"></script>
 
 </head>
 
@@ -37,23 +37,23 @@ <h3>
                     <span>Entradas</span>
                     <img src="/images/income.svg" alt="Imagem de Entradas">
                 </h3>
-                <p>R$ 5.000,00</p>
+                <p>R$ 0,00</p>
             </div>
             <!--   End Card  -->
             <div id="expenseDisplay" class="card animate-up delay-1">
                 <h3>
                     <span>Saídas</span>
                     <img src="/images/expense.svg" alt="Imagem de Saídas">
                 </h3>
-                <p>R$ 2.000,00</p>
+                <p>R$ 0,00</p>
             </div>
             <!--   End Card  -->
             <div id="totalDisplay" class="card total animate-up delay-2">
                 <h3>
                     <span>Total</span>
                     <img src="/images/total.svg" alt="Imagem de Total">
                 </h3>
-                <p>R$ 3.000,00</p>
+                <p>R$ 0,00</p>
             </div>    
             <!--   End Card  -->       
         </section>
@@ -86,7 +86,7 @@ <h2 class="sr-only">Transações</h2>
         <div class="modal">
             <div id="form">
                 <h2>Nova Transação</h2>
-                <form>
+                <form action="">
                     <div class="input-group">
                         <label class="sr-only" for="description">Descrição</label>
                         <input

scripts/index.js

@@ -7,35 +7,19 @@ const newButton = document.querySelector("#transaction .button.new")
 
 newButton.addEventListener("click", modal.open)
 
-// ---------------
-//    INTERFACE
-// ---------------
-
-const transactions = [
-    {
-        description: "Luz",
-        amount: -50000,
-        date: "23/01/2021"
+// cookies
+const Storage = {
+    get() {
+        return JSON.parse(localStorage.getItem("dev.finances:transactions")) || []
     },
-    {
-        description: "Website",
-        amount: 500000,
-        date: "23/01/2021"
-    },
-    {
-        description: "Internet",
-        amount: -20000,
-        date: "23/01/2021"
-    },
-    {
-        description: "App",
-        amount: -200000,
-        date: "23/01/2021"
-    },
-]
+    set(transactions) {
+        localStorage.setItem("dev.finances:transactions", JSON.stringify(transactions))
+    }
+}
+
 
 const Transaction = {
-    all: transactions,
+    all: Storage.get(),
     add(transaction){
         Transaction.all.push(transaction)
 
@@ -66,16 +50,19 @@ const Transaction = {
         return Transaction.incomes() + Transaction.expenses()
     }
 }
+// making Transaction available to index.html
+window.Transaction = Transaction
 
 const DOM = {
     transactionsContainer: document.querySelector("#data-table tbody"),
     addTransaction(transaction, index) {
         const tr = document.createElement("tr")
-        tr.innerHTML = DOM.htmlTransactions(transaction)
+        tr.innerHTML = DOM.htmlTransactions(transaction, index)
+        tr.dataset.index = index
 
         DOM.transactionsContainer.appendChild(tr)
     },
-    htmlTransactions(transaction) {
+    htmlTransactions(transaction, index) {
 
         const cssClass = transaction.amount > 0 ? "income" : "expense"
 
@@ -86,7 +73,7 @@ const DOM = {
             <td class="${cssClass}">${amount}</td>
             <td class="date">${transaction.date}</td>
             <td>
-                <img src="/images/minus.svg" alt="Remover Transação">
+                <img class="remove-btn" onclick="Transaction.remove(${index})" src="/images/minus.svg" alt="Remover Transação">
             </td>
             <!--   End Row   -->
         `
@@ -107,12 +94,76 @@ const DOM = {
     }
 }
 
+const Form = {
+    description: document.querySelector("input#description"),
+    amount: document.querySelector("input#amount"),
+    date: document.querySelector("input#date"),
+
+    getValues() {
+        return {
+            description: Form.description.value,
+            amount: Form.amount.value,
+            date: Form.date.value,
+        }
+    },
+    validateFields() {
+        const { description, amount, date } = Form.getValues()
+
+        if(description.trim() === "" 
+            || amount.trim() === "" 
+            || date.trim() === ""){
+                throw new Error("Por favor, preencha todos os campos")
+            }
+    },
+
+    formatValues() {
+        let { description, amount, date } = Form.getValues()
+        amount = Format.amount(amount)
+        date = Format.date(date)
+
+        return {
+            description,
+            amount,
+            date
+        }
+    },
+
+    clearFields(){
+        Form.description
+    },
+
+    submit(event) {
+        event.preventDefault()
+
+        try {
+            Form.validateFields()
+            const transaction = Form.formatValues()
+
+            //Save
+            Transaction.add(transaction)
+
+            //Clean Form
+            document.querySelector("#form form").reset()
+
+            modal.close()
+        } catch (error) {
+            alert(error.message)
+        }
+
+
+    }
+}
+
+const formElement = document.querySelector("#form form")
+formElement.addEventListener("submit", Form.submit)
+
 const App = {
     init() {
-        Transaction.all.forEach(transaction => {
-            DOM.addTransaction(transaction)
-        })
+        Transaction.all.forEach(DOM.addTransaction)
+
         DOM.updateBalance()
+
+        Storage.set(Transaction.all)
     },
     reload() {
         DOM.clearTransactions()
@@ -121,3 +172,4 @@ const App = {
 }
 
 App.init()
+

scripts/utils/format.js

@@ -12,5 +12,13 @@ export default {
         })
 
         return sign + value
+    },
+    amount(value) {
+        return Number(value) * 100
+    },
+    date(value) {
+        const splittedDate = value.split("-") 
+        // 0 Year 1 Month 2 Day
+        return `${splittedDate[2]}/${splittedDate[1]}/${splittedDate[0]}`
     }
 }

styles/pages/index.css

@@ -112,4 +112,8 @@ td.income {
 
 td.expense {
     color: #e92929;
+}
+
+table tbody td img.remove-btn {
+    cursor: pointer;
 }

styles/partial/forms.css

@@ -19,7 +19,7 @@ div#form {
     margin-top: 0.8rem;
 }
 
-.input-group small {
+.input-group .help {
     opacity: 0.4;
 }