This week, I built on last week’s website, which was able to recolour the white bands into a red band by clicking the associated button. I first wanted to find out how I could convert these white bands into any colour. This involved developing some function that would take the string value of a colour, such as red, blue, green, etc. and converting it into its associated RGB value.
After that was successfully done, I needed a way for users to input what colour they wanted the bands to be. Initially I thought a drop-down box would probably be the best, but on review it would add a lot of extra complexity. These include behaviour on hover. For simplicity, I decided radio buttons would work well.
Each band has its unique list of possible values, so I accounted for that. Originally, I was thinking a design where 4 options were selected, then the user would click a ‘submit’ button would be good. However, that’s not a very responsive solution. Instead, I choose to update the colour in the image, as soon as a radio button is picked. To achieve this, I connected an event listener for each radio button grouping, that would update the associated band colour using last week’s band recolour functionality.
I quickly realised that after a colour was set by a radio button, it wouldn’t change because it assumes the colour to be replaced is used a default RGB value of white. I used some variables to keep track of the previous colour, which would feed into the function to convert it into a RGB value for replacement.
Afterwards, I decided its not good to have a button to submit and calculate the resistance value. Instead, I added in some logic where if there are 4 radio buttons selected, the resistance value would be calculated. I had some initial issues with the calculation, but it turned out well. I learnt how do some template literals, which is equivalent to a Python f-string.
Learnings