From 69ebfe5df57d0090916b2d500fbd488cbd73fe57 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 21:56:19 +0530 Subject: [PATCH 01/10] Create a template for project --- Source-Code/AnalogWatch/index.html | 11 +++++++++++ Source-Code/AnalogWatch/script.js | 0 Source-Code/AnalogWatch/style.css | 0 3 files changed, 11 insertions(+) create mode 100644 Source-Code/AnalogWatch/index.html create mode 100644 Source-Code/AnalogWatch/script.js create mode 100644 Source-Code/AnalogWatch/style.css diff --git a/Source-Code/AnalogWatch/index.html b/Source-Code/AnalogWatch/index.html new file mode 100644 index 0000000..189b1e1 --- /dev/null +++ b/Source-Code/AnalogWatch/index.html @@ -0,0 +1,11 @@ + + + + + + Analog Watch + + + + + \ No newline at end of file diff --git a/Source-Code/AnalogWatch/script.js b/Source-Code/AnalogWatch/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/AnalogWatch/style.css b/Source-Code/AnalogWatch/style.css new file mode 100644 index 0000000..e69de29 From c7267938772b8cb193a4988ad4646e62347d4335 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 21:56:47 +0530 Subject: [PATCH 02/10] Add div containers --- Source-Code/AnalogWatch/index.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/Source-Code/AnalogWatch/index.html b/Source-Code/AnalogWatch/index.html index 189b1e1..aa068db 100644 --- a/Source-Code/AnalogWatch/index.html +++ b/Source-Code/AnalogWatch/index.html @@ -4,8 +4,15 @@ Analog Watch + - +
+
+
+
+
+
+ - \ No newline at end of file + From 2ba2283570043e7b7270aec3f7efbe10b9c88020 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 21:57:57 +0530 Subject: [PATCH 03/10] Add styles --- Source-Code/AnalogWatch/style.css | 65 +++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/Source-Code/AnalogWatch/style.css b/Source-Code/AnalogWatch/style.css index e69de29..af9800a 100644 --- a/Source-Code/AnalogWatch/style.css +++ b/Source-Code/AnalogWatch/style.css @@ -0,0 +1,65 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #f0f0f0; + margin: 0; +} + +.clock { + position: relative; + width: 300px; + height: 300px; + border: 10px solid #333; + border-radius: 50%; + background: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + +.hand { + position: absolute; + background: #333; + border-radius: 50%; + transform-origin: bottom; + transform: rotate(90deg); + transition: transform 0.5s cubic-bezier(0.4, 2.3, 0.3, 1); +} + +.hour { + width: 6px; + height: 80px; + left: 50%; + top: 50%; + transform: translateX(-50%); + background: #333; +} + +.minute { + width: 4px; + height: 110px; + left: 50%; + top: 50%; + transform: translateX(-50%); + background: #666; +} + +.second { + width: 2px; + height: 120px; + left: 50%; + top: 50%; + transform: translateX(-50%); + background: red; +} + +.center { + position: absolute; + width: 14px; + height: 14px; + background: #333; + border-radius: 50%; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} From 1deb39153b256fd1323e4221c81a978c616e4be5 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 22:30:47 +0530 Subject: [PATCH 04/10] Add another div --- Source-Code/AnalogWatch/index.html | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/Source-Code/AnalogWatch/index.html b/Source-Code/AnalogWatch/index.html index aa068db..456e4df 100644 --- a/Source-Code/AnalogWatch/index.html +++ b/Source-Code/AnalogWatch/index.html @@ -8,10 +8,18 @@
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ +
From 04d8a8e04ba42b6e5342998082c9bd0683a2d7da Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 22:31:34 +0530 Subject: [PATCH 05/10] remove width and update styles --- Source-Code/AnalogWatch/style.css | 133 +++++++++++++++++++----------- 1 file changed, 83 insertions(+), 50 deletions(-) diff --git a/Source-Code/AnalogWatch/style.css b/Source-Code/AnalogWatch/style.css index af9800a..68f0a42 100644 --- a/Source-Code/AnalogWatch/style.css +++ b/Source-Code/AnalogWatch/style.css @@ -1,65 +1,98 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - background: #f0f0f0; - margin: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #2a083d; + z-index: -1; } .clock { - position: relative; - width: 300px; - height: 300px; - border: 10px solid #333; - border-radius: 50%; - background: white; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + width: 350px; + height: 350px; + background: url("./assets/clock.png"); + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + border: 4px solid #091921; + box-shadow: + 0 -15px 15px rgba(255, 255, 255, 0.25), + inset 0 -15px 15px rgba(255, 255, 255, 0.05), + 0 15px 15px rgba(0, 0, 0, 0.3), + inset 0 15px 15px rgba(0, 0, 0, 0.3); } -.hand { - position: absolute; - background: #333; - border-radius: 50%; - transform-origin: bottom; - transform: rotate(90deg); - transition: transform 0.5s cubic-bezier(0.4, 2.3, 0.3, 1); +.clock::before { + content: ""; + position: absolute; + width: 15px; + height: 15px; + background: #848484; + border: 2px solid #fff; + z-index: 10; + border-radius: 50%; } -.hour { - width: 6px; - height: 80px; - left: 50%; - top: 50%; - transform: translateX(-50%); - background: #333; +.hour, +.min, +.sec { + position: absolute; +} + +.hour, +.hr { + width: 160px; + height: 160px; +} + +.min, +.mn { + height: 190px; +} + + +.hr, +.mn, +.sc { + display: flex; + justify-content: center; + border-radius: 50%; } -.minute { - width: 4px; - height: 110px; - left: 50%; - top: 50%; - transform: translateX(-50%); - background: #666; +.hr::before { + content: ""; + position: absolute; + width: 8px; + height: 80px; + background: #848484; + z-index: 1; + border-radius: 6px 6px 0 0; } -.second { - width: 2px; - height: 120px; - left: 50%; - top: 50%; - transform: translateX(-50%); - background: red; +.mn::before { + content: ""; + position: absolute; + width: 4px; + height: 90px; + background: #d6d6d6; + z-index: 2; + border-radius: 6px 6px 0 0; } -.center { - position: absolute; - width: 14px; - height: 14px; - background: #333; - border-radius: 50%; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); +.sc::before { + content: ""; + position: absolute; + width: 2px; + height: 150px; + background: #ff6767; + z-index: 3; + border-radius: 6px 6px 0 0; } From b713937f03fd7f0c5a863b95206239e4824ed770 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 22:31:52 +0530 Subject: [PATCH 06/10] Add png --- Source-Code/AnalogWatch/assets/clock.png | Bin 0 -> 6025 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 Source-Code/AnalogWatch/assets/clock.png diff --git a/Source-Code/AnalogWatch/assets/clock.png b/Source-Code/AnalogWatch/assets/clock.png new file mode 100644 index 0000000000000000000000000000000000000000..3a4b1f3c50795be6c6f17716b031842fbbeef0de GIT binary patch literal 6025 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 Date: Mon, 22 Jul 2024 22:32:34 +0530 Subject: [PATCH 07/10] Add setInterval and styles --- Source-Code/AnalogWatch/script.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/Source-Code/AnalogWatch/script.js b/Source-Code/AnalogWatch/script.js index e69de29..de963ae 100644 --- a/Source-Code/AnalogWatch/script.js +++ b/Source-Code/AnalogWatch/script.js @@ -0,0 +1,18 @@ +document.addEventListener('DOMContentLoaded', () => { + const hr = document.querySelector('#hr'); + const mn = document.querySelector('#mn'); + const sc = document.querySelector('#sc'); + + const deg = 6; + + setInterval(() => { + const day = new Date(); + const h = day.getHours() * 30; + const m = day.getMinutes() * deg; + const s = day.getSeconds() * deg; + + hr.style.transform = `rotate(${h + m / 12}deg)`; + mn.style.transform = `rotate(${m}deg)`; + sc.style.transform = `rotate(${s}deg)`; + }); +}); From 018469937569be2a8f11e2316a34f49ef44eb210 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 22:48:13 +0530 Subject: [PATCH 08/10] remove the unnesscary code --- Source-Code/AnalogWatch/index.html | 35 ++++++++++++++---------------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/Source-Code/AnalogWatch/index.html b/Source-Code/AnalogWatch/index.html index 456e4df..3ab34e9 100644 --- a/Source-Code/AnalogWatch/index.html +++ b/Source-Code/AnalogWatch/index.html @@ -1,26 +1,23 @@ - - - + + + Analog Watch - - - + + +
-
-
-
-
-
-
-
-
-
-
- -
+
+
+
+
+
+
+
+
+
- + From 1d84992e2451851129215df9b468830794039d33 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 22:48:29 +0530 Subject: [PATCH 09/10] Add the project and description --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index bf34538..04e2e49 100644 --- a/README.md +++ b/README.md @@ -254,6 +254,17 @@ In order to run this project you need: +
  • +
    +Analog Watch +

    Analog Watch is a visually appealing and functional timekeeping tool built using HTML, CSS, and JavaScript. This project features a classic analog clock design with distinct hour, minute, and second hands. The clock displays the current time with real-time updates, and its stylish design includes subtle shadowing and color adjustments to enhance its aesthetic appeal. The clock’s hands are dynamically styled with CSS for a modern and engaging look.

    + +
    +
    • +

    (back to top)

    From 98b72a054885aa968915e146b8f079bbd3c54be0 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 22 Jul 2024 22:53:32 +0530 Subject: [PATCH 10/10] Solve linter errors --- Source-Code/AnalogWatch/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/Source-Code/AnalogWatch/style.css b/Source-Code/AnalogWatch/style.css index 68f0a42..f219a4f 100644 --- a/Source-Code/AnalogWatch/style.css +++ b/Source-Code/AnalogWatch/style.css @@ -58,7 +58,6 @@ body { height: 190px; } - .hr, .mn, .sc {