Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

JavaScript Age Calculator🧮

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • RegExp in JS
  • string match method in JS
  • Toogle classList
  • position property in CSS

JavaScript
Age Calculator

HTML


<div class="showcontent">
    <!-- <h4 style="line-height: 1.4;"></h4> -->
     <div class="container">
        <div class="calculator">
            <h2>JavaScript<br><span> Age Calculator</span></h2>

            <div class="input-box">
                <input type="date" id="date">
                <button onclick="calculateAge()">Calculator</button>
            </div>
            <p id="result"></p>
        </div>
     </div>
             
</div>

CSS


.col-75 .showcontent{
    font-family:'Poppins',sans-serif;
    padding: 0;
    margin: 0;
}
.container{
    width: 100%;
    height: auto;
    background:linear-gradient(135deg, #4203a9,#90bafc);
    color: white;
    padding: 10px;

}
.calculator h2{
    font-size: 30px;
}
.calculator h2 span{
    color:#ffff76;
}
.input-box{
    margin: 40px 0;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    border-radius: 10px;
}
.input-box input{
    flex: 1;
    font-size: 18px ;
    border: 0;
    padding: 14px 20px;
    border-radius: 5px;
    outline: 0;
    margin-right: 10px;
    position: relative;
}
.input-box button{
    background-color: #ffff76;
    border: 0;
    outline: 0;
    padding: 15px 30px;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
}
.input-box input::-webkit-calendar-picker-indicator{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    cursor: pointer;
    width: auto;
    height: auto;
    background-size: 30px;
    background-position: calc(100% - 10px);
    
    
}
#result{
    font-size: 20px;
}
#result span{
    color:yellow;
}

JavaScript


let userInput=document.getElementById("date");
let result=document.getElementById("result");

// console.log(new Date().toISOString().split("T")[0]);
userInput.max=new Date().toISOString().split("T")[0];

function calculateAge(){
    let birthday=new Date(userInput.value);
    //console.log(birthday);
    let d1=birthday.getDate();
    let m1=birthday.getMonth();
    let y1=birthday.getFullYear();
    //console.log(m1);

    let today=new Date();
    let d2=today.getDate();
    let m2=today.getMonth();
    let y2=today.getFullYear();


    let d3,m3,y3; 
    y3=y2-y1;
    m3=m2-m1;
    d3=d2-d1;
    
    if(d3< 0){
        m3--;
        d3+=new Date(y2,m2,0).getDate();
    }
    if(m3< 0){
        y3--;
        m3+=12;
    }
    result.innerHTML=`You are ${y3} years ${m3} months and ${d3} days`;
}

Application🌐

Dark Mode Toggle

Example: The dark mode toggle in setting on Twitter or Facebook

Wi-Fi or Bluetooth Settings

Example: The Wi-Fi and Bluetooth toggles in the quick setting menu on Android or iOS devices.

Notifications Settings

Example: In the settings of a messaging app, you might have a toggle switch to enable or disable notifications for new messages.

new Date()

  • Returns a Date object with the current date and time based on the system's clock.
  • This create a date object represent the current date and time.

toString()

  • The toString() method converts any data type into a string. Syntax: varname.toString(),

padStart()

  • It is used to JS to pad the current string with another string untill the resulting string reaches the given length.
    Example: str.padStart(len,char or string);

setInterval()

  • This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

  • This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

  • getDate(): Returns the day of the month(1-31)
  • getMonth(): Returns the month(0-11)
  • getFullYear(): Returns the year(4 digit year)
  • getDay(): Returns the day of the week(0-6)
  • getHours(): Returns the hours(0-23)
  • getMinutes(): Returns the minites(0-59)
  • getSeconds(): Returns the seconds(0-59)
  • getMilliseconds(): Returns the milliseconds(0-999)
  • getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC