I'm creating a calculator tool (using HTML, CSS and JS) that will be embedded into my website. The calculator will help users to choose the right wire for their campervan electrical system.
I have created most of the functionality for you already, to give you an idea of what I want. See the codepen here: [https://codepen.io/hudsonkraft/pen/abdOVoZ](https://codepen.io/hudsonkraft/pen/abdOVoZ)
The equation is already in there and it outputs all the values correctly. Your job is to finish some of the functionality off and make it look nice by laying it out nicely.
Please see the attached sketches. One shows the default state (all boxes grey) and the other shows after the user inputs the information.
–––Functionality–––
(*user input) User enters the current in Amps. For example '30'
(*user input) User enters wire length in metres. For example '4'
(*output) Calculator displays the voltage drop for each wire size in the range 1mm2 to 16mm2 to 2 decimal places.
(*output) Green indicates an acceptable voltage drop, and therefor this wire size can be used. Red indicates an unacceptable voltage drop, and therefor this wire size should not be used
–––Design and style–––
- I want this to look good and modern - it must be user friendly, easy and nice to use. - Must work on mobile - the max width of my blog, where it will be displayed, is 650px - open to different ideas of how to display this information on the calculator – the layout, outputs etc.
