Commit b7e3102

committed

Digital clock

0 parents commit b7e3102Copy full SHA for b7e3102

File tree

+91

-0

lines changed

+91

-0

lines changed

Lines changed: 17 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,17 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+<head>`
	`4`	`+ <meta charset="UTF-8">`
	`5`	`+ <meta http-equiv="X-UA-Compatible" content="IE=edge">`
	`6`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`7`	`+ <title>Digital Clock</title>`
	`8`	`+ <link rel="stylesheet" href="style.css">`
	`9`	`+</head>`
	`10`	`+<body>`
	`11`	`+ <div class="watch-container">`
	`12`	`+ <p><span id="outputHour"></span> : <span id="outputMinute"></span> : <span id="outputSecond"></span></p>`
	`13`	`+ </div>`
	`14`	`+`
	`15`	`+ <script src="main.js"></script>`
	`16`	`+</body>`
	`17`	`+</html>`

Lines changed: 48 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,48 @@`
	`1`	`+const todayDate = new Date();`
	`2`	`+var currentHour = Number(todayDate.getHours());`
	`3`	`+var currentMin = Number(todayDate.getMinutes());`
	`4`	`+var currentSec = Number(todayDate.getSeconds());`
	`5`	`+var outputHour = document.getElementById("outputHour");`
	`6`	`+var outputMinute = document.getElementById("outputMinute");`
	`7`	`+var outputSecond = document.getElementById("outputSecond");`
	`8`	`+`
	`9`	`+outputHour.innerHTML = FormatTime(currentHour);`
	`10`	`+outputMinute.innerHTML = FormatTime(currentMin);`
	`11`	`+outputSecond.innerHTML = FormatTime(currentSec);`
	`12`	`+`
	`13`	`+var countId = setInterval(myClock,1000);`
	`14`	`+function myClock()`
	`15`	`+{`
	`16`	`+ currentSec++;`
	`17`	`+ if(currentSec == 60)`
	`18`	`+ {`
	`19`	`+ currentSec = 0;`
	`20`	`+ currentMin++;`
	`21`	`+ if(currentMin == 60)`
	`22`	`+ {`
	`23`	`+ currentMin = 0;`
	`24`	`+ currentHour++;`
	`25`	`+ }`
	`26`	`+ outputMinute.innerHTML = FormatTime(currentMin);`
	`27`	`+ }`
	`28`	`+ outputSecond.innerHTML = FormatTime(currentSec);`
	`29`	`+ if(currentHour == 24)`
	`30`	`+ {`
	`31`	`+ currentHour = 0;`
	`32`	`+ }`
	`33`	`+ outputHour.innerHTML = FormatTime(currentHour);`
	`34`	`+}`
	`35`	`+`
	`36`	`+function FormatTime(time)`
	`37`	`+{`
	`38`	`+ var formatedTime`
	`39`	`+ if(time < 10)`
	`40`	`+ {`
	`41`	`+ formatedTime = "0" + time.toString();`
	`42`	`+ }`
	`43`	`+ else`
	`44`	`+ {`
	`45`	`+ formatedTime = time;`
	`46`	`+ }`
	`47`	`+ return formatedTime`
	`48`	`+}`

Lines changed: 26 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,26 @@`
	`1`	`+*{`
	`2`	`+ margin: 0;`
	`3`	`+ padding: 0;`
	`4`	`+ box-sizing: border-box;`
	`5`	`+}`
	`6`	`+body{`
	`7`	`+ height: 100vh;`
	`8`	`+ width: 100%;`
	`9`	`+}`
	`10`	`+.watch-container{`
	`11`	`+ width: 100%;`
	`12`	`+ min-height: 100%;`
	`13`	`+ display: flex;`
	`14`	`+ flex-direction: column;`
	`15`	`+ justify-content: center;`
	`16`	`+ align-items: center;`
	`17`	`+}`
	`18`	`+.watch-container p{`
	`19`	`+ padding: 5px;`
	`20`	`+ letter-spacing: 1px;`
	`21`	`+ font-size: 40px;`
	`22`	`+ box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;`
	`23`	`+}`
	`24`	`+.watch-container p span{`
	`25`	`+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;`
	`26`	`+}`

Comments

(0)