How to Create A Digital Watch Using HTML CSS and Javscript? Digital Watch Html Css

How to Create A Digital Watch Using HTML CSS and Javascript? Digital Watch Html Css

How to Create A Digital Watch Using HTML CSS and Javscript? 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>
Now finally, your watch is ready. Now you can use this watch. Whenever you want to see the time, it is a digital watch. You can see on your phone, computer, mobile,etc.

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.

If you faced any difficulty feel free to comment on your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.

Written by @Himanshu Singh. 


Leave a Reply