Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Javascript Clock | CSS Neumorphism Working Analog Clock UI Design



Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D

Another Course : Build Complete Real World Responsive Websites from Scratch
https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E
——————
Join Our Channel Membership And Get Source Code Everyday
Join : https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/join
——————
In this video i’ll teach you how to create a working analog clock using html css & javascript with css neumorphism effect ui design.
——————

Source Code : https://www.patreon.com/posts/css-neumorphism-36809024

——————
Also Watch This : Working Analog Clock Using Html5 CSS3 & Javascript
https://youtu.be/94TKO4eKfIA

Toggle Between Dark and Light Mode using CSS & Javascript | CSS Neumorphism Working Analog Clock
https://youtu.be/-PRyFcAceYA
——————
Also wwtch thie : Toggle Between Dark and Light Mode using CSS & Javascript | CSS Neumorphism Working Analog Clock
https://youtu.be/-PRyFcAceYA

Clock.png Image Download Url : https://drive.google.com/file/d/1DBybco2DjKd4elgxZcJ8-zMRUF0ndIHW/view?usp=sharing
——————

Please LIKE our Facebook page for daily updates…
https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/

Support site by sharing this post

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Share on reddit
Reddit
Share on tumblr
Tumblr
Share on stumbleupon
StumbleUpon
38 comments
  1. Hey all…
    Use this ` sign instead of this '

    This is wrong
    hr.style.transform = 'rotateZ(${hh+(mm/12)}deg)';

    This is right
    hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;

  2. If you watch it now and it doesn't work, try this:
    hr.style.transform = 'rotateZ(' + (hh + (mm / 12)) + 'deg)';
    mn.style.transform = 'rotateZ(' + mm + 'deg)';
    sc.style.transform = 'rotateZ(' + ss + 'deg)';

  3. uhm hey I have trouble compiling it. So i used vscode and wrote each word correctly and saved all, but it isn't showing, idk why. Can anyone help me with this?

  4. nice video keep this awesome work up , i followed your steps precisely however , The Js code is not working , all the other stuffs are fine only the code written inside the script code isn't working . is it cuz i'm using opera browser ? i hope anyone give me a hint to that issue
    thank you

  5. First of all, I did the same coding by watching the hello video. But in the CSS section, the
    (margin: 0,0;

    padding: 0;

    box-sizing: border-box;) is giving an error and I couldn't find a solution. Can you help me?

Leave a Reply

Your email address will not be published. Required fields are marked *