Age Calculator Html and JavaScript

@ please subscribe our channel and support me.

★ Please like and 1 comment this video.

★ If you are visiting my channel for the first time then please subscribe

Go to my Youtube channel : channel/UCP43UNTq7UZD1cu_qTbmC9A

HTML Code :

    <div class="container">
      <form>
          <div class="base">
              <h3 class="title">Age Calculator</h3>
          </div>
          <div class="content">
              <div class="block">
                  <span>Enter Your Name : </span>
                  <input type="text" name="name" class="name" placeholder="Name" minlength="1" />
              </div>
              <br>
              <div class="flex">
                  <span>Your Date of Birth : </span>
                  <input type="text" name="day" class="day" placeholder="Day" minlength="1" maxlength="2" />
                  <span> : </span>
                  <input type="text" name="month" class="month" placeholder="Month" minlength="1" maxlength="2" />
                  <span> : </span>
                  <input type="text" name="year" class="year" placeholder="Year" minlength="4" maxlength="4" />
              </div>
          </div>
          <br>
          <input type="button" name="submit" value="Submit" onclick="age(this)" />
      </form>
  </div>

CSS Code :

    <script>
    .container{ width: max-content; display: block; background: #eee; color: #222; padding: 10px; margin: 0 auto; margin-top: 10%; font-family: system-ui; border-radius: 5px; font-weight: 500;}
    .title{ margin-left: 10px;}
    .flex{ display: flex; align-items: center;}
    input,
    input:focus{ width: 70px; background: transparent; border: solid 1px #5070ff; padding: 5px 10px; border-radius: 2px; outline: none; color: #222;}
    input:focus{border: 1px solid #11ca00 !important; background: transparent !important;}
    .block input{ width: fit-content;}
    input[type="button"]{ width: max-content; margin: 15px 0 10px 12px; cursor: pointer; transition: 0.3s;}
    input[type="button"]:hover{ background: #5070ff !important; border: 1px solid #5070ff !important;color: #fff;}
    input.error{ border: solid 1px red; background: #ffe9e9;}
    span{ margin: 0 10px;}

Script Code :

    <script>
    function age(e) {

      var userDay = document.querySelector('.day').value;
      var userMonth = document.querySelector('.month').value;
      var userYear = document.querySelector('.year').value;
      var name = document.querySelector('.name').value;
      
      if (userDay && userMonth && userYear && name ) {
          
          var date = new Date();
          var cDay = date.getDate();
          var cMonth = 1 + date.getMonth();
          var cYear = date.getFullYear();
          var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
          
          if (userDay > cDay) {
              cDay = cDay + month[cMonth - 1];
              cMonth = cMonth - 1;
          }
          
          if (userMonth > cMonth) {
              cMonth = cMonth + 12;
              cYear = cYear - 1;
          }
          
          var d = cDay - userDay;
          var m = cMonth - userMonth;
          var y = cYear - userYear;
          
          document.querySelector('.title').innerHTML = 'Hi '+ name;
          document.querySelector('.content').innerHTML = 
          '<span>Your Age is ' + y + ' Years ' + m + ' Months ' + d + ' Days </span>';
          e.value = 'Check Agen';
          e.onclick = function () {
              location.reload();
          }
      }
      else{
          var input = document.getElementsByTagName('input');
          for (let i = 0; i < input.length; i++) {
              input[i].value == false 
              ? input[i].classList.add('error')
              : input[i].classList.remove('error');
              
          }
      }
      
      
      }

Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use .

Thanks..

Age Calculator Html and JavaScript | JavaScript project

@ Follow On

@ Playlist

@ Recommendations Videos

Linked

CodeWithAr Source Code

Popular Posts