Skip to main content

Digital Clock Project in Javascript

Create a digital clock using HTML, CSS, and javascript.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Digital Clock</title>
</head>
<body>
<div style="margin-left: 20%; 
margin-right: 20%;
margin-top: 5%";
align: center;>

<h1 align="center" 
style="color: Green;
font-size: 60px; 
font-family: Gill Sans;">
Digital Clock
</h1>
    <div class="row" align="center" style="border: 2px solid green ;
border-radius: 20px;
height: 20%;
width: 70%;
margin-top: 20px;
margin-left:10% ;
margin-bottom: 3%;
background-color: Green; ">
      
<h1 id="clock" 
style=" font-family: Gill Sans;
font-size: 60px; 
align:center;
color: White;"></h1>

    </div>
</div>
<script type="text/javascript">
  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;}  // 12 hr format

    if ( h > 12) { h = h - 12; session = "PM"}

   //if ( h < 10) { h ="0"+ h; }
   h = (h<10)?"0"+h:h;
   m = (m < 10)?"0"+m:m;
   s = (s < 10)?"0" +s:s;

    document.getElementById("clock").innerHTML = h + ":" + m + ":" + s + " " +session;
    setTimeout(showTime, 1000);
}
showTime();

  </script>
</body>
</html>




Video link:

https://youtu.be/OwwL4w9ZA1g




Labels:

Comments

Post a Comment

Popular posts from this blog

Python Turtle : Create a attractive Petal Design

 Python Turtle Attractive Petal design in Python  import turtle # create the turtle object trt = turtle.Turtle() # create the screen object scr = turtle.Screen() #increase the pensize trt.pensize( 3 ) # set the background color to black scr.bgcolor( 'black' ) # set the pencolor to white colors = [ 'red' , 'orange' , 'yellow' , 'skyblue' , 'blue' , 'indigo' , 'violet' ] # increase the speed trt.speed( 0 ) # now first create a single petal # lets define the distance dis = 50 trt.color( "yellow" ) for color in range ( 20 ): for j in range ( 1 , 8 ): trt.left( 50 ) for i in range ( 2 ): trt.forward(dis) trt.left( 60 ) #rotate at 60 degree in clockwise trt.forward(dis) trt.left( 120 ) #rotate at 120 degree in clockwise dis = dis + 5 #hide the turtle after the shape has been drawn trt.hideturtle() turtle.done() Output : Learn thr...
Post a Comment
Read more

Python Turtle tutorials : Create a Bi-Pyramid structure

 Python Turtle Tutorials  Create a Bi-Pyramid structure using Python  Code :           """ Program to create a Bi-pyramid structure Source : CODE PROBLEM (Youtube) """ import turtle scr = turtle.Screen() # create screen object scr.bgcolor( 'black' ) turtle.speed( 0 ) # the fastest speed turtle.pensize( 2 ) # set the width of the drawing pen turtle.color( 'skyblue' ) # set pencolor to 'skyblue' for i in range ( 30 ): turtle.fd(i* 10 ) turtle.right( 120 ) for j in range ( 29 , 0 ,- 1 ): turtle.fd(j* 10 ) # move forward turtle.left( 120 ) turtle.hideturtle() # hiding the turtle after the completion of the drawing turtle.done() # for holding the screen Output : Learn from video : Watch on youtube
Post a Comment
Read more

Corona virus guidelines chart program in C language

C Program to create Amazing  Coronavirus guidelines Chart #include<graphics.h> #include<dos.h> #include<conio.h> void main() { int gd=DETECT,gm; initgraph(&gd,&gm,"C:\\Turboc3\\BGI"); int x,y,i; x=getmaxx()/2; y=getmaxy()/2; setbkcolor(0); for(i=0;i<20;i++){ //-------- rectangle ----------------- setcolor(i+2); rectangle(20,20,x*2-15,y*2-150); delay(600); rectangle(15,15,x*2-10,y*2-145); delay(400); //----------- heading ------------ setcolor(i+1); settextstyle(7,HORIZ_DIR,2); outtextxy(x-170,45, "-: CORONA VIRUS GUIDELINES :-"); line(x-180,73,x+200,73); delay(500); // ---------- points section ------------ setcolor(i); settextstyle(1,HORIZ_DIR,1); outtextxy(35,90,"1. STAY HOME. "); outtextxy(35,120,"2. REGULARLY WASH YOUR HANDS. "); outtextxy(35,150,"3. MAINTAIN SOCIAL DISTANCE AND AVOID PUBLIC GATHERING . "); outtextxy(35,180,"4. AVOID TOUCHING EYES,NOSE AND M...
Post a Comment
Read more