Building a Speedometer with HTML, CSS, and JavaScript: Step-by-Step Tutorial

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

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

  • @garryforder8362
    @garryforder8362 7 วันที่ผ่านมา +1

    This is brilliant, I am just starting to play around with html, and for me this is a perfect tutorial providing me with many examples and explanations that I can use in another project. Many thanks 👍👍👍

    • @WebTechTalk
      @WebTechTalk  7 วันที่ผ่านมา

      Thank you so much for your lovely feedback 🙏

  • @AbhishekKumar-ep5uo
    @AbhishekKumar-ep5uo 10 หลายเดือนก่อน +1

    Amazing explanation bhaiya ❤️

    • @WebTechTalk
      @WebTechTalk  10 หลายเดือนก่อน

      Thank you so much 🙏

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

      Thank you

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

    Perfect

  • @az-theme
    @az-theme ปีที่แล้ว +1

    Thank you so much ! Great tutorial 🎉🎉🎉

  • @techvihaar
    @techvihaar ปีที่แล้ว +4

    sir will it tell the speed

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

      Yes, it is a simulation, if you bind the data from backend to this, you can see the speed in KM.

  • @bennguyen1313
    @bennguyen1313 2 หลายเดือนก่อน

    Any thoughts on using server-side vs browser-side vs hybrid approach?
    For example, I'd like to serve from an esp32 microcontroller (where resources are limited), such that server just sends the value via a websocket, and the client-side handles the gauge update.
    What server side resources are needed? I've seen many packages like Cairo, PHP GD, Three.js, JustGage, Gauge.js, Html5, SVG/D3.js but not sure if they work on embedded devices!

    • @WebTechTalk
      @WebTechTalk  2 หลายเดือนก่อน

      Sorry bro, I don't have knowledge on micro controllers.

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

    where can I take this code? Should I write everything by hand?

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

      github.com/freelancer-surender/Misc/tree/main/Speedometer
      You can take it from this repo.

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

    will it run by backend data source

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

      Right now it is driven by the button click, but we can make it work from the data from backend

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

      How sir ...Pls can you explain

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

      @@mohitdhoundiyal30 As a dirty fix you can call an API every few second to get the updated data and bind it to the arrow position. But by using some kind of socket io mechanism or by emitting data constantly and subscribing that you can do it. Some advanced concepts.

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

    sir how to install it on server is there any tutorial video

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

      I don't have a tutorial video now. But you can just follow any deployment strategy. These are just html, js and CSS files. So if you just copy these inside your server, it will work.

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

      @@WebTechTalk ok sir thanks

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

    14:12

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

      Is this for your reference?

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

    Hi , This a wonderful tutorial , but my speedometer only stops at 10 the " arrow-wrapper speed-0 " only stops at 10 even when the newClass variable changes by 10 each time . |Do you have any solutions for this ?

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

      Hi. I have added the working code in the below Github repo. Could you please compare the code?
      github.com/freelancer-surender/Misc/tree/main/Speedometer

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

    insane

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

    *_chee looter ..._*