Digital Clock Design | With 12-hour/24-hour Format Switcher - Html, Css & Javascript
HTML-код
- Опубликовано: 20 май 2024
- Digital Clock Design | With 12-hour/24-hour Format Switcher - Html, Css & Javascript
In this video, you will learn how to design a digital clock that displays the current time and date with a 12-hour/24-hour format switcher using HTML, CSS and Javascript.
✔️ Clear Coding
✔️ Easy to Follow
📚 Chapters
-------------------------
0:00 - Project Demo
1:57 - Files setup
2:03 - Link Unicons
2:28 - Digital clock design (Html)
3:46 - Google fonts
4:28 - Digital clock design (Html, Css)
13:55 - Digital clock - Get the current time (Javascript)
17:01 - Digital clock - Set the time period AM/PM (Javascript)
17:37 - Digital clock - Set the 12-hour clock format (Javascript)
18:12 - Digital clock - Add the "0" for the time values lower than 10 (Javascript)
19:43 - Digital clock - Get the current date (Javascript)
22:48 - Dot menu - (Html, Css)
28:43 - Digital clock - 12-hour/24-hour clock format switcher (Javascript)
34:37 - Dot menu toggle - (Html, Css, Javascript)
39:54 - Digital clock glowing animation - (Css)
+ Like and Subscribe 🔔 for More! ❤
∎ Get This Project Source Codes - www.buymeacoffee.com/codingsn...
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsn...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsn...
∎ Download File Setup - www.codingsnow.com
∎ Download All Source Files On Patreon - / 63611379
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
🔗External Sources
------------------------------------
∎ Unicons Library - iconscout.com/unicons
#CodingSnow #WebDesign #DigitalClock
____________________
Copyright Disclaimer under section 107 of the Copyright Act of 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing.
Today, I was struggling with my focus quite a bit. While searching for a solution, I stumbled across this video.
Can I just say, thank you!!!
I was able to focus and work through with the video and create an output.
Got my mojo back! Thank you!!
More power to you!
You're most welcome! ❤️
Very nice clock project ❤❤👍👍
thanks for this video, the clock is soooo beautiful.
I have learned a lot, thanks!
Thank you so much for this tutorial earned a sub!
I loved your video, fantastic guy ❤️
Fantastic work my friend! 👌
Thank you ❤
ruclips.net/video/o2kYyvxtAAQ/видео.html
ruclips.net/video/ivcwK6j1xZs/видео.html
Very good clock it was and its working very good.
super and fantastic
nice work
I don't know why my code is not working when i started Javascript section.
Please anyone tell me where exactly i am doing wrong??
Love your work bro...
You are Magical artists...
ruclips.net/video/o2kYyvxtAAQ/видео.html
ruclips.net/video/ivcwK6j1xZs/видео.html
great
I just wanted to ask if you can make a part 2 of this video were you add another menu item where you can set a timer
Bro you did a mistake, when the clock is in 24 hours time there should not be am/pm. But u did a good work 👌
ruclips.net/video/o2kYyvxtAAQ/видео.html
ruclips.net/video/ivcwK6j1xZs/видео.html
Amazing work Bro
Thanks bro ❤
Awesome
Thank you ❤
awesome!!! your work
ruclips.net/video/o2kYyvxtAAQ/видео.html
ruclips.net/video/ivcwK6j1xZs/видео.html
Superb
ruclips.net/video/o2kYyvxtAAQ/видео.html
ruclips.net/video/ivcwK6j1xZs/видео.html
thst's good
Why doesn't the menu button next to 24-hour format go from red to green?
Sir please create a product slider
Why can't I press the menu button next to 24-hour format?
name of music?
made this the same date (March sixth) just in 2024
Can you make a digital clock that can show
The time in your time zone,zulu time converted a standard witch is 5hr's ahead
Of regular time. You want detail text me
Yes pls make a video on this
ruclips.net/video/o2kYyvxtAAQ/видео.html
ruclips.net/video/ivcwK6j1xZs/видео.html
I have written the glowing animation code but the colors and the animation won't show up
ruclips.net/video/o2kYyvxtAAQ/видео.html
ruclips.net/video/ivcwK6j1xZs/видео.html
I made the same one, is there any problem if I post leaving credits to your video, I will post it on my giyhub account
Link to source code?
@@devstuff92 Of course I send
@@Ryuk_oOmen Post the link to your github in the comment bro
@@devstuff92 ruclips.net/video/T6boDt596Pc/видео.html
ruclips.net/video/o2kYyvxtAAQ/видео.html
ruclips.net/video/ivcwK6j1xZs/видео.html
Get the current time Javascript didn't work for me, am I forgetting to reference something?
Same here 🥲
Did you figure it out? I'm having the same problem but the "hours" are working properly.
ruclips.net/video/o2kYyvxtAAQ/видео.html
ruclips.net/video/ivcwK6j1xZs/видео.html
DOESN'T WORK!