Add files via upload

I created a simple clock by using HTML, CSS and JAVASCRIPT.
shaina123786 · Jul 23, 2024 · b0af0e3 · b0af0e3
1 parent 564c390
commit b0af0e3
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 0 deletions.
diff --git a/clock image.jpg b/clock image.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Clock</title>
+   <link rel="stylesheet" href="style.css">
+   <script src="script.js"></script>
+</head>
+<body>
+    <h2>SET  TIME</h2>
+    <div>
+        <label for="set-hours">Hours:</label>
+        <input type="number" id="set-hours" min="0" max="23" value="0">
+
+        <label for="set-minutes">Minutes:</label>
+        <input type="number" id="set-minutes" min="0" max="59" value="0">
+
+        <label for="set-seconds">Seconds:</label>
+        <input type="number" id="set-seconds" min="0" max="59" value="0">
+
+        <button id="set-time">Set Time</button>
+    </div>
+
+    <div id="clockcontainer">
+        <div id="hour"></div>
+        <div id="minute"></div>
+        <div id="second"></div>
+    </div>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,45 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const hour = document.getElementById('hour');
+    const minute = document.getElementById('minute');
+    const second = document.getElementById('second');
+
+    const setHours = document.getElementById('set-hours');
+    const setMinutes = document.getElementById('set-minutes');
+    const setSeconds = document.getElementById('set-seconds');
+    const setTimeButton = document.getElementById('set-time');
+
+    let htime = 0, mtime = 0, stime = 0;
+
+    const updateClock = () => {
+        let hrotation = 30 * htime + mtime / 2;
+        let mrotation = 6 * mtime;
+        let srotation = 6 * stime;
+
+        hour.style.transform = `rotate(${hrotation}deg)`;
+        minute.style.transform = `rotate(${mrotation}deg)`;
+        second.style.transform = `rotate(${srotation}deg)`;
+    };
+
+    setTimeButton.addEventListener('click', () => {
+        htime = parseInt(setHours.value, 10) || 0;
+        mtime = parseInt(setMinutes.value, 10) || 0;
+        stime = parseInt(setSeconds.value, 10) || 0;
+        updateClock();
+    });
+
+    setInterval(() => {
+        stime += 1;
+        if (stime >= 60) {
+            stime = 0;
+            mtime += 1;
+        }
+        if (mtime >= 60) {
+            mtime = 0;
+            htime += 1;
+        }
+        if (htime >= 24) {
+            htime = 0;
+        }
+        updateClock();
+    }, 1000);
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,52 @@
+/* body{ 
+    /* background-color: aqua;
+    color: blue;
+    td{
+        border: 2px solid black;
+        }
+        a{
+    text-decoration: none;
+}} */
+
+
+
+#clockcontainer{
+    position: relative;
+    margin: auto;
+    height: 40vw;
+    width: 40vw;
+    background: url('clock\ image.jpg')no-repeat;
+    background-size: 100%;
+}
+#hour,#minute,#second{
+    position: absolute;
+    background:black;
+    border-radius: 15px;
+    transform-origin: bottom;
+}
+#hour{
+    width: 1.5%;
+    height: 24%;
+    top: 27%;
+    left: 49.8%;
+
+
+}
+#minute{
+    width: 1.3%;
+    height: 28%;
+    top: 21%;
+    left: 49.9%;
+
+
+
+
+}
+#second{
+    width: 1%;
+    height: 38%;
+    top: 12%;
+left:50%;
+
+
+}