For this week, I wanted to add some interactivity, as I’m already bored of HTML and CSS. I thought creating a resistor calculator would be simple enough and achievable for my current capabilities. This is inspired by my recent foray into electronics, where I often have difficulty telling the resistance value of a resistor. The resistors I have contain 4 coloured band that show the resistance value.
The website would involve a user selecting the colours of a 4-band resistor, which would cause an image of a resistor to update to show the selected colour. After all 4 bands are selected, the resistance value of the resistor would be displayed.
Sounds simple enough, only problem is that I have no experience in writing JavaScript. The first feature I wanted to tackle was displaying an image of a resistor, and updating the colours of its bands. I had no idea how to approach this, and that’s when I learnt about the canvas, a html element that allows JavaScript to draw in graphics.
The combination of the canvas and JavaScript allowed me to update the colours of the bands by drawing in coloured rectangles. The positioning of these rectangle boxes was achieved by adjusting the x position, y position, width and height. There is probably a method where you can loop over the band, and based on existing band colour replace them. The current method doesn’t look great, but at least it’s simple and functional. Additionally, I had added in a button, which would randomise the band colour from a certain pool of legitimate colours and update the bands in the resistor image.
By this point, I had realised the scope for this website was way too big, so I changed the aim from a resistor calculator to a resistor band randomiser. A resistor band randomiser randomises the bands of a resistor, so not very helpful. However, this will be the stepping stone for next week’s website, where I will attempt the resistor calculator. I had originally hoped to build a separate website for each week, but on reflection I think the important part is showing up and getting my reps in.
Learnings