Introduction
This project entails developing a mini calendar that shows the date of the computer on which the page is opened. This date is dynamically accessed through JavaScript to ensure that the page is always updated with the current date.
Source Code:
HTML:
<!DOCTYPE
html>
<html>
<head>
<title>
Mini Calendar
</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div
class="calendar-container">
<p class="month-name" id="month-name"> June </p>
<p class="day-name" id="day-name"> Friday </p>
<p class="day-number" id="day-number"> 28 </p>
<p
class="year"
id="year">2024</p>
</div>
<script
src="script.js"></script>
</body>
</html>
CSS:
body
{
margin
:
0;
display
:
flex;
justify-content
:
center;
height
:
100vh;
align-items
:
center;
font-family
:
cursive;
background-color
:
slateblue;
}
.calendar-container
{
background-color
:
white;
width
:
300px;
text-align
:
center;
border-radius
:
10px;
box-shadow
:
0 4px 8px rgba(0, 0, 0, 0.3);
overflow
:
hidden;
}
.month-name
{
margin
:
0;
background-color
:
orangered;
color
:
white;
padding
:
10px;
font-size
:
30px;
font-weight
:
bold;
}
.day-name
{
font-size
:
20px;
color
:
darkgray;
}
.day-number
{
font-size
:
80px;
margin
:
0;
font-weight
:
bold;
}
.year
{
margin
:
20px 0;
font-size
:
20px;
color
:
darkgray;
font-weight
:
500;
}
JavaScript:
const monthNameEl
= document.getElementById("month-name");
const dayNameEl
= document.getElementById("day-name");
const dayNumEl
= document.getElementById("day-number");
const yearEl
= document.getElementById("year");
const date
=
new
Date();
const month
= date.getMonth();
monthNameEl.innerText
= date.toLocaleString("en", {month: "long",});
dayNameEl.innerText
= date.toLocaleString("en", {weekday: "long",});
dayNameEl.innerText
= date.getDate();
yearEl.innerText
= date.getFullYear();
Output
