diff --git a/Analog clock/index.html b/Analog clock/index.html deleted file mode 100644 index 0563360..0000000 --- a/Analog clock/index.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - - Analog Clock - - - - - -
-
-
-
-
-
-
-
-
-
-
-

12:12:12

-
-
- -
- -
-
-

Wed,March

-
-
-
- - - \ No newline at end of file diff --git a/Analog clock/javascript.js b/Analog clock/javascript.js deleted file mode 100644 index a2b06ae..0000000 --- a/Analog clock/javascript.js +++ /dev/null @@ -1,76 +0,0 @@ -const secondEl = document.getElementById("second"); -const minuteEl = document.getElementById("minute"); -const hourEl = document.getElementById("hour"); - -// Digital - -const timeEl = document.getElementById("time"); -const dateEl = document.getElementById("date"); - -// Analog - -function setTime() { - const date = new Date(); - const second = (date.getSeconds() / 60) * 360; - const minute = (second + date.getMinutes() / 60) * 360; - const hour = (minute + date.getHours() / 12) * 360; - setClock(second, minute, hour); -} - -function setClock(second, minute, hour) { - secondEl.style.transform = `rotate(${second}deg)`; - minuteEl.style.transform = `rotate(${minute}deg)`; - hourEl.style.transform = `rotate(${hour}deg)`; - - if (second > 350) { - secondEl.style.transition = `none`; - } else if (second > 6) { - secondEl.style.transition = `.3s ease`; - } -} - -// Digital Clock - -const months = [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December", -]; - -const days = ["Sun", "Mon", "Tue", "We", "Thu", "Fri", "Sat"]; - -function setTime2() { - const date = new Date(); - const second = date.getSeconds(); - const minute = date.getMinutes(); - const hour = date.getHours(); - - const secondText = second <= 9 ? `0${second}` : `${second}`; - const minuteText = minute <= 9 ? `0${minute}` : `${minute}`; - - const hourConvert12 = hour > 12 ? hour - 12 : hour; - - const hourText = - hourConvert12 <= 9 ? `0${hourConvert12}` : `${hourConvert12}`; - - timeEl.innerHTML = `${hourText}:${minuteText}:${secondText}`; -} - -const date = new Date(); -const month = months[date.getMonth()]; -const day = days[date.getDay()]; -dateEl.innerHTML = `${day}, ${month}`; - -setInterval(() => { - setTime(); - setTime2(); -}, 1000); \ No newline at end of file diff --git a/Analog clock/style.css b/Analog clock/style.css deleted file mode 100644 index b8f97b0..0000000 --- a/Analog clock/style.css +++ /dev/null @@ -1,135 +0,0 @@ -:root { - --black: #272727; -} -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} -body { - background-color: var(--black); - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, - Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; -} -body section { - display: flex; -} -body section .analogCont .clock { - height: 250px; - width: 250px; - border: 4px solid snow; - border-radius: 50%; - position: relative; -} -.hand { - height: 100px; - width: 3px; - background-color: #fff; - position: absolute; - left: 50%; - bottom: 50%; - border-radius: 99px; - transform-origin: bottom; -} -.hand.hour { - height: 70px; - background-color: #f4f4f4; -} -.hand.minute { - height: 95px; -} -.hand.second { - background: red; - transition: 0.3 ease; -} -body section .analogCont .clock::after { - content: ""; - height: 15px; - width: 15px; - position: absolute; - background-color: #fff; - border-radius: 50%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -/* Digital Clock */ - -body section .digitalCont { - display: flex; - flex-direction: column; - user-select: none; - color: #fff; - margin-left: 1rem; - margin-top: 2rem; -} -body section .digitalCont .topCont { - display: flex; - align-items: center; - justify-content: center; -} -body section .digitalCont .time { - font-size: 3rem; - font-weight: bolder; -} -body section .digitalCont .bottomCont p { - font-size: 1.2rem; - margin-left: 1rem; -} -body section .digitalCont .topCont .icon { - height: 40px; - width: 40px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - cursor: pointer; - margin-left: 0.8rem; -} -body section .digitalCont .topCont .icon:hover { - background-color: rgba(255, 255, 255, 0.1); -} -body section .digitalCont .topCont .icon.active { - background-color: rgba(255, 255, 255, 0.1); -} -body section .digitalCont .topCont .icon .menu { - height: 3px; - width: 3px; - background-color: #fff; - position: relative; - display: flex; - transform: rotate(90deg); -} -body section .digitalCont .topCont .icon .menu::after, -body section .digitalCont .topCont .icon .menu::before { - position: absolute; - content: ""; - height: 100%; - width: 100%; - background-color: #fff; -} -body section .digitalCont .topCont .icon .menu::after { - top: -8px; -} -body section .digitalCont .topCont .icon .menu::before { - bottom: -8px; -} - -@media (max-width: 600px) { - section { - flex-direction: column; - } - body section .digitalCont { - margin-left: 0% !important; - text-align: center !important; - position: relative; - } - body section .digitalCont .topCont .icon { - position: absolute; - right: -20px; - } -} \ No newline at end of file