Create Wonderful Calendar With Date & Time
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="calendar.css">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>
<body>
<div class="conteiner">
<div id="conteiner2">
<div id="month"></div>
<div id="day"></div>
<div id="hour"></div>
<div id="year"></div>
</div>
</div>
<script src="calendar.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'harlow solid', italic;
background: url(https://images.unsplash.com/photo-1530813089459-29f31dd229c2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80);
opacity: 2;
}
.conteiner {
width: 100%;
height: 110vh;
background-color: black;
opacity: 1;
}
#conteiner2 {
text-align: center;
position: absolute;
top: 10%;
left: 10%;
transform: translate(-10%,-10%);
width: 100%;
}
#month {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding-top: 10px;
width: 100%;
height: 100px;
font-size: 100px;
}
#day {
padding-top: 20px;
width: 100%;
height: 170px;
font-size: 100px;
}
#hour {
padding-top: 10px;
width: 100%;
height: 89px;
font-size: 60px;
}
#year {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding-top: 15px;
width: 100%;
height: 100px;
font-size: 80px;
}
JavaScript
window.onload = function() {
let day = document.getElementById("day")
let hour = document.getElementById("hour")
let month = document.getElementById("month")
let year = document.getElementById("year")
let conteiner2 = document.getElementById("conteiner2")
let a = prompt("Write background-color")
let b = prompt("Write color")
if(a == null || a == undefined) {
conteiner2.style.color = "white"
conteiner2.style.background = 'linear-gradient(to top, transparent, red)'
}
conteiner2.style.background = 'linear-gradient(to top , transparent, ' + a + ')'
conteiner2.style.color = b
function zero(d) {
if (d < 10) {
d = "0" + d;
}
return d;
}
function now() {
let now = new Date();
let h = zero(now.getHours());
let m = zero(now.getMinutes());
let s = zero(now.getSeconds());
let w = new Array()
w[0] = 'Sunday';
w[1] = 'Monday';
w[2] = 'Tuesday';
w[3] = 'Wednesday';
w[4] = 'Thursday';
w[5] = 'Friday';
w[6] = 'Saturday';
let weekday = w[now.getDay()];
hour.innerHTML = h + ":" + m + ":" + s + ', ' + weekday;
}
setInterval(now, 0)
function date() {
let date = new Date();
let d = zero(date.getDate());
let m = new Array();
m[0] = 'January';
m[1] = 'February';
m[2] = 'March';
m[3] = 'April';
m[4] = 'May';
m[5] = 'June';
m[6] = 'July';
m[7] = 'August';
m[8] = 'September';
m[9] = 'October';
m[10] = 'November';
m[11] = 'December';
let monthtext = m[date.getMonth()];
let y = date.getFullYear();
day.innerHTML = d//+"."+month+"."+y+", " + " "+ weekday;
year.innerHTML = y
month.innerHTML = monthtext
}
setInterval(date, 0)
}
OUTPUT
Posts
32 Comments
Nicely done
ReplyDeleteVery nice keep it up
ReplyDeleteAwesome
ReplyDeleteWonderful
ReplyDeleteSuperb
ReplyDeleteSuperb
ReplyDeleteWonderful
ReplyDeleteFantastic
ReplyDeleteSuperb
ReplyDeleteExcellent
ReplyDeleteFantastic
ReplyDeleteAttractive
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteSuperb
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteExcellent
ReplyDeleteFantastic
ReplyDeleteAwesome
ReplyDeleteFantastic
ReplyDeleteVery nice
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteWonderful
ReplyDeleteSuperb
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteExcellent
ReplyDeleteFantastic
ReplyDeleteGajab
ReplyDeleteNice ma'am
ReplyDelete