Simple Calendar using HTML, CSS and JavaScript

Simple Calendar with HTML, CSS, and JavaScript. This Calendar change date daily with Day, Date, Month, and Year. You can add this small code on your website and it looks simple and minimal.Simple Calendar using HTML, CSS, and JavaScript

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Calender</title>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <div id="calender">
        <p id="calender-day">

        </p>

        <p id="calender-date">

        </p>

        <p id="calender-month-year">

        </p>
    </div>
</body>
</html>

Style.css

#calender{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 130px;
    height: 180px;
    background-color: cornflowerblue;
    border:#fff;
    border-radius: 5%;
    box-shadow: 0 4px 4px 0 rgba(50,50,50,0.4);
}
#calender>p{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 10px 0;
    margin: 0;
    color:#fff;
    text-align: center;
}

#calender-day{
    font-size:16px;
}

#calender-month-year{
    font-size: 14px;
}

#calender-date{
    font-size:64px;
    padding-top:10px;
    padding-bottom: 0;
}

Script.js

function calender(){
    var day=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var month= ["January","February","March","April","May","June","July",
            "August","September","October","November","December"];
    var d=new Date();
    setText('calender-day',day[d.getDay()]);
    setText('calender-date',d.getDate());
    setText('calender-month-year',month[d.getMonth()]+' '+(1900+d.getYear()));
};

function setText(id, val){
    if(val<10){
        val='0'+val;
    }
    document.getElementById(id).innerHTML=val;  
};

// call calender()

window.onload=calender;

Output

Simple Calendar with HTML, CSS and JavaScript

So, it is a simple calendar using HTML, CSS, and JavaScript. To download the code click on the following download button.Download

ou may also like,