SVG Analogue World Clock with HTML, CSS, and JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ต.ค. 2024

ความคิดเห็น • 30

  • @LePhenixGD
    @LePhenixGD 4 หลายเดือนก่อน

    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
      @CodinginPublic  4 หลายเดือนก่อน

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

  • @nitinsoni9956
    @nitinsoni9956 2 ปีที่แล้ว +3

    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
      @CodinginPublic  2 ปีที่แล้ว

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

  • @hellothere8547
    @hellothere8547 2 ปีที่แล้ว +1

    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
      @CodinginPublic  2 ปีที่แล้ว

      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.

  • @federicoraulmaciasaparicio1339
    @federicoraulmaciasaparicio1339 2 ปีที่แล้ว +1

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

    • @CodinginPublic
      @CodinginPublic  2 ปีที่แล้ว +1

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

  • @caroll9726
    @caroll9726 ปีที่แล้ว

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

  • @JonKurz
    @JonKurz 9 หลายเดือนก่อน

    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!

  • @adityakadam2256
    @adityakadam2256 2 ปีที่แล้ว

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

    • @CodinginPublic
      @CodinginPublic  2 ปีที่แล้ว

      Sure thing. Glad you enjoyed it!

  • @idunius
    @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
      @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!

  • @Edin_2718
    @Edin_2718 2 ปีที่แล้ว

    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
      @CodinginPublic  2 ปีที่แล้ว +1

      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 (th-cam.com/users/kevinpowell) and for HTML, I think David Gray is a great teacher (th-cam.com/video/P0EGYTb1cBs/w-d-xo.html)!

  • @projectdreams26
    @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
      @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
    @chiefsimz ปีที่แล้ว

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

  • @gayatrigadekar2002
    @gayatrigadekar2002 2 ปีที่แล้ว

    Is it code run on notepad or which platform

    • @CodinginPublic
      @CodinginPublic  2 ปีที่แล้ว +1

      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
      @gayatrigadekar2002 2 ปีที่แล้ว

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