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

Aug 15, 2023

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

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

Creating a Speedometer: A Step-by-Step Guide with HTML, CSS, and JavaScript

#html #html5 #javascript #javascriptengineer #js #webdeveloper #webdevelopment #css #css3

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

Content

0.51 -> Hi Friends

5.729 -> Today I am going to show you a step by step process to create this speedometer using just

18.789 -> html, css and javacript.

21.11 -> Let's start.

22.27 -> First let me create an index.html file here.

23.97 -> And, inside that let me create a template.

27.73 -> I am changing the title.

29.47 -> And, let me also create a style.css and link that to here.

34.05 -> Inside the style.css, let me first reset the margin, padding and use box sizing border

47.659 -> box.

48.659 -> Ok.

49.659 -> First let me start with a container div.

50.659 -> For the speedometer container, let me give 300px width, 300px height, and border 3px

60.62 -> solid black.

62.309 -> Ok.

63.309 -> Let me give border radius 50% and so it will be a circle.

68.97 -> And margin 50px auto.

69.97 -> So that it comes in the center.

74.74 -> Finally, position relative because we are going to position the other elements relative

82.95 -> to this container.

84.59 -> Ok.

85.64 -> Inside speedometer-container, let me create a div with class center point.

90.71 -> For this center point, let me give width 20px, height 20px and background color black.

100.23 -> And, let me give border-radius 50% to make it a circle.

105.41 -> Now, I need to position this exactly center to this circle.

107.5 -> So, let me use position absolute and we know the container width is 300px and we are using

118.11 -> a border of 3px and so it is going to take 3px in the left and 3px in the right from

125.761 -> the total width.

126.761 -> So, remaining width is going to be 294px.

128.08 -> Our center point width is going to be 20px and so if I reduce that from the total width

133.519 -> it is going to 274px.

135.599 -> Half of that is 137px.

136.939 -> So if I give top 137px and left 137px it will be positioned in the exact center.

143.51 -> Ok.

144.51 -> Let's create the scales.

150.59 -> For that, let me create a div first with class speedometer-scale.

156.38 -> For this class, let me give width 8px, height 280px and background color black.

157.38 -> I need to position this also relative to the container.

167.68 -> So let me use position absolute.

170.67 -> The width of this scale is 8px and we know already we are using 6px as border for the

173.52 -> container.

174.52 -> So, we lost 14px.

176.469 -> And the remaining width is going to be 286px.

180.379 -> Half of that is going to be 143px.

183.319 -> So, I can use left 143px to position this in center.

189.54 -> And as we have used the height as 280px, plus border is going to 286px and so the remaining

195.909 -> height is 14px.

197.239 -> Half of that is 7px.

198.64 -> So, if I use top 7px, this will be positioned vertically center.

200.359 -> Now I can use the transform property to rotate it to -90 degree.

206.93 -> Actually my idea is, to create scales from 0KM to 180KM.

212.26 -> So totally I need 19 scales.

214.879 -> I can separate each by 10 degrees.

216.45 -> So let me create 19 divs with unique classes.

218.279 -> And for the first div, let me use rotate -90 degree, for the second div, -80 degree, like

235.889 -> that let me quickly rotate all the 19 divs.

248.159 -> And so, we can see this.

249.159 -> Now, let me create a div with class speedometer center hide, which I can use to hide the center

255.2 -> part.

256.2 -> For this class, let me use width 250px, height 250px.

259.29 -> Let me give a background color so that we can see this div.

264.53 -> Ok.

266.22 -> Let me use border radius 50% and so it will become a circle.

270.64 -> Now, let me position this using position absolute.

275.65 -> And same calculation.

277.39 -> 300 - 6 which is equal to 294, minus 250 which gives 44.

283.05 -> Half of that is 22.

284.27 -> So, top 22px and left 22 px.

286.45 -> Now it comes to the center.

288.74 -> Let me use the z-index to bring this to the front and change the background color to white.

296.57 -> Our center point is behind this white circle.

300.34 -> Let us use z-index to bring that also to the front.

306.89 -> Ok.

307.89 -> Now, let me add another div with class speedometer bottom hide and to this class, let me use

314.87 -> width 320px, height 250px and a background color.

318.89 -> Let me use position absolute and z-index to bring this to the front.

324.11 -> And, let me give top 10px and left 10px for now and then let me inspect and adjust the

336.67 -> position.

338.37 -> top 160px and left -14px seems to be good.

344.42 -> Ok.

345.42 -> Let me change the background color and add a border top of 1px solid.

352.56 -> Looks good.

354.31 -> Let's concentrate on the arrow.

358.68 -> For that let me create a container first.

362.12 -> And inside that, let me create a wrapper, because we need a wrapper to use position

368.01 -> relative so that we can position the arrow relative to this wrapper.

371.06 -> Inside that wrapper, let me create the arrow div.

374.94 -> And for the arrow container, let me use width 160px, height 160px and a background color.

379.77 -> Let me use position absolute and z-index to bring this to the front.

388.59 -> To bring this to the center, I need to calculate.

393.86 -> 294px minus 160px which gives me 134px and half of that is 67px.

398.33 -> So, let me use top: 67px and left 67px;

404.88 -> For the arrow wrapper, let me use the same width and height as the container.

412.911 -> And, let me change the arrow container background color to transparent and arrow wrapper background

423.3 -> color to red.

424.3 -> Here, let me use position relative so that I can position the arrow relative to this

430.48 -> wrapper.

433.11 -> For the arrow class, let me give width 110px, height 4px and a nice background color.

437.21 -> Let me change this wrapper color also to transparent and use position absolute in the arrow class

449.67 -> to position it correctly.

451.18 -> Let me use top 10px and left 10px first.

453.72 -> And then, let me inspect this and position this correctly.

461.48 -> top 78px and left -30px seems to be good.

471.57 -> Actually, the idea is when I rotate the wrapper, the arrow will also rotate.

478.56 -> So, let me add a new class speed-0 and for this class let me use transform property with

486.09 -> rotate 0 degree.

487.09 -> Let me also create the other classes and use the respective value for rotate.

493.25 -> So, if I change this class, we can see it is moving.

510.57 -> It would be good if we add some transition.

521.21 -> Now looks good.

522.21 -> Ok, let's create the buttons to increase and decrease the speed.

526.78 -> For that let me create a new container and inside that let me create two buttons.

533.21 -> Let me also add some classes.

534.21 -> For the buttons inside the container class, let me give width 200px, height 60px.

551.05 -> The other container is hiding these buttons and so let me use margin top to the accelerate

567.21 -> container and text align center.

570.91 -> And for the buttons, let me use border none, border radius 5px, margin 20px.

576.05 -> Also, let me use font size 18px and font weight bold.

581.65 -> Finally, let me add cursor pointer and a box shadow.

589.39 -> When the button is active, let me change the color of the box shadow.

599.011 -> So that we will get a click effect.

603.33 -> Now, lets change the color of the buttons.

605.779 -> For increase, let me add a background color of green and for decrease let me use red.

611.37 -> And, finally let me change the font color to white.

618.62 -> Ok.

619.62 -> Our buttons are ready.

621.52 -> Now, we need to add our logic.

625.6 -> Let's create a javascript file called logic.js and let's use it here just before the closing

631.15 -> body tag.

632.15 -> And, let me also add onclick events to these buttons and create the respective functions.

642.73 -> Let me create a global variable speed = 0; And, let me increase the speed inside increase

654.529 -> speed function and let me decrease it in the decrease speed function.

659.07 -> We have speed range from 0 to 180 and so I need to add a logic to prevent increasing

664.74 -> the speed beyond 180 and prevent decreasing the speed below 0.

671.23 -> Ok.

672.23 -> Actually on clicking these buttons, I need to dynamically calculate the speed and add

678.73 -> a class to the speedometer arrow wrapper class and so the arrow moves.

682.71 -> So, let me create a new function called addClass and let me call this function inside both

688.49 -> increase and decrease functions.

693.44 -> In the addClass function, let me create a variable newClass equal to speed hyphen speed.

698.63 -> Like this.

699.85 -> Initially you can see, I have a class.

704.06 -> This is what I need to replace.

705.25 -> So, let me create another global variable to hold the previous speed.

709.49 -> Inside this class, let me create a new local variable prevClass to hold the current class.

717.18 -> And, let me create another variable el and get the speedometer arrow wrapper element

723.27 -> using the getElementsByClassName function.

724.27 -> And then I am checking whether the classlist of that element contains the previous class,

732.779 -> if it contains the class, let me remove and add the new class.

737.73 -> Finally, after I changed the class, let me assign the new speed to the previous speed.

743 -> So, if I click the increase button we can see the speed is increasing and when I click

748.089 -> the decrease button, it is decreasing.

750.26 -> If I inspect, we can see on clicking the buttons, the class is getting changed.

755 -> That is why the arrow is moving.

757.66 -> Ok.

758.66 -> Now, let me add an active class dynamically and add some color to the scales ranging from

764.1 -> green to red when it is active.

766.649 -> For that, first let me create a global variable currentScale equal to 1.

770.48 -> And, let me increase the inside increase speed function and decrease that inside decrease

776.47 -> speed function.

779.49 -> And then, let me create a function changeActive, in which let me get create a temp class using

784.06 -> the current scale, and using that tempClass, let me get the element and toggle the active

792.08 -> class in that element.

793.62 -> Let me also call this function inside both increaseSpeed and decreaseSpeed.

799.12 -> Now, if I inspect and click the button, we can see a new class is getting added.

804.3 -> Let me add background colors to these classes.

809.11 -> For scale 1 having active class, let me use background color green.

814.99 -> And for scale 2, let me use a lighter green and then slowly to yellow and then to orange

832.68 -> and finally to red.

838.94 -> Let me test it.

842.35 -> We can see the initial one is still black.

850.02 -> So let me use the active class for the initial one.

862.67 -> But even after that it is black, that is because, the last scale is overlapping this one.

868.24 -> If I inspect we can understand that.

870.351 -> When I hide that element, we can see it is showing green.

874.29 -> So, for this 19th scale, let's use a lesser height and let's position that so that it

879.56 -> won't hide this first scale.

886.72 -> Ok. let me use these values.

893.82 -> Now we can see the green is showing up.

897.08 -> So, when I increase it, we can see it is fine.

900.43 -> But when I decrease it, last one is not changing back to black and the first one is changed.

907.73 -> So, here in increase speed it is correct.

909.99 -> But inside decrease speed, first we have to change the active color and then decrease

915.06 -> the currentScale.

916.06 -> And so, if I test now, we can see it is working as expected.

922.56 -> Finally, let me add some text.

924.279 -> Let me create a div for that.

928.88 -> Inside that let me have a static div in which let me have speed and then a dynamic div.

935.51 -> Inside the dynamic div, let me have a span with class km in which let me mention 0 and

940.84 -> another span with class unit where I am having KMPH.

945.5 -> That means Kilometer per hour.

947.81 -> In css, for this speedometer text class, let me give some width a temporary background

953.25 -> color and position absolute with some z-index.

957.13 -> Let me inspect and position it.

969.47 -> These values seem to be fine.

974.65 -> Let me use that.

977.279 -> And, let me use text align center and font weight bold.

984.51 -> Let me remove the background color and for the static class, let me use font size 18px.

994.019 -> For the dynamic class, let me use margin top 10 px and for the km class, let me use font

1004.839 -> size 32 px so that it appears big.

1007.351 -> Finally, for the unit class, let me use font size 14 px and margin left 5 px.

1016.48 -> Finally, let me create a new function changeText in which let me get the element by class name

1023.76 -> 'km'.

1024.92 -> And, let me use innerText property to add the speed.

1029.79 -> And, let me also call this function in both increase and decrease speed functions.

1041.76 -> Ok looks good.

1042.76 -> So we have created a speedometer using HTML, CSS and Javascript.

1047.549 -> Hope you like this video.

1048.549 -> Please subscribe and support me.

1049.549 -> I will be back with another concept soon.

1050.549 -> Thank you.

1051.549 -> Bye.

Source: https://www.youtube.com/watch?v=O5djKWxvAKw