Calender(Mini) Using Javascript

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Calender</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="hero">

        <div class="calender">

            <div class="left">

                <p id="date">01</p>

                <p id="day">Sunday</p>

            </div>

            <div class="right">

                <p id="month">January</p>

                <p id="year">2024</p>

            </div>

        </div>

    </div>

    <script>

        const date = document.getElementById("date");

        const day = document.getElementById("day");

        const month = document.getElementById("month");

        const year = document.getElementById("year");

        const today = new Date();

        const weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];

        const allMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

        date.innerHTML = today.getDate();

        day.innerHTML = weekDays[today.getDay()];

        month.innerHTML = allMonths[today.getMonth()];

        year.innerHTML = today.getyear();

    </script>

</body>

</html>

CSS

* {

    margin: 0;

    padding: 0;

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    box-sizing: border-box;

}

.hero {

    width: 100%;

    min-height: 100vh;

    background: linear-gradient(45deg, #1d0000, #20205b);

    display: flex;

    align-items: center;

    justify-content: center;

}

.calender {

    width: 350px;

    height: 250px;

    background: #fff;

    display: flex;

    align-items: center;

    border-radius: 10px;

}

.left,

.right {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    flex-direction: column;

}

.right {

    width: 47%;

    background: red;

    color: aliceblue;

    border-top-right-radius: 10px;

    border-bottom-right-radius: 10px;

}

.left {

    width: 53%;

}

#date {

    font-size: 100px;

    line-height: 90px;

}

OUTPUT

https://debadatta77.github.io/Calender/

DEBADATTA PARIDA