SVG Analogue World Clock with HTML, CSS, and JavaScript

[@LePhenixGD]

Your explanation about the stroke-dasharray and stroke-dashoffset are amazing! Also wasn't aware about the property "pathlength" for circles to easily divide into chunks the stroke, previously I'd use random in the strokes, but now with your method it's much easier, you made me learn something valuable today!

[@CodinginPublic]

So glad you enjoyed it! Thanks for taking the time to say something!

[@hellothere8547]

It’s very informative seeing both the object oriented approach and functional while comparing them. Thanks for doing that step and for a great video.

[@CodinginPublic]

Hey! Awesome. Glad you enjoyed it. Yeah, I think comparing them is super helpful. And there’s definitely room to advance past what I did here. Both types have their place for sure.

[@nitinsoni9956]

Watched just two videos of you but learnt something new from both of the videos. I really like the OOPs and functional approach. Simple clean design with great explanation of the code. Looking forward to many such great tutorials from you.

[@CodinginPublic]

Thanks for the kind words. Glad you’ve been enjoying the channel projects!

[@adityakadam2256]

Fantastic video. Thanks a lot for sharing it. Very detailed and well explained.

[@CodinginPublic]

Sure thing. Glad you enjoyed it!

[@caroll9726]

Nice project man! I really enjoyed watching! :) :) :)

[@CodinginPublic]

Glad you enjoyed it!

[@federicoraulmaciasaparicio1339]

Great video!! Thanks for showing us how to work with the svg tag

[@CodinginPublic]

So glad you enjoyed it! It was a lot of fun to put together! Cheers!

[@JonKurz]

I'm still attempting to implement this solution, and coding step by step to get the full benefit of the exercise. I appreciate the detail and clarity of your presentation. I am still working through some Parcel issues with the date functions, but I hope I can resolve it. I do have a question unrelated to the actual solution though. In VSCode, how did you replace the % with the highlighted current dir? I searched the settings and online but couldn't find how to do this. Again, thank you for a great project demonstration!

[@idunius]

I learn so much from your Videos! Super cool to follow along! I just used the Part 1 and changed it up a bit to have also multiple Clocks on the same page. Now it seems like the Browser can’t handle this. [Violation] 'requestAnimationFrame' handler took 54ms. I don’t really see how to optimize the code to make it run smoothly. Do I was wondering if it is possible to use your second solution without a module bundler? Is it possible to include "date-fns-tz" just with a script tag?

[@CodinginPublic]

Thanks for the comment. Sorry for my delay. So glad you enjoyed the video! As to not using a bundler, you should be able to add type="module" to an on-page script tag and import date-fns-tz from an absolute URL (like something on their cdn) and then use it, I think? Let me know if that helps!

[@NEZIRI2718]

Great Video! Hey, I need some advise so I like the idea of Coding but the numbers confuse me how do you know that this length will look like that? i guess i need to relearn basic math before i can code. Also the positioning of code is what I don't understand like if you wanna move text down how do you really do that just the layout of code in HTML,CSS Confuses me I'm a beginner so I just need to speak to someone who knows code.

[@CodinginPublic]

Hey, thanks! Well, this is definitely a more intermediate tutorial, so no pressure if you're new to web dev and find this a little more difficult. I'd encourage you to start working through freecodecamp’s lessons on their site. That's a great place to start! For CSS, it’s hard to be @Kevin Powell (kzbin.info) and for HTML, I think David Gray is a great teacher (kzbin.info/www/bejne/hmGoeIyKl5aWeNU)!

[@projectdreams26]

I have a problem when importing at 44:29. The way you have said grab. How do you go about it?...cause mine is saying zondedtimeutc is declared but its value is not read.

[@CodinginPublic]

I think 46:22 answers your question unless I'm missing something. When you first import it, you’ll get an error because you haven't used it, but we use it around that timestamp. Does that help?

[@chiefsimz]

Is there an example of a digital version of this project?

[@CodinginPublic]

I haven't done one yet :)

[@gayatrigadekar2002]

Is it code run on notepad or which platform

[@CodinginPublic]

Not sure I understand? Do you mean which program am I using in the tutorial? I'm using VS Code if that's your question. Thanks!

[@gayatrigadekar2002]

Sir is there any research pages for this project as a engineering students project

[@madzeddies1066]

Hi I have been following your lesson, and just wanted to ask you question which may sound stupid (I am still very new at coding). I am at 10:06 / 48:40 and I can't get *, *::after, *::before { } . To work in editor, I checked in view problem section and this is all that will come up (down below). I tried to google up the element but was unsure what I was googling '::after and ::before' doesn't get you far. View Problem *, Selector Specificity: (0, 0, 0) Do not use empty rulesetscss(emptyRules) ::after Selector Specificity: (0, 0, 1) Do not use empty rulesetscss(emptyRules) ::before Selector Specificity: (0, 0, 1) Class ***::before** Do not use empty rulesetscss(emptyRules)

[@CodinginPublic]

Hey, Madz! Thanks for the comment. Sorry for my delay. Great question! The trouble is you didn't put any rules between the curly brackets. So just put something like … box-sizing: border-box; …in between the brackets and the error should go away. Hope that helps!