067-expense tracker/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Expense Tracker</title>
  </head>
  <body>
    <h1>Expense Tracker</h1>

    <div class="container">
      <div class="header">
        <img src="https://i.ibb.co/jfScDTC/budget.png" alt="Expense Tracker" />
        <div class="balance-container">
          <h2>Your Balance</h2>
          <h2 id="balance" class="balance">$0.00</h2>
        </div>
      </div>
      <div class="inc-exp-container">
        <div>
          <h4>Income</h4>
          <p id="money-plus" class="money plus">+$0.00</p>
        </div>
        <div>
          <h4>Expenses</h4>
          <p id="money-minus" class="money minus">-$0.00</p>
        </div>
      </div>
      <h3>History</h3>
      <ul id="list" class="list"></ul>
      <h3>Add new transaction</h3>
      <form id="form">
        <div class="form-control">
          <label for="text">Description</label>
          <input type="text" id="text" placeholder="Enter description..." />
        </div>
        <div class="form-control">
          <label for="amount"
            >Amount <br />
            <small>(-100 = expense, 100 = income)</small></label
          >
          <input type="number" id="amount" placeholder="Enter amount..." />
        </div>
        <button class="btn">Add transaction</button>
      </form>
    </div>
    <!-- Notification -->
    <div class="notification-container" id="notification">
      <p>Please add a description and amount</p>
    </div>
    <script src="script.js"></script>
  </body>
</html>