Creating a Basic Analog Clock with HTML, CSS, and JavaScript
Вставка
- Опубліковано 9 лют 2025
- Creating a Basic Analog Clock with HTML, CSS, and JavaScript
Want to impress your friends with your coding skills? Look no further than this interactive analog clock tutorial using HTML, CSS, and JavaScript! In this beginner-friendly video, you'll learn how to:
Craft the clock's structure with HTML: Lay the foundation with divs and spans, shaping the clock face, hands, and numbers.
Make it shine with CSS: Breathe life into your clock with styles, adding colors, shadows, and elegant font choices.
Bring it to life with JavaScript: Let the magic happen with JavaScript! We'll calculate hand rotations based on real-time, making your clock tick and tock with precision.
By the end of this video, you'll have:
A fully functional analog clock ticking away on your screen, a testament to your coding prowess.
A deeper understanding of combining HTML, CSS, and JavaScript, opening doors to future creative projects.
The satisfaction of building something beautiful and practical from scratch!
No prior experience needed! This tutorial is perfect for anyone who wants to:
Learn the basics of web development with fun, engaging projects.
Add a touch of interactivity and personality to their web pages.
Impress potential employers or clients with your coding skills.
Click play and:
Unleash your inner clockmaker! Build a stunning analog clock that's both beautiful and functional.
Master the basics of HTML, CSS, and JavaScript in a practical and enjoyable way.
Open the door to a world of creative possibilities with interactive web development.
Don't wait! Start building your clock today!
#javascript #clock #html #css #tutorial #beginnerfriendly #webdev #coding #interactive #analogclock
If you're interested in exploring an Angular version, the provided link will direct you there. However, I strongly recommend watching this video first, as it provides a comprehensive explanation of the CSS and JavaScript logic.
• Creating a Basic Analo...
Thanks
Creating a Basic Analog Clock with HTML, CSS, and JavaScript
Absolutely amazing video and concisely explained. Thank you for sharing your knowledge with us
Thank you so much.
Best Tutorial for Analog clock
Thank you.
You explained very simply. Thank you. Keep it up...
@@sahirulsekh1734 Thank you so much 🙏
aag laga di bhai, ek no
@@Bana-hukum-jaisalmer please translate bro. Sorry 😐
@@WebTechTalk "Amazing, brother! Top-notch!" when my friend does some amazing things in his life i used to tell him "aag laga di bhai, ek no"
@Bana-hukum-jaisalmer Thank you so much bro 😄
Thanks a lot I got benefit from your Channel keep going and we are waiting for more projects in JavaScript
Another one interesting javascript program coming up soon 😀
You did a great job. Could you give me a advice on how to fetch a PC-time from Windows and translate it to analog clock on the webpage so clock shows the time what its currently on your PC?
Hi this video is explaining how to show the PC time only (client time). To show server time we need a backend server.
Thanks for teaching us
Thank you
This is the best tutorial so far, it is so explanatory and the codes are very simple compared to some complex ones. you took time to explain the left and top values. I am subscribing right away
Thank you very much. Your valuable comment motivates me a lot.
Exactly bro there are many videos but they are complex for no reason.
This is one is by far the best i have got.
@@mdanas0007 Thank you :)
@@WebTechTalkI have an important question for me . Can I put the time from other countries in example Tokyo ar London
@@ossama_shaalan You can use the UI logic but in the place where you are getting the current time, you need to get the time from server or you need to add the relative GMT hours
Thanks Mam..
now it's working...
Nice
Thank you so much sir. I really understand and able to make it. 💞
Thank you :)
very good approach sir for analog clock
Thank you very much
I put that code on the point , that 240 px on top and left but the point goes left , out of the clock, doesn´t stay in the midle , it just go to the midle if I put a value of 960 px on the left.
Could you please compare your code with mine. Here is my code.
github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
II wrote the code for the base.
It’s not rotating, and I didn’t make any mistakes in the code.
I’ve reviewed it multiple times.
What should I do, teacher?
🙏
Please compare your code with mine. You can get my code from this repo.
github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
Thanks. Works well for me.
You're welcome!
faboulous!
Thank you :)
it was really beautiful bro ...loved it.
Thank you 😀
@@WebTechTalk bro if you want you can teach me js, i will pay you.
I will be starting the Javascript Series soon. Don't worry
Very Nice and Easy Tutorial
Thank you
Bro all good but not functioning JavaScript
You can compare your code with mine bro.
github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
Thank you so much, but you should have also showed how to get perfect number for hour placement (like example- hour 9 : top 235px, left 45px )? , Other than that awesome video 😊👍🏽👍🏽
Those numbers I got it from the inspect window only. I adjusted by placing them randomly and took the values.
And how to earn on it💕💕💕💓💓💓💓🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰😍😍🥰🥰🥰🥰🥰🥰🥰🥰🥰
Good one sir 👍🏻👍🏻
Thanks ✌️
I like this vid and I tried it
I just want to know how to move the HOUR HAND?
Every second I am getting the current time and calculating the position of each hands. For example: Hour hand logic is d.getHours() * 30 + Math.round(minute / 12)
Great ! Thank You!
Thank you 😊
It's really work
Nice 🙂
hi, friend! i have a problem. When my second line is going to 12 pm, it make return back but have to go ahead in circle. What can i do for resolve this problem.
Please compare your code with mine.
github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
@@WebTechTalk thanks, I've found mistake. My program is working
@@ЕвгенийГончаров-ъ2я Super
Thank you😇😇
👍
Please write the commands also which you used for preview and other things so that we can follow along
Sure. I will do this in future videos. I don't remember whether I have used any command in this video.
Could we add code to run the clock faster or slower - I wish to create an alternate reality that has time that runs a bit faster - a specific value 5 points past the decimal point
This clock is using the current system time and so we cannot make it run fast or slower. We may need to change the core logic.
also in rotate you have done transform rotate(second +deg ).I am little confused is deg a variable or constatnt in this
deg is the unit. We have to give that inside rotate. deg means degree. Eg: transform: rotate(60deg)
Nice explanation 👏👍
Thanks
Hi I'm facing issue with respect to my project work and the client is expecting for performance improvement, in angular 12 I am getting blocked for the project .
There are many ways by which you can improve the performance in angular applications. Follow the best practices and see whether you need to concentrate more on the web vitals part or API side. In UI side, you can think about implementing caching of static resources, text compression, etc
How did you run the calculations to know exactly where to place the numbers within the clock?
It is purely kind of trial and error. I inspect it and adjust the position and found the top, right and left values.
GREAT JOB BRO
Thank you 😀
thanks for this bro
Thank you
Mam kia ya clock user screen pr kis trha lga skty??? Have any idea plz give me
Sorry I didn't understand your question.
What software are you using for this?
For recording and editing?
how did you do the math to add up top left ?
I believe you are asking about the position values to place the hour numbers in the clock. That is totally trial and error. I have already tried and while recording I used those values. That is why I have mentioned that "I have also found the right values".
How to open the preview in vs code , and also m following your steps but it's not working properly,
There are many extensions available. Eg: Live Preview. I used that. You can compare your code with mine. Check this repo for my code: github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
@@WebTechTalk thank you very much it's really helpful
tysm!
Thank you 👍
Great work bro. But how you calculated the left and top values of hours?
Thanks bro. Those left, right and top values are approximate values. Got it by trial and error adjustment. For example, if you see the dial width is 500px, so, to place 12 in the center, we need to use 250px minus some width for the text size. So 235px is what it came right. But for 6, 240px is fine because it is a single digit. Like that I found for all hours.
@@WebTechTalk please can I have the code snippet?
@@WebTechTalk I want to add letters outside the clock that link to words from instance outside the 12 I put AB ,A stands for about us and B stands for book now...
@@deslyatekendaya8671 Sure. You can get it from this location.
github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
@@deslyatekendaya8671 Sorry. I didn't understand your requirement clearly. If you want to add more text outside the clock, you can add a wrapper and position that relatively.
Hi your videos are interesting, can you make a common repository where we can have references for the concepts dt u delivered
You can get it from this repo.
github.com/freelancer-surender/Misc
How to preview in Vs code?
You can use some extensions like LiveServer. There are many.
Expression expected, and ';' expected. is errors i get when i type this index file
Please compare your code with mine.
github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
Very interesting bro
Thank you bro
Is this Clock is responsive or not??
I think I have not applied code to make this responsive.
are you teaching or speedrunning it? why dont u make it a bit slow?
@@b1studio648 yes my initial days videos are fast. Sorry.
I can't get the hands to move. Everything is in there exactly like you have. Not sure why they aren't moving.
Please check for any JavaScript error in the browser console. Or, you can compare with my code. My code is available in the git.
@@WebTechTalk Correct. Is there anything else needed like a special JSON or anthing to be linked?
@@CoolHandLuke1117 No. Please check this repo for code. github.com/freelancer-surender/Misc
@@WebTechTalk You are not going to believe this..I forgot my in javascript 😝. Thank you so much for troubleshooting with me
@@CoolHandLuke1117 Sometimes this happens 😂
Plz how you wrote fast html code in the first
This is called Emmet. I think VSCode by default support this. There are also some extensions available. You can search for HTML Boilerplate, HTML Snippets
@@WebTechTalk i mean did you wrote a one letter in short way and press enter?
@@rabbad7228 Yes, in VS Code if you type html:5 and press enter it will create the boilerplate code
Also i am unable to open source code given in one of the comment by you
Please use this link
github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
Where is the code link?
You can get the code from this repo.
github.com/freelancer-surender/Misc
can anybody explain the logic elaborately of math.round(minutes/12)
That is to add precision. When the time is 3PM, the hour hand will be exactly in 3. But when the time is 3:40PM, the hour hand will be somewhere between 3 and 4. So, to add that precision I am just adding that. If you see, I have multiplied seconds and minutes by 6 and hours by 30. That is because, the entire dial is going to be 360 degree. There are 60 seconds and so 360/60 = 6. Same for minute hand. But for hour, we have to divide the dial into 12 parts, that means 360/12 = 30. Plus the precision which is (minutes * 30) / 360 = minutes / 12. And then finally I am rounding that to the nearest number. Hope it is clear.
💕💕💕🤣😍😍🥰🥰🥰🥰🥰🥰🥰🥰💓💕💕💕💕💕💕💕💕💕💕 thank you for sharing your experience
Thank you
what was the logic of hours *30 when hours are only 24? why not *24 or *12
The clock dial is totally 360 degrees. So, 360 divided by 12 hours gives us 30 degrees for each hour. That is why 30.
please provide source code
You can get it from here
github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
9ice 1
Thanks
#webtechtalk dear sir plz provide notes
May I know which notes you are expecting?
can uh plss provide the source code
Yes sure. github.com/freelancer-surender/analog-clock
really can't understand, dropping the video.
Sorry to hear that
Pdf
?