Hello Future Coders, How’s you? In this article we are going to build a mini calendar using html, css and javascript. I have provided both step by step video tutorial as well as the source code of the entire project. Let’s start.
How to Build a Mini Calendar | JavaScript Project Tutorial
Learn How to Create a Mini Calendar Using HTML, CSS and JavaScript | Source Code
Create three files: index.html, styles.css, script.js
Step 1: Adding HTML
HTML is going to be just a placeholder for the data which we will be adding through JavaScript. Create three divs to hold month, day, date and year.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>9 Mini Calendar</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="month"></div>
<div class="day"></div>
<div class="date"></div>
<div class="year"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Adding JavaScript
For the mini-calendar we only need to display month, year, date and day. First let’s get the DOM elements and store them inside month, day, date, year variables.
Now find the current date using JavaScript’s Date object and store it inside currentDate. Create an array of months and days.
Now we need to update the DOM with the data. For month, we will use the currentDay.getMonth() to get index of the current month and then pass it to the months array to get the current month.
For day we will do the same as above and call getDay() on currentDate and pass it to the days array. For date and year we can directly get them by calling getDate() and getFullYear() on currentDate.
let month = document.querySelector(".month")
let day = document.querySelector(".day")
let date = document.querySelector(".date")
let year = document.querySelector(".year")
let currentDate = new Date()
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
month.innerHTML = months[currentDate.getMonth()]
day.innerHTML = days[currentDate.getDay()]
date.innerHTML = currentDate.getDate()
year.innerHTML = currentDate.getFullYear()
Step 3: Adding CSS
Now lets style the project a bit. Refer the below styles.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ebebeb;
max-width: 900px;
margin: 0 auto;
padding: 5rem;
}
.container {
background-color: #fff;
border-radius: 1rem;
width: 20rem;
margin: 0 auto;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.container .month {
background-color: orangered;
color: #fff;
padding: 0.5rem;
text-align: center;
margin-bottom: 1rem;
font-size: 2rem;
}
.container .day {
opacity: 0.3;
text-align: center;
font-size: 1.2rem;
}
.container .date {
text-align: center;
margin: 1rem 0;
font-size: 5rem;
font-weight: bold;
}
.container .year {
font-size: 1.2rem;
opacity: 0.3;
text-align: center;
padding-bottom: 1rem;
}
Alright! It was easy right? Don’t forget to checkout our other tutorials and hope you are enjoying the content that we are posting.
