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

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

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

  • @bennguyen1313
    @bennguyen1313 16 วันที่ผ่านมา

    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  16 วันที่ผ่านมา

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

  • @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.

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

    Amazing explanation bhaiya ❤️

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

      Thank you so much 🙏

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

      Thank you

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

    Thank you so much ! Great tutorial 🎉🎉🎉

  • @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.

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

    Perfect

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

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

      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

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

    14:12

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

      Is this for your reference?

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

    *_chee looter ..._*