How to develop a mini calendar using JavaScript?
Creating a mini calendar: HTML,CSS & JS
Table of contents
In this article i will help you develop a simple web project titled Mini Calendar using HTML, CSS and JavaScript.
Final Output
Youtube Video
For detailed explanation of code watch below video.
Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mini Calendar</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section>
<div id="container" class="container"></div>
</section>
<script src="script.js"></script>
</body>
</html>
CSS
body {
margin: 0px;
background-color: biege;
font-family: cursive;
background: linear-gradient(to left, #a17728, gray);
}
.container {
width: 300px;
height: 520px;
display: flex;
justify-content: center;
flex-direction: column;
margin: 0px auto;
}
.month {
font-weight: bold;
font-size: 30px;
color: white;
background-color: red;
padding: 15px 80px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
margin-bottom: 0px;
text-align: center;
}
.day {
margin-top: 0px;
font-size: 20px;
background-color: white;
color: gray;
padding: 10px 80px;
margin-bottom: 0px;
text-align: center;
}
.date {
font-weight: bold;
font-size: 80px;
margin-top: 0px;
background-color: white;
color: black;
padding: 10px 80px;
margin-bottom: 0px;
text-align: center;
}
.year {
margin-top: 0px;
font-size: 20px;
background-color: white;
color: gray;
padding: 10px 80px;
margin-bottom: 0px;
text-align: center;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
JavaScript
let container = document.getElementById("container");
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
const todayDate = new Date();
console.log(todayDate);
let date = todayDate.getDate();
console.log(date);
let year = todayDate.getFullYear();
console.log(year);
let month = months[todayDate.getMonth()];
console.log(month);
let day = days[todayDate.getDay()];
console.log(day);
const monthDiv = document.createElement("p");
monthDiv.innerText = month;
monthDiv.className = "month";
container.appendChild(monthDiv);
const dayDiv = document.createElement("p");
dayDiv.innerText = day;
dayDiv.className = "day";
container.appendChild(dayDiv);
const dateDiv = document.createElement("p");
dateDiv.innerText = date;
dateDiv.className = "date";
container.appendChild(dateDiv);
const yearDiv = document.createElement("p");
yearDiv.innerText = year;
yearDiv.className = "year";
container.appendChild(yearDiv);
I hope you find this article helpful.
Please don't forget to like, comment and share and you can also check out my other articles. Also, don't forget to subscribe to my newsletter so you can be notified about new articles.
I am looking to get into technical writing so if you want me to write an article then please connect with me on my Twitter handle here.
Let me also know which topic I should write about next.