Create Analog Clock in HTML CSS & JavaScript

This instructional video will teach you how to build an analog clock using HTML, CSS, and JavaScript. It includes both dark and light mode options, and I have utilized local storage to maintain the chosen mode even when the page is refreshed or the file is reopened.
---
📁 Download Source Code From Here
➤ www.codinglabweb.com
Follow me on Instagram
➤ / coding.np
---
⌚ Timestamps:
00:00 Analog Clock Demo
00:46 File Structure
01:06 HTML code for analog clock
02:05 CSS code for analog clock
06:14 Creating hand of analog clock
10:00 Creating clock's dark light mode switch
15:45 Using Locastorage to keep selected theme
19:02 Final result of Analog Clock
#analogclock #digitalclock #htmlcssjavascript
---
Music Credit:
Deep Sea by Vendredi / vendrediduo
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/-deep-sea
Music promoted by Audio Library • Deep Sea - Vendredi (N...
Something 'bout July (Instrumental) by RYYZN
• Something 'bout July (...
Ikson - We Are Free (Vlog No Copyright Music)
• Ikson - We Are Free (V...
Ikson - Anywhere [Official]
• #66 Anywhere (Official)

Пікірлер: 29

  • @tika6050
    @tika6050 Жыл бұрын

    Gila, gw awal suka ngoding karna channel ini muncul di beranda yt gw.

  • @abdulaziz-wq9lx
    @abdulaziz-wq9lx Жыл бұрын

    Wow!!! Amazing..

  • @Anonymous-sv3ff
    @Anonymous-sv3ff Жыл бұрын

    How do you do it? I actually discovered coding because of this channel and love your content. Keep going

  • @CodingLabYT

    @CodingLabYT

    Жыл бұрын

    Glad you enjoy it!

  • @mathe.creative
    @mathe.creative Жыл бұрын

    As always, great code and quality content 🚀 Amazing video, inspired me to make new tutorials, bro :)

  • @CodingLabYT

    @CodingLabYT

    Жыл бұрын

    Happy to hear that!

  • @charliewazzap3696
    @charliewazzap3696 Жыл бұрын

    all the videos on this channel have helped me a lot, I will start with JS guides. Thanks for everything! By the way, any advice for making a responsive table with the sticky headboard???

  • @CodingLabYT

    @CodingLabYT

    Жыл бұрын

    Glad you like them!

  • @ZUBAIRKHAN-ky3pv
    @ZUBAIRKHAN-ky3pv2 ай бұрын

    Superb❤

  • @aleemsiddiqui3247
    @aleemsiddiqui3247 Жыл бұрын

    It works very well and is 100% working

  • @CodingLabYT

    @CodingLabYT

    Жыл бұрын

    Glad it could helped.

  • @shaileshjaiswar
    @shaileshjaiswar Жыл бұрын

    Excellent! I'm a big fan of your skills sir. Can you make a tutorial on how to make a ' Click and Drag to resize div' kind of thing

  • @CodingLabYT

    @CodingLabYT

    Жыл бұрын

    Great suggestion!

  • @unicoxr5tj417
    @unicoxr5tj417 Жыл бұрын

    nice

  • @CodingLabYT

    @CodingLabYT

    Жыл бұрын

    Thanks a billion.

  • @shanmugarajkarthik9504
    @shanmugarajkarthik9504 Жыл бұрын

    ✌✌✌✌✌✌

  • @user-xf9bc7yq5j
    @user-xf9bc7yq5j11 ай бұрын

    I want to learn JavaScript's main fundamentals which help Mee in web project s suggest me sorcea

  • @jinkaicai3330
    @jinkaicai3330 Жыл бұрын

    good

  • @CodingLabYT

    @CodingLabYT

    Жыл бұрын

    Thanks a billion.

  • @shaertiat4294
    @shaertiat429411 ай бұрын

    secondHand.style.transform = `rotate(${secToDeg}deg)` Uncaught TypeError: Cannot read properties of null (reading 'style') what i did wrong???

  • @chinmobile
    @chinmobile Жыл бұрын

    hourHand is not working. Minutes and seconds are working correctly. Anyway thank you very much and appreciate your work..

  • @AOPSoftware
    @AOPSoftware Жыл бұрын

    like. .mode-swith add ( cursor: pointer;)

  • @tremolony4924
    @tremolony4924 Жыл бұрын

    first

  • @CodingLabYT

    @CodingLabYT

    Жыл бұрын

    Thanks a trillion.

  • @studywithpankaj97
    @studywithpankaj97 Жыл бұрын

    Bhai source code

  • @CodingLabYT

    @CodingLabYT

    Жыл бұрын

    Link is the description.

  • @bestbackgroundmusic5610
    @bestbackgroundmusic5610 Жыл бұрын

    Wow!!! Amazing..

  • @CodingLabYT

    @CodingLabYT

    Жыл бұрын

    Thanks a lot 😊