index.html

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dev.finance$</title>

    <link rel="icon" type="image/svg" href="/assets/favicon.svg" />

    <link rel="stylesheet" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- header -->
    <header>
      <h1 id="logo">dev<span>.</span>finance<span>$</span></h1>
      <!--<img src="./assets/logo.svg" alt="Logo Dev Finance" />-->
    </header>

    <!-- main -->
    <main class="container">
      <section id="balance">
        <h2 class="sr-only">Balanço</h2>

        <div class="card">
          <h3>
            <span>Entradas</span>
            <img src="./assets/income.svg" alt="Image de Entradas" />
          </h3>
          <p id="incomeDisplay">R$ 0,00</p>
        </div>

        <div class="card">
          <h3>
            <span>Saídas</span>
            <img src="./assets/expense.svg" alt="Image de Saidas" />
          </h3>
          <p id="expenseDisplay">R$ 0,00</p>
        </div>

        <div class="card total">
          <h3>
            <span>Total</span>
            <img src="./assets/total.svg" alt="Image de Total" />
          </h3>
          <p id="totalDisplay">R$ 0,00</p>
        </div>
      </section>

      <section id="transaction">
        <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>
            <!-- data inject here with javascript -->
          </tbody>
        </table>
      </section>
    </main>

    <!-- modal -->
    <div class="modal-overlay">
      <div class="modal">
        <div id="form">
          <h2>Nova Transação</h2>

          <form action="" onsubmit="Form.submit(event)">
            <div class="input-group">
              <label for="description" class="sr-only">Descrição</label>
              <input
                type="text"
                placeholder="Descrição"
                id="description"
                name="description"
              />
            </div>

            <div class="input-group">
              <label for="amount" class="sr-only">Valor</label>
              <input
                type="number"
                step="0.01"
                placeholder="0,00"
                id="amount"
                name="amount"
              />
              <small class="help">
                Use o sinal - (negativo) para despesas e , (vírgula) para casas
                decimais
              </small>
            </div>

            <div class="input-group">
              <label for="date" class="sr-only">Data</label>
              <input type="date" id="date" name="date" />
            </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 -->
    <footer>2021 - dev.finance$</footer>

    <script src="./scripts.js"></script>
  </body>
</html>