Animated Clock

[{"id":97,"created_at":"2023-10-18T21:19:35.940992+00:00","html":"

","css":"body {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: snow;\n}\n\n.clock {\n width: 200px;\n height: 200px;\n border: 10px solid brown;\n border-radius: 50%;\n position: relative;\n transition: all ease-in-out 200ms;\n background-color: oldlace;\n}\n\n.clock:hover {\n border-radius: 10%;\n}\n\n.hour-hand,\n.minute-hand,\n.second-hand {\n position: absolute;\n transform-origin: center bottom;\n top: 50%;\n left: 50%;\n transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);\n}\n\n.hour-hand {\n width: 6px;\n height: 40px;\n margin-top: -40px;\n /* Half the height */\n background-color: black;\n}\n\n.minute-hand {\n width: 4px;\n height: 60px;\n margin-top: -60px;\n /* Half the height */\n}\n\n.minute-hand::after {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 70px;\n top: 0;\n background-color: black;\n}\n\n.minute-hand::after {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 70px;\n top: 0;\n background-color: black;\n}\n\n\n.second-hand {\n width: 3px;\n height: 70px;\n /* background: red; */\n margin-top: -70px;\n /* Half the height */\n\n}\n\n.second-hand::after {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 90px;\n top: 0;\n background-color: red;\n}\n\n.center-circle {\n position: absolute;\n width: 10px;\n height: 10px;\n background: brown;\n /* border: 1px solid; */\n border-radius: 50%;\n top: 50%;\n left: 55%;\n transform: translate(-50%, -50%);\n}\n\n.center {\n position: relative;\n width: 20%;\n height: 20%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n\n","js":"function updateClock() {\n const now = new Date();\n const hour = now.getHours() % 12;\n const minute = now.getMinutes();\n const second = now.getSeconds();\n\n const hourDeg = (hour + minute / 60) * 360 / 12;\n const minuteDeg = (minute + second / 60) * 360 / 60;\n const secondDeg = second * 360 / 60;\n\n document.querySelector('.hour-hand').style.transform = `rotate(${hourDeg}deg)`;\n document.querySelector('.minute-hand').style.transform = `rotate(${minuteDeg}deg)`;\n document.querySelector('.second-hand').style.transform = `rotate(${secondDeg}deg)`;\n}\n\nsetInterval(updateClock, 1000);\nupdateClock(); // To set the initial position of the clock hands\n\n\n\n","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"568lSi","description":"Animated Clock ","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":"[{\"messageId\":\"DEVCANVAS_INITIAL_MESSAGE\",\"role\":\"user\",\"content\":\"This is my current code\"},{\"messageId\":\"DEVCANVAS_INITIAL_CODE\",\"role\":\"user\",\"content\":\"\\n\\t\\n\\n\\t\\n\\t\\t\\n\\t\\t\\n\\t\\tAnimated Clock \\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\n \\n\\t\\n\\t\\n\\t\\t

\\r\\n

\\n\\t\\t\\n \\n\\t\\n\"}]","view":[{"views":618}],"profiles":{"username":"devcanvas"}}]