how to create age calculator in html project

Hello friends, Welcome to your Techgsr.co blog. And today in this article we will Devloped create age calculator in html project .So let’s go to our to.

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>Age Calculator</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />

    <style>
      body {
        background: #e2e2e1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <div class="card mt-5">
            <div class="card-body">
              <h1 class="card-title text-center text-uppercase">
                Age Calculator
              </h1>

              <p class="text-secondary">
                <small>Prove your date of birth**</small>
              </p>
              <div class="row mt-3">
                <div class="col-md-4">
                  <!-- date -->
                  <div class="form-group">
                    <input
                      type="text"
                      placeholder="Date"
                      class="form-control"
                      id="date_field"
                    />
                  </div>
                </div>
                <div class="col-md-4">
                  <!-- month -->
                  <div class="form-group">
                    <select id="month_field" name="" id="" class="form-control">
                      <option value="" selected disabled>Month</option>
                      <option value="january">Jan</option>
                      <option value="february">Feb</option>
                      <option value="march">March</option>
                      <option value="april">April</option>
                      <option value="may">May</option>
                      <option value="june">Jun</option>
                      <option value="july">July</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-4">
                  <!-- year -->
                  <div class="form-group">
                    <input
                      id="year_field"
                      type="text"
                      placeholder="Year"
                      class="form-control"
                    />
                  </div>
                </div>
              </div>

              <div class="container text-center mt-3">
                <button
                  onclick="calculateAge()"
                  class="btn btn-outline-warning btn-sm"
                >
                  Calculate
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous"
    ></script>

    <script>
      const calculateAge = () => {
        let date = document.getElementById("date_field").value;
        let month = document.getElementById("month_field").value;
        let year = document.getElementById("year_field").value;

        console.log(date);
        console.log(month);
        console.log(year);

        if (date > 31) {
          alert("input valid date");  
          return;
        }

        //parse
       
        // console.log(dob);
      };
    </script>
  </body>
</html>

So I hope that you learn about the how to create age calculator in html project And if you have any more queries about progrmming ,web Devlopment ,tech,computer relegated then feel free to discuss your problem in the comment section.Thank you so much and come back for more updates about Techgsr.co .

Related posts: