create modal structure, improve responsibility and acessibility

felipefrm · Feb 8, 2022 · a6b98c1 · a6b98c1
1 parent 636b01e
commit a6b98c1
Show file tree

Hide file tree

Showing 8 changed files with 305 additions and 18 deletions.
diff --git a/assets/expense.svg b/assets/expense.svg
diff --git a/assets/income.svg b/assets/income.svg
diff --git a/assets/logo.svg b/assets/logo.svg
diff --git a/assets/minus.svg b/assets/minus.svg
diff --git a/assets/plus.svg b/assets/plus.svg
diff --git a/assets/total.svg b/assets/total.svg
diff --git a/index.html b/index.html
@@ -6,68 +6,149 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>dev.finance$</title>
     <link rel="stylesheet" href="./styles.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <header>
-      <h1 id="logo">dev.finance$</h1>
+      <img src="./assets/logo.svg" alt="Logo Dev Finance" />
     </header>
 
     <main class="container">
       <section id="balance">
-        <h2>Balanço</h2>
+        <h2 class="sr-only">Balanço</h2>
 
         <div class="card">
-          <h3>Entradas</h3>
+          <h3>
+            <span>Entradas</span>
+            <img src="./assets/income.svg" alt="Imagem de entradas" />
+          </h3>
           <p>R$ 5.000,00</p>
         </div>
 
         <div class="card">
-          <h3>Saídas</h3>
+          <h3>
+            <span>Saídas</span>
+            <img src="./assets/expense.svg" alt="Imagem de saídas" />
+          </h3>
           <p>R$ 3.000,00</p>
         </div>
 
         <div class="card total">
-          <h3>Total</h3>
+          <h3>
+            <span>Total</span>
+            <img src="./assets/total.svg" alt="Imagem de total" />
+          </h3>
           <p>R$ 2.000,00</p>
         </div>
       </section>
 
       <section id="transaction">
-        <h2>Transações</h2>
+        <h2 class="sr-only">Transações</h2>
+
+        <a href="#" class="button new" onclick="Modal.open()"
+          >+ Nova Transação</a
+        >
+
         <table id="data-table">
           <thead>
             <tr>
               <th>Descrição</th>
               <th>Valor</th>
               <th>Data</th>
+              <th></th>
             </tr>
           </thead>
           <tbody>
             <tr>
               <td class="description">Luz</td>
               <td class="expense">- R$ 500,00</td>
               <td class="date">23/01/2021</td>
+              <td><img src="./assets/minus.svg" alt="Remover transação" /></td>
             </tr>
             <tr>
               <td class="description">Criação Site</td>
               <td class="income">R$ 1500,00</td>
               <td class="date">23/01/2021</td>
+              <td><img src="./assets/minus.svg" alt="Remover transação" /></td>
             </tr>
             <tr>
               <td class="description">Aluguel</td>
               <td class="expense">- R$ 1000,00</td>
               <td class="date">23/01/2021</td>
+              <td><img src="./assets/minus.svg" alt="Remover transação" /></td>
             </tr>
           </tbody>
         </table>
       </section>
     </main>
 
+    <div class="modal-overlay">
+      <div class="modal">
+        <div id="form">
+          <h2>Nova Transação</h2>
+          <form action="">
+            <div class="input-group">
+              <label class="sr-only" for="description"> Descrição </label>
+              <input
+                type="text"
+                id="description"
+                name="description"
+                placeholder="Descrição"
+              />
+            </div>
+            <div class="input-group">
+              <label class="sr-only" for="amount"> Valor </label>
+              <input
+                type="number"
+                step="0.01"
+                id="amount"
+                name="amount"
+                placeholder="0,00"
+              />
+              <small class="help"
+                >Use o sinal - (negativo) para despesas e , (vírgula) para casas
+                decimais</small
+              >
+            </div>
+            <div class="input-group">
+              <label class="sr-only" for="date"> Data </label>
+              <input
+                type="date"
+                id="date"
+                name="date"
+                placeholder="01/01/2021"
+              />
+            </div>
+
+            <div class="input-group actions">
+              <a href="#" class="button cancel" onclick="Modal.close()"
+                >Cancelar</a
+              >
+              <button>Salvar</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
     <footer>
       <p>dev.finance$</p>
     </footer>
+
+    <script>
+      const Modal = {
+        open() {
+          document.querySelector(".modal-overlay").classList.add("active");
+        },
+        close() {
+          document.querySelector(".modal-overlay").classList.remove("active");
+        },
+      };
+    </script>
   </body>
 </html>