<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>A calender view of life</title>
  <script src="assets/main.js"></script>
  <link rel="stylesheet" href="assets/main.css">
</head>
<body>
  <h1>Life Calender</h1>
  <div id="inputs">
    <label>Enter your date of birth</label>
    <input type="date" id="dob" name="dob" required>
    <button id="calc-btn">Calculate</button>
  </div>
  <h2>Weeks of a good expected life (90 years)</h2>
  <div id="calender">

  </div>
  <div>
    <p id="usage"></p>
    <h2>Legend:</h2>
    <div id="legend">
      <span class="symbol darkblue">Childhood</span>
      <span class="symbol blue">Adolescence</span>
      <span class="symbol red">Not so sure to survive long enough</span>
      <span class="symbol black">Life already used</span>
    </div>
  </div>

  <p><strong>Note:</strong> Immortality pills will be invented after two years of your death.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>A calender view of life</title>
  <script src="assets/main.js"></script>
  <link rel="stylesheet" href="assets/main.css">
</head>
<body>
  <h1>Life Calender</h1>
  <div id="inputs">
    <label>Enter your date of birth</label>
    <input type="date" id="dob" name="dob" required>
    <button id="calc-btn">Calculate</button>
  </div>
  <h2>Weeks of a good expected life (90 years)</h2>
  <div id="calender">

  </div>
  <div>
    <p id="usage"></p>
    <h2>Legend:</h2>
    <div id="legend">
      <span class="symbol darkblue">Childhood</span>
      <span class="symbol blue">Preadolescence</span>
      <span class="symbol red">Not so sure to survive long enough</span>
      <span class="symbol black">Life already used</span>
    </div>
  </div>

  <p><strong>Note:</strong> Immortality pills will be invented after two years of your death.</p>
</body>
</html>

Correct a mistake in age group
Correct a mistake in age group
