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
@@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
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 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
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, 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.
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
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".
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
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 😊👍🏽👍🏽
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)
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
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 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 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.
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.
Best Tutorial for Analog clock
Thank you.
Absolutely amazing video and concisely explained. Thank you for sharing your knowledge with us
Thank you so much.
You explained very simply. Thank you. Keep it up...
@@sahirulsekh1734 Thank you so much 🙏
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
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
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.
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)
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.
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.
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
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 😀
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
Bro all good but not functioning JavaScript
You can compare your code with mine bro.
github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
Thanks Mam..
now it's working...
Nice
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
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
Good one sir 👍🏻👍🏻
Thanks ✌️
Mam kia ya clock user screen pr kis trha lga skty??? Have any idea plz give me
Sorry I didn't understand your question.
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
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".
Thanks for teaching us
Thank you
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
What software are you using for this?
For recording and editing?
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💕💕💕💓💓💓💓🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰😍😍🥰🥰🥰🥰🥰🥰🥰🥰🥰
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.
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 😂
How to preview in Vs code?
You can use some extensions like LiveServer. There are many.
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)
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
Thanks. Works well for me.
You're welcome!
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
Thank you😇😇
👍
faboulous!
Thank you :)
Very Nice and Easy Tutorial
Thank you
Where is the code link?
You can get the code from this repo.
github.com/freelancer-surender/Misc
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.
Nice explanation 👏👍
Thanks
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.
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.
GREAT JOB BRO
Thank you 😀
Is this Clock is responsive or not??
I think I have not applied code to make this responsive.
Great ! Thank You!
Thank you 😊
It's really work
Nice 🙂
are you teaching or speedrunning it? why dont u make it a bit slow?
@@b1studio648 yes my initial days videos are fast. Sorry.
thanks for this bro
Thank you
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
Very interesting bro
Thank you bro
💕💕💕🤣😍😍🥰🥰🥰🥰🥰🥰🥰🥰💓💕💕💕💕💕💕💕💕💕💕 thank you for sharing your experience
Thank you
tysm!
Thank you 👍
please provide source code
You can get it from here
github.com/freelancer-surender/Misc/tree/main/Analog%20Clock
9ice 1
Thanks
can uh plss provide the source code
Yes sure. github.com/freelancer-surender/analog-clock
#webtechtalk dear sir plz provide notes
May I know which notes you are expecting?
really can't understand, dropping the video.
Sorry to hear that
Pdf
?