Calculating how many days your are old

In this excercise we will learn about dates in Javascript, how to create an html tag using Javascript, how to set attribute for the new tag created (like setting an ID) and append it to an existing html element.

This function will start when the user press the button start.

First of all we start our JavaScript program by collecting the input from the user about the date. The prompt will ask the user to input the date in the format MM/DD/YYY

var x = prompt("Please Enter your birthdate as MM/DD/YYYY format");

In the next section of the code we will create two dates variable : the first one is based on the input provided by the user.

The second instead represent the current date

var birthdate = new Date(x);
var currentDate= new Date();

At this point we can calculate how many days are between 2 date with the following code

let numberOfDays = (currentDate-birthdate)/(24*60*60*1000);
result=Math.floor(numberOfDays);

Each day has 24 hours, 60 minutes, 60 seconds and each seconds is 1000 milliseconds.

Therefore we need to take the difference between current day and birthdate divide by the result of 24*60*60*1000.

We also want to avoid to display fraction of day and therefore we use the Math.Floor command round it to its floor value.

One other thing that we want to inform the user is in which day she/he was born.

To do this we use the function getDay(). However this function will return the number of day in the week.

If we want to know the day we need to run a small function that will return the name of the day

myday=returnmyDay(birthdate.getDay());
function returnmyDay(val1){
    //This function get the day you were born

    var weekday = new Array(7);
    weekday[0] = "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";
    
    var n = weekday[val1];
    return n;
}

The function above receive the number of day of the week as a parameter and then use the number provided to derive the corresponding day of the week.

Let’s have a look now at the html part of this program. We want the number of days and the day of birth displayed in the HTML page.

First of all we create to h3 tags with this command

var myh3 = document.createElement('h3');
var myh3b = document.createElement('h3');

Now that we have the h3 tag we need to assign it a unique ID so that we can bring in the message we want

 myh3.setAttribute('id','display data');
 myh3b.setAttribute('id','display data2');

So now the first tag will have an id “display data”. The second tag instead a “display data2″….sorry for the lack of creativity!

Now we can prepare the text message that we will display in the 2 tag h3 recently created:

var mytext = document.createTextNode('You are '  + result + ' days old');
var mytextb = document.createTextNode('You were born on ' + myday );

At this point we append the 2 text message to each h3 tag with the following command

myh3.appendChild(mytext);
myh3b.appendChild(mytextb);

So far we have attached the text to the Tag h3 but the tag does not have yet a place in the web page.

However if we look at the HTML code we have 2 container

So now we can attach the h3 tags to those 2 containers as shown below

document.getElementById('two').appendChild(myh3);
document.getElementById('three').appendChild(myh3b);

You might recall that previously we have set attributes for each tag and created some id for the h3 tags. However so far we have not used those id. The id created is very handy for the clear button.

We want to have a button that clear the number of days and the day of the week. Let’s have a look at this function:

function clearall(){

    if (booleanchecker==true) {

    document.getElementById('display data').remove();
    document.getElementById('display data2').remove();
    document.getElementById('two').style.borderStyle = "none"; 
    document.getElementById('three').style.borderStyle = "none"; 
    booleanchecker=false;
    
    }
}

As you can see from the code above we are going to remove the h3 tag when the user press the button clear.

As we know that they have an id equal to display data and display date2 we can basically remove the tag h3 and by doing so the web page will no longer show the previous information.

The bookeanchecker is a global variable set to true at the beginning of the fucntion.

The clearall function will work only if the booleanchecker is true.: this will prevent an error in case in the user press twice in a row the clear button that will call the clearall function.


One thought on “Calculating how many days your are old”

Leave a Reply

Your email address will not be published. Required fields are marked *