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

Glassmorphism Digital Clock UI Design | Html CSS & Vanilla Javascript



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 of My New Video’s Everyday!
Join : https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/join
——————

Source Code : https://www.patreon.com/onlinetutorials
Facebook Page : https://www.facebook.com/onlinetutorialsYT
Instagram : https://www.instagram.com/onlinetutorials_youtube
Twitter : https://twitter.com/OnlineTutoria16
Website : http://www.onlinetutorialsweb.com

Buy Me A Coffee : https://www.buymeacoffee.com/onlineTutorials

——————
give proper credit if you repost this on other social media platform
——————

Inspired By These

FullScreen Responsive Digital Clock Design Using Html CSS & Vanilla Javascript
https://youtu.be/JgNnuiR8WvE

Make an Analog & Digital Minimalist Clock Using Vanilla Javascript
https://youtu.be/s9mGaRSRGZw

Pure CSS Circular Progress Bar | CSS Glassmorphism Effects
https://youtu.be/8bC0S88n_NY

Real Glassmorphism Card Hover Effects | Html CSS Glass morphism Effects
https://youtu.be/hv0rNxr1XXk

——————
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

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
36 comments
  1. why i am getting error as 00:00:00 am after run
    code:
    function Clock()

    {

    let hour = document.getElementById('hour');

    let minute = document.getElementById('minute');

    let seconds = document.getElementById('seconds');

    let ampm = document.getElementById('ampm');

    let h = new Date().gethours();

    let m = new Date().getminute();

    let s = new Date().getseconds();

    var am = "AM";

    hour.innerHTML = h;

    minute.innerHTML = m;

    seconds.innerHTML = s;

    }

    var interval = setInterval(Clock, 1000);

  2. Hi, why I can't see the real time, it stays on 00:00:00 AM, I see errors inside the function clock:
    Let hour = …
    Let minute = …

    Let seconds = …
    Let ampm = …
    Let h = …
    Let m = …
    Let s = …
    Here I see errors why?

  3. Hi! It's a great tutorial! But I've noticed one mistake. When you are converting 24 hour time to 12 hour format time, you need to use h >= 12 condition, because 12 hours in 24 hour time is already 12pm. But the meridian indicator will show 'AM' instead of 'PM'.

Leave a Reply

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