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,

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee

Related Articles

1 thought on “Simple Calendar using HTML, CSS and JavaScript”

Leave a Comment

Copy link
Powered by Social Snap