How to Create A Digital Watch Using HTML CSS and Javascript? Digital Watch Html Css
Welcome to today’s tutorial. Today we are going to create a webpage that will calculate the no. For this, we are going to use HTML, CSS and Javascript.
You need basic ES6 knowledge for this javascript project. This tutorial is well suited for javascript intermediates. Let us get started with the project.
What is your information? If you don’t know what is a digital watch is, so the digital watch is a type of watch that displays the time digitally. It is opposed to the analog watch has mainly 3. Hands one for an hour one for minutes and one for seconds. It is a traditional watch, but today we are going to develop a modern watch which is a digital watch.
LIVE SERVER:-
Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.
See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.
Code:-
HTML is the basic layout of the website.In css:-We have used the basics of css like flex box property,border-box property.In script:-getHours()---Get the hour (0-23)- getMinutes()—Get the minute (0-59)
- getSeconds()—Get the second (0-59)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<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>Document</title>
<style>
body {
text-align: center;
dipslay:flex;
background-color: #000;
justify-content:center;
align-items:center;
width:100vw;
height:100vh;
}
.clock {
background: black;
color: rgb(11, 239, 247);
border:4px solid rgb(11, 239, 247);
position: absolute;
padding: 10px 20px;
font-size: 100px;
border-radius: 5px;
left: 11%;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="clock" id="clock"> </div>
<script>
function showTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var session = "AM";
if ( h == 0 ) {
h = 12;
}
if( h >= 12 ){
session = "PM";
}
if ( h > 12 ){
h = h - 12;
}
m = ( m < 10 ) ? m = "0" + m : m;
s = ( s < 10 ) ? s = "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
$('#clock').html(time);
setTimeout( showTime, 1000 );
}
showTime();
</script>
</body>
</html>
I hope hoped loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.
