14.
DIGITAL CLOCK
HTML
<!DOCTYPE html>
<html>
<head>
<title>Auto Refreshing digital clock</title>
</head>
<body>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<script src="[Link]"></script>
<link rel="stylesheet" href="[Link]">
</body>
</html>
JS
function showTime()
{
var date = new Date();
var h = [Link]();
var m = [Link]();
var s = [Link]();
var session = "AM";
if(h == 0)
{
h = 12;
}
if(h > 12)
{
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + ":" + session;
[Link]("MyClockDisplay").innerText= time;
[Link]("myClockDisplay").textContent = time;
setTimeout(showTime ,1000);
}
showTime();
CSS
body{
background-color: brown;
}
.clock
{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: bisque;
font-size: 60px;
font-family: orbitron;
letter-spacing: 7px;
}
OUTPUT
15. WEBSITE VISIT COUNTER
HTML
<!DOCTYPE html>
<html>
<head>
<title>Website counter</title>
<script defer src="[Link]"></script>
</head>
<body>
<link rel="stylesheet" href="[Link]">
<div>website visit count:</div>
<div class="website-counter"></div>
<button id="reset">Reset</button>
</body>
</html>
JS
var counterContainer = [Link](".website-counter");
var resetButton = [Link]("#reset");
var visitCount = [Link]("page-view");
if(visitCount){
visitCount = Number(visitCount) + 1;
[Link]("page-view",visitCount);
}else{
visitCount = 1;
[Link]("page-view", 1);
}
[Link] = visitCount;
[Link]("click", () => {
visitCount = 1;
[Link]("page-view", 1);
[Link] = visitCount;
});
CSS
body,
.website-Counter{
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
body{
height: 100vh;
}
.website-Counter{
background-color: blueviolet;
height: 50px;
width: 80px;
color: rgba(49, 224, 58, 0.884);
border-radius: 30px;
font-weight: 700;
font-size: 25px;
margin-top: 10px;
}
#reset{
margin-top: 20px;
background-color: #7350d4;
cursor: pointer;
font-size: 18px;
padding: 8px 20px;
color:beige;
border:0;
}
OUTPUT
