How to Create a ‘Today, Tomorrow, Day After Tomorrow’ Button Using HTML and JavaScript?

Estimated read time 2 min read

Here’s an example of how you could create a “Today, Tomorrow, Day After Tomorrow” button using HTML and JavaScript:

HTML:

<button id="myButton">Today, Tomorrow, Day After Tomorrow</button>
<p id="displayDate"></p>

JavaScript:

<script>
  document.getElementById("myButton").addEventListener("click", function() {
    let date = new Date();
    let options = { weekday: 'long' };
    let today = new Intl.DateTimeFormat('en-US', options).format(date);
    let tomorrow = new Intl.DateTimeFormat('en-US', options).format(new Date(date.getTime() + 24 * 60 * 60 * 1000));
    let dayAfterTomorrow = new Intl.DateTimeFormat('en-US', options).format(new Date(date.getTime() + 2 * 24 * 60 * 60 * 1000));
    document.getElementById("displayDate").innerHTML = "Today is " + today + ". Tomorrow is " + tomorrow + ". Day after tomorrow is " + dayAfterTomorrow + ".";
  });
</script>

In this example, the HTML page contains a button with the text “Today, Tomorrow, Day After Tomorrow” and a paragraph with the id of “displayDate”. The JavaScript code uses the document.getElementById method to select the button and attach a click event to it using the addEventListener method. The event handler creates new Date objects for today, tomorrow, and the day after tomorrow, and formats them into the weekday names using the Intl.DateTimeFormat method. Finally, it updates the text of the paragraph element with the results.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply