diff --git a/4.Live-Digital-Clock/index.html b/4.Live-Digital-Clock/index.html new file mode 100644 index 0000000..f2ec83f --- /dev/null +++ b/4.Live-Digital-Clock/index.html @@ -0,0 +1,19 @@ + + + + + + + + LiveDigitalClock + + +
+
+ + +
+
+ + + \ No newline at end of file diff --git a/4.Live-Digital-Clock/index.js b/4.Live-Digital-Clock/index.js new file mode 100644 index 0000000..48815cb --- /dev/null +++ b/4.Live-Digital-Clock/index.js @@ -0,0 +1,27 @@ + +setInterval(update,1); + +function update(){ + let date=new Date(); + function formatTime(date){ + let hour=date.getHours(); + let min=date.getMinutes(); + if(min<10) return `${hour}:0${min}`; + return `${hour}:${min}`; + } + + function formatSec(date){ + let sec=date.getSeconds(); + return `${sec}`; + } + + function formatmillisec(date){ + let ms=date.getMilliseconds(); + return `${ms}`; + } + + document.getElementById("hourMin").innerHTML=formatTime(date); + document.getElementById("second").innerHTML=formatSec(date); + document.getElementById("millisec").innerHTML=formatmillisec(date); + +} \ No newline at end of file diff --git a/4.Live-Digital-Clock/style.css b/4.Live-Digital-Clock/style.css new file mode 100644 index 0000000..a8ad17a --- /dev/null +++ b/4.Live-Digital-Clock/style.css @@ -0,0 +1,26 @@ +body{ + margin: 0; + background-color: rgb(247, 240, 222); +} +#container{ + height: 110px; + margin-top: 150px; + background-color: rgba(107, 148, 171, 0.747); +} + +#clock{ + position: absolute; + margin-top: 10px; + display: flex; + flex-direction: column; + width: 15%; + height: 110px; + font-family: 'Orbitron', sans-serif; + background-color: rgba(103, 195, 134, 0.918); + text-align: center; + left: 50%; + transform: translateX(-50%); + justify-content: center; + border-radius: 15px; + box-shadow: 10px -10px rgba(107, 148, 171, 0.747),20px -20px rgba(107, 126, 144, 0.771); +} \ No newline at end of file