diff --git a/9-Color Full Digital & Analog Clock/README.md b/9-Color Full Digital & Analog Clock/README.md new file mode 100644 index 00000000..adc98c5c --- /dev/null +++ b/9-Color Full Digital & Analog Clock/README.md @@ -0,0 +1 @@ +![image](https://user-images.githubusercontent.com/93567891/198389318-aadb61b6-c7bc-4260-8836-c021868f01cb.png) diff --git a/9-Color Full Digital & Analog Clock/index.html b/9-Color Full Digital & Analog Clock/index.html new file mode 100644 index 00000000..e1008675 --- /dev/null +++ b/9-Color Full Digital & Analog Clock/index.html @@ -0,0 +1,54 @@ + + + + + + + Clock + + + +
+
+
+
+
+ + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 +
+ + +
+
00
+
00
+
00
+
AM
+
+ +
+ + + + diff --git a/9-Color Full Digital & Analog Clock/script.js b/9-Color Full Digital & Analog Clock/script.js new file mode 100644 index 00000000..7836272f --- /dev/null +++ b/9-Color Full Digital & Analog Clock/script.js @@ -0,0 +1,39 @@ +let hr = document.querySelector("#hr"); +let mn = document.querySelector("#mn"); +let sc = document.querySelector("#sc"); + +setInterval(() => { + let day = new Date(); + let hh = day.getHours() * 30; + let mm = day.getMinutes() * 6; + let ss = day.getSeconds() * 6; + + hr.style.transform = `rotateZ(${hh + mm / 12}deg)`; + mn.style.transform = `rotateZ(${mm}deg)`; + sc.style.transform = `rotateZ(${ss}deg)`; + + // Digital clock + let hours = document.getElementById("hours"); + let minutes = document.getElementById("minutes"); + let seconds = document.getElementById("seconds"); + let ampm = document.getElementById("ampm"); + + let h = new Date().getHours(); + let m = new Date().getMinutes(); + let s = new Date().getSeconds(); + + let am=h >=12?"PM":"AM"; + + if (h>12){ + h=h-12; + } + + h=(h<10)?"0"+h:h + m=(m<10)?"0"+m:m + s=(s<10)?"0"+s:s + + hours.innerHTML = h; + minutes.innerHTML = m; + seconds.innerHTML = s; + ampm.innerHTML=am; +}); diff --git a/9-Color Full Digital & Analog Clock/style.css b/9-Color Full Digital & Analog Clock/style.css new file mode 100644 index 00000000..da77fc4f --- /dev/null +++ b/9-Color Full Digital & Analog Clock/style.css @@ -0,0 +1,161 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + box-sizing: border-box; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #2f363e; +} +.container{ + position: relative; + background: #2f363e; + /* min-height: 500px; */ + border-radius: 20px; + border-top-left-radius: 225px; + border-top-right-radius: 225px; + box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.75), 10px 10px 70px rgba(0, 0, 0, 0.25),inset 5px 5px 10px rgba(0, 0, 0, 0.5),inset 5px 5px 20px rgba(0, 0, 0, 0.2),inset -5px 5px 15px rgba(0, 0, 0, 0.75); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.clock{ + position: relative; + width: 450px; + height: 450px; + background: #2f363e; + border-radius: 50%; + box-shadow: 10px 50px 70px rgba(0, 0, 0, 0.25),inset 5px 5px 10px rgba(0, 0, 0, 0.5),inset 5px 5px 20px rgba(225, 225, 255, 0.2),inset -5px 5px 15px rgba(0, 0, 0, 0.75); + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 30px; +} +.clock::before{ + content: ''; + position: absolute; + width: 8px; + height: 8px; + background: #2f363e; + border: 3px solid white; + border-radius: 50%; + z-index: 10000000; +} + +.clock span{ + position: absolute; + inset: 20px; + color: #fff; + text-align: center; + transform: rotate(calc(30deg*var(--i))); +} +.clock span b{ + font-size: 2em; + opacity: 0.25; + font-weight: 600; + display: inline-block; + transform: rotate(calc(-30deg * var(--i))); +} + +.circle{ + position: absolute; + width: 300px; + height: 300px; + border: 2px solid rgba(0, 0, 0, 0.25); + border-radius: 50%; + display: flex; + align-items: flex-start; + justify-content: center; + z-index: 10; +} + +.circle i{ + position: absolute; + width: 6px; + height: 50%; + background: var(--clr); + opacity: 0.7 5; + transform: scaleY(0.5); + transform-origin: bottom; +} +.circle:nth-child(1) i{ + width: 2px; +} +.circle:nth-child(2) i{ + width: 6px; +} +.circle2{ + width: 240px; + height: 240px; + z-index: 9; +} +.circle3{ + width: 180px; + height: 180px; + z-index: 8; + +} +.circle::before{ + content: ''; + position: absolute; + top: -8.5px; + width: 15px; + height: 15px; + border-radius: 50%; + background: var(--clr); + box-shadow: 0 0 20px var(--clr), + 0 0 60px var(--clr); +} + +/* digital clock style */ +#time{ + margin-bottom: 40px; + display: flex; + padding: 10px 20px; + font-size: 2em; + font-weight: 600; + border: 2px solid rgba(0, 0, 0, 0.5); + border-radius: 40px; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), + inset 5px 5px 20px rgba(255, 255, 255, 0.2), + inset -5px -5px 15px rgba(0, 0, 0, 0.75); +} + +#time div{ + position: relative; + width: 60px; + text-align: center; + font-weight: 500; + color: var(--clr); +} +#time div:nth-child(1)::after,#time div:nth-child(2)::after{ + content: ':'; + position: absolute; + right: -4px; +} +#time div:last-child{ + font-size: 0.5em; + display: flex; + justify-content: center; + align-items: center; + color: #fff; +} +#time div:nth-child(2)::after{ + animation: animate 1s steps(1) infinite; +} + +@keyframes animate { + 0%{ + opacity: 1; + } + 50%{ + opacity: 0; + } +}