index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css">
  <title>Tip Calculator</title>
</head>

<body>
  <div class="container">
    <div>
      <h1 class="title">💵 Tip Calculator</h1>
    </div>
    <div>
      <form class="tipsForm" id="tipsForm">
        <label for="bill">
          <p class="text-input">💲How much was the bill?</p>
        </label>
        <p><input type="text" placeholder="R$ 100" name="bill" id="bill" class="formInput" required /></p>

        <label for="serviceQual">
          <p class="text-input">📝How was your service?</p>
        </label>

        <p>
          <select name="serviceQual" id="serviceQual" class="formSelect">
            <option disabled selected value="0">
              -- Choose an option</option>
            <option value="0.3">30% - Amazing</option>
            <option value="0.2">20% - Good</option>
            <option value="0.15">15% - Acceptable</option>
            <option value="0.10">10% - Bad</option>
            <option value="0.05">05% - Terrible</option>
          </select>
        </p>

        <label for="people">
          <p class="text-people">👥Number of people to split the bill?</p>
        </label>

        <p>
          <input type="number" placeholder="1" min="1" name="people" id="people" class="formInput" required>
        </p>
        <button type="submit" class="formSubmit">🕭 Calculate</button>
      </form>
    </div>
    <div id="totalTip">
      Total tips:
      <span id="tip"> 0.00</span>
      <p id="each">each</p>
    </div>
  </div>
  <script type="text/javascript" src="scripts.js"></script>
</body>

</html>