Build an Awesome Calendar Using HTML CSS and JavaScript | Mini Project Windows 10 style Tutorial
Build an Awesome Calendar Using HTML CSS and JavaScript
Build an calender can be a challenging and tough task, also many other web developer came across where they have to design and develop something in their learning journey to level up their development. Therefore by utilizing HTML,CSS, and JavaScript it easy to make a calender.
Today in this blog you will learn to Build an Awesome Calendar Using HTML CSS and JavaScript | Mini Project Windows 10 style Tutorial. I sure it will also help to level up your web development skills.
As in above tutorial of Window 10 calender. This calender style like window 10 calender with a simple and easy code
I would highly recommend you watch the full video tutorial of this calender. In the video tutorial, you will learn step by step coding so that you can understand how to code.
Steps for Creating a Calender using HTML CSS & JavaScript
To start working on calender HTML, CSS, and JavaScript, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
calender.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do this then scroll down and download all the source code files of the Calender, by clicking on the given download button.
Now, paste the following code into your calender.html file
<!DOCTYPE html>
<!-- Coding By TheProviders - theproviders.tech -->
<html>
<head>
<title>Awesome Calendar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="week-days">
<p>September 2021</p>
<hr>
<div class="week">Mo</div>
<div class="week">Tu</div>
<div class="week">We</div>
<div class="week">Th</div>
<div class="week">Fr</div>
<div class="week">Sa</div>
<div class="week">Su</div>
</div>
<div class="week-dates">
<div class="disable">29</div>
<div class="disable">30</div>
<div class="disable">31</div>
<div class="days">1</div>
<div class="days">2</div>
<div class="days">3</div>
<div class="days">4</div>
<div class="days">5</div>
<div class="days">6</div>
<div class="days">7</div>
<div class="days">8</div>
<div class="days">9</div>
<div class="days">10</div>
<div class="days">11</div>
<div class="days">12</div>
<div class="days">13</div>
<div class="days">14</div>
<div class="days">15</div>
<div class="days">16</div>
<div class="days">17</div>
<div class="days">18</div>
<div class="days">19</div>
<div class="days active">20</div>
<div class="days">21</div>
<div class="days">22</div>
<div class="days">23</div>
<div class="days">24</div>
<div class="days">25</div>
<div class="days">26</div>
<div class="days">27</div>
<div class="days">28</div>
<div class="days">29</div>
<div class="days">30</div>
<div class="disable">1</div>
<div class="disable">2</div>
<div class="disable">3</div>
<div class="disable">4</div>
<div class="disable">5</div>
<div class="disable">6</div>
<div class="disable">7</div>
<div class="disable">8</div>
<div class="disable">9</div>
</div>
<div id="movediv"></div>
</div>
<script type="text/javascript">
var moveDiv = document.getElementById('movediv');
window.onmousemove = function(e){
var x = e.pageX,
y = e.pageY;
moveDiv.style.top = (y+ -120) + 'px';
moveDiv.style.left = (x + -60) + 'px';
}
</script>
</body>
</html>
Next, paste the following code into your style.css file
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400&display=swap');
/*Styling for Calendar*/
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
font-family: 'Ubuntu' , sans-serif;
background: #f5f5ff;
box-sizing: border-box;
transform: translate(0%,15%);
overflow: hidden;
}
.main{
width: 400px;
height: 100%;
color: #ffd;
background-color: rgba(58,58,58,255);
box-shadow: rgba(0,0,0,0.6) 0px 20px 50px;
z-index: -1;
}
.week-days{
width: 100%;
height: 100%;
background-color: rgba(58,58,58,255);
overflow: hidden;
z-index: 1;
}
p{
color: #ccc;
padding: 0px 15px;
}
hr{
border-top-width: 0;
border-bottom-color: #666;
}
.week , .days , .disable{
width: 30px;
height: 25px;
padding: 10px;
margin: 1.5px;
text-align: center;
line-height: 1.5em;
border:1px;
border:2px solid transparent;
background-color: rgba(58,58,58,255);
float: left;
}
.days:hover{
border:2px solid #a8a5a5;
}
.active{
border:2px solid #000;
background-color: #3458eb;
}
.disable{
color: #666;
cursor: no-drop;
}
#movediv{
position: absolute;
height: 110px;
width: 110px;
background-color: #ffd;
border-radius: 50%;
opacity: .3;
filter: blur(20px);
z-index: -1;
}
