When building web applications, it is often necessary to display the current date and time to the user. This can be done using JavaScript and HTML, which provide a convenient way to extract and display date information. In this article, we will go through the process of creating a web page that displays the current date in full, including the century, year, month, and day. We will use JavaScript to extract the date information from the current date and time, and to insert the information into the HTML document. We will also use CSS to style the text, making it bold and centered on the page.
This article will cover the following topics:
- Extracting date information using the JavaScript Date object
- Inserting date information into an HTML document using JavaScript
- Styling the date information using CSS
- Adding leading zeros to the day and month values
- Adding the name of the month in both English and Arabic
Creating the HTML Structure
To begin, we need to create an HTML document that will display the date information. Inside the <body> of the HTML document, we can add several <div> elements with specific ids, such as "century", "year", "month", and "day". These elements will be used to display the date information.
<div id="century"></div>
<div id="year"></div>
<div id="month"></div>
<div id="day"></div>Extracting Date Information using JavaScript
Next, we will use JavaScript to extract the date information from the current date and time. The JavaScript Date object provides several methods that can be used to extract different parts of the date, such as the year, month, and day.
let date = new Date();
let currentCentury = Math.floor(date.getFullYear() / 100) + 1;
let currentYear = date.getFullYear();
let currentMonth = date.getMonth();
let currentDay = date.getDate();
The getFullYear() method can be used to get the current year, which returns the full four-digit year. We use the modulus operator to get the last two digits of the year, which will give the current year of the century.
The getMonth() method returns the month as a number between 0 and 11, so we add 1 to get the current month.
The getDate() method returns the day of the month as a number between 1 and 31, which is the current day.
Adding Leading Zeros
To format the day and month values and add a leading zero, we can use the following code snippet:
let formattedDay = currentDay < 10 ? '0' + currentDay : currentDay;
let formattedMonth = (currentMonth + 1) < 10 ? '0' + (currentMonth + 1) : currentMonth + 1;Adding the Name of the Month
For displaying the name of the month in English and Arabic, we can create two arrays, one for the English month names, and one for Arabic month names.
const monthNamesEng = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const monthNamesAr = ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
We can then use the `currentMonth` variable to select the month name that corresponds to the current month.
let monthNameEng = monthNamesEng[currentMonth];
let monthNameAr = monthNamesAr[currentMonth];Inserting Date Information into the HTML Document
To display the date information in the HTML document, we will use the getElementById() method to get references to the different date elements and set their innerHTML properties to the respective date information, such as current century, year, month, and day.
document.getElementById("century").innerHTML = currentCentury;
document.getElementById("year").innerHTML = currentYear;
document.getElementById("month").innerHTML = `${formattedMonth} ${monthNameEng} / ${monthNameAr}`;
document.getElementById("day").innerHTML = formattedDay;
Styling the Date Information using CSS
Finally, we can use CSS to style the text, making it bold and centered on the page.
.date {
font-size: 20px;
font-weight: bold;
text-align: center;
}
Conclusion
In this article, we have gone through the process of creating a web page that displays the current date in full, including the century, year, month, and day. We have used JavaScript to extract the date information from the current date and time, and to insert the information into the HTML document. We have also used
