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)

    diff --git a/Source-Code/AnalogWatch/assets/clock.png b/Source-Code/AnalogWatch/assets/clock.png new file mode 100644 index 0000000..3a4b1f3 Binary files /dev/null and b/Source-Code/AnalogWatch/assets/clock.png differ diff --git a/Source-Code/AnalogWatch/index.html b/Source-Code/AnalogWatch/index.html new file mode 100644 index 0000000..3ab34e9 --- /dev/null +++ b/Source-Code/AnalogWatch/index.html @@ -0,0 +1,23 @@ + + + + + + Analog Watch + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + diff --git a/Source-Code/AnalogWatch/script.js b/Source-Code/AnalogWatch/script.js new file mode 100644 index 0000000..de963ae --- /dev/null +++ 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)`; + }); +}); diff --git a/Source-Code/AnalogWatch/style.css b/Source-Code/AnalogWatch/style.css new file mode 100644 index 0000000..f219a4f --- /dev/null +++ b/Source-Code/AnalogWatch/style.css @@ -0,0 +1,97 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #2a083d; + z-index: -1; +} + +.clock { + 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); +} + +.clock::before { + content: ""; + position: absolute; + width: 15px; + height: 15px; + background: #848484; + border: 2px solid #fff; + z-index: 10; + border-radius: 50%; +} + +.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%; +} + +.hr::before { + content: ""; + position: absolute; + width: 8px; + height: 80px; + background: #848484; + z-index: 1; + border-radius: 6px 6px 0 0; +} + +.mn::before { + content: ""; + position: absolute; + width: 4px; + height: 90px; + background: #d6d6d6; + z-index: 2; + border-radius: 6px 6px 0 0; +} + +.sc::before { + content: ""; + position: absolute; + width: 2px; + height: 150px; + background: #ff6767; + z-index: 3; + border-radius: 6px 6px 0 0; +}