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/bootstrap@5.0.0-beta2/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/bootstrap@5.0.0-beta2/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>

Related posts:

  1.  tudo app using html and css javascript

  2. how to create age calculator in html project

  3. how to make toast in html css and javascript

  4. how to make copy to clipboard in javascript

  5. how to create email validation in javascript

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 .

Leave a Comment