Analog Clock HTML CSS Javascript Dark Mode

  Рет қаралды 31,290

Code Braces

Code Braces

Күн бұрын

"Learn to make your own Analog Clock using Javascript with just few codes."
/ @codebraces
In this video, we will create and design a dark with glowing effects analog clock using basic code of html, css and javascript. First, we will create from the basic by creating our analog clock using html code by adding numbers and hands of the clock with simple css design. Then, we will add a functionality to make the clock work by adding javascript code. Finally, we will finalize the design of our analog clock by making it dark and put some glowing effects.
🎞Video Timestamps:
0:00 Intro.
0:15 Creating clock numbers.
2:47 Creating clock hands.
4:35 Adding javascript code to make the clock hands work.
6:45 Finalizing the design.
✨ HTML CSS and Javascript Projects
[Drag and Drop File Input]: [ • Drag and Drop File Inp... ]
[Calculator]: [ • Calculator App in HTML... ]
[Fist in Aquarium]: [ • Fish in Aquarium using... ]
[Full Playlist]: [ • HTML, CSS and Javascri... ]
⚠️ Important Notice:
This video is a silent journey through the code, perfect for those who prefer to learn without commentary, focusing solely on the development process.
👩‍💻 Why This Format?
I understand that everyone has their unique learning style. Some find music and words distracting, while others thrive on detailed explanations. This video caters to visual learners and those who appreciate the tranquility of coding in silence, making it a perfect fit for focused learning sessions or background inspiration.
💡 Did You Enjoy This Video?
Hit that Like button and Subscribe to my channel ‪@codebraces‬ more coding adventures! Don’t forget to ring the bell 🔔 so you won’t miss any of my future videos.
💬 Got Questions or Feedback?
Your thoughts mean the world to me! Drop a comment below with your questions, feedback, or even suggestions for future videos. I'm all ears and here to support your coding journey.
💡 Code Smart NOT Hard 💡
🚀 Until Next Time, Keep Coding and Be Awesome! 🚀
#analogclock
#htmlcssjavascriptproject
#diyclock
#htmltutorial
#csstutorial
#javascripttutorial

Пікірлер: 33
@francesco.paletta
@francesco.paletta 10 ай бұрын
Thanks for you work! I love this Clock!
@irfanhsajid1
@irfanhsajid1 10 ай бұрын
impressive work! Thanks for this.
@vikramchauchan4359
@vikramchauchan4359 10 ай бұрын
Very nice work, keep doing. dont stop yourself.
@pedrodavi_05
@pedrodavi_05 5 ай бұрын
thank you so much! i from Brazil and like your video, please continue with content!
@passionforcoding
@passionforcoding 10 ай бұрын
❤❤❤Awesome 😊😊😊
@ibnhabous4939
@ibnhabous4939 10 ай бұрын
good work
@omarzaky646
@omarzaky646 10 ай бұрын
How a greatness ❤❤
@user-fw5nd4dk6k
@user-fw5nd4dk6k 11 ай бұрын
good work bro make more videos
@nogxz_l1554
@nogxz_l1554 10 ай бұрын
Good job
@tat-lyubch
@tat-lyubch 9 ай бұрын
Very good! My clock looks like moon elipse...
@arpitpandey2842
@arpitpandey2842 10 ай бұрын
Nice work bro
@Factfinitys
@Factfinitys 11 ай бұрын
good
@vfxentity
@vfxentity 9 ай бұрын
this guy is making me question my css skills
@pramanandasarkar-sb4ut
@pramanandasarkar-sb4ut Ай бұрын
nice clock by html css and js
@Nemesis-db8fl
@Nemesis-db8fl 9 ай бұрын
Man i thought i knew css but after watching this video I'm not sure if i even know 10% of css
@TabahiOnTheBeat
@TabahiOnTheBeat 9 ай бұрын
Not that hard sometimes he used clac function but it's easy topic.....😇
@S-Lomar
@S-Lomar 9 ай бұрын
🤣🤣😂😂😂🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂watch and do practice
@nkedemgildas3281
@nkedemgildas3281 4 ай бұрын
Same dear I just noticed I know nothing in CSS😂
@veshaw.
@veshaw. Ай бұрын
I don't even wanna live anymore 😭😭😭
@cliffvincenttorrevillas9650
@cliffvincenttorrevillas9650 9 ай бұрын
Drop the source code♥️♥️🤧very beautiful
@chhayadubey3096
@chhayadubey3096 9 ай бұрын
Bhai mere jo style ne jo( -- i=1) ye kya h...? Css variable bhi na h na hi ye koi style h... Hai kya?
@inspiropeak511
@inspiropeak511 10 ай бұрын
Hy bro I want this background music 🎵 May you give me please 🥺
@codebraces
@codebraces 10 ай бұрын
Its on the description. I downloaded it audio library
@callmebk730
@callmebk730 3 күн бұрын
Sir work nahi kar raha hai
@waleedhassanpanjtani
@waleedhassanpanjtani 7 ай бұрын
My clock did'nt work. Kindly tell me.
@opivcm4566
@opivcm4566 8 ай бұрын
bro source code please
@Cobalt_Chevrolet
@Cobalt_Chevrolet 9 ай бұрын
Where is the code?
@betimmustafi2097
@betimmustafi2097 9 ай бұрын
can you send the source code
@digsffx07
@digsffx07 2 ай бұрын
Code bro
@amirhosseinjafary2648
@amirhosseinjafary2648 3 ай бұрын
The source
@WebDevXpert
@WebDevXpert Ай бұрын
Creating a Basic Analog Clock with HTML, CSS, and JavaScript || JavaScript Clock || By WebDev Xpert : kzfaq.info/get/bejne/mpuHp62Wra2snWQ.html
@abdullahabada2222
@abdullahabada2222 10 ай бұрын
What n: 1means
@1newbbie
@1newbbie 10 ай бұрын
css variable
Calculator App in HTML CSS and JavaScript
33:43
Code Braces
Рет қаралды 4,2 М.
Balloon Stepping Challenge: Barry Policeman Vs  Herobrine and His Friends
00:28
How to Create Analog Clock using HTML CSS and JavaScript
28:17
Code Traversal
Рет қаралды 681 М.
Build A Clock With JavaScript
17:43
Web Dev Simplified
Рет қаралды 358 М.
Create Analog Clock in HTML CSS & JavaScript
19:14
CodingLab
Рет қаралды 21 М.
Digital Clock Using HTML, CSS, & JavaScript
6:39
Learning Axis
Рет қаралды 17 М.
Amazing Working Analog and Digital Clock Design using Html CSS & Javascript
22:35
Useful & Responsive Layouts, no Media Queries required
11:03
Kevin Powell
Рет қаралды 169 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 907 М.
ASMR Programming - Animated Login Page - No Talking
18:18
AsmrProg
Рет қаралды 1,3 МЛН
A AMIZADE DAS GÊMEAS É MUITO ENGRAÇADO
0:10
Teen House
Рет қаралды 22 МЛН
MEU IRMÃO FICOU FAMOSO
0:52
Matheus Kriwat
Рет қаралды 13 МЛН
ЧАПИТОСИИИИК🐾🐾🐾
0:14
Chapitosiki
Рет қаралды 58 МЛН
Fall !! sharing ch0copie with ants #short #antseating
0:15
The Shaka Hunt
Рет қаралды 11 МЛН
Sibling love 😥🥰👻
0:38
Ben Meryem
Рет қаралды 17 МЛН