Calendar HTML CSS JS Code
πHTML CSS JS mini calendar project, showing a nice widget with the current date.
Super
0
76
This code is taken from a video from one of the YouTube channels, here is a beautiful JS calendar design, it only shows the current date, month and year. The code is not large and can be used in various projects when developing html pages of the site.
HTML
<style>
@import url('https//fonts.googleapis.com/css2?family=Poppins:[email protected];400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222327;
}
.week{
display: flex;
gap: 5px;
height: 120px;
padding: 20px 40px;
background: #fff;
border-radius: 10px;
}
.week li{
list-style: none;
height: 80px;
width: 80px;
display: flex;
justify-content: center;
align-items: center;
color: #666;
border-radius: 20px;
font-size: 1.25em;
}
.week li.current{
position: relative;
background: #29fd53;
height: 100px;
width: 100px;
font-size: 1.65em;
color: #222327;
border: 6px solid #222327;
transform: translateY(-70px);
font-weight: 500;
cursor: pointer;
}
.week li.current h1{
position: absolute;
transform: translateY(76px);
font-size: 1.6em;
color: #222327;
}
.week li.current h5{
position: absolute;
transform: translateY(105px);
font-size: 0.55em;
color: #222327;
font-weight: 500;
}
.week li.current h3{
position: absolute;
transform: translateY(-60px);
font-size: 0.45em;
color: #fff;
font-weight: 500;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mini Calendar</title>
</head>
<body>
<ul class="week">
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
<li>Sun</li>
</ul>
<script>
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
let date = new Date();
let dayNum = date.getDay();
let day = date.getDate();
let month = months[date.getMonth()];
let year = date.getFullYear();
let active = document.querySelector(".week li:nth-child("+dayNum+")");
active.classList.add('current');
let h1 = document.createElement('h1');
h1.innerHTML = day;
active.appendChild(h1);
let h5 = document.createElement('h5');
h5.innerHTML = month;
active.appendChild(h5);
let h3 = document.createElement('h3');
h3.innerHTML = year;
active.appendChild(h3);
</script>
</body>
</html>
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
