The template HTML code and JavaScript Code contains three paragraphs that will act as input for time and distance, and the output for pace. Start your coding using this template. It also contains sections for header, footer and divs for the main elements of the final submission. At the end it includes a script tag loading the script madone.js which should be your $($main$)$ JavaScript file.

Starting with the template do the following tasks:

add $11$ buttons with labels $012345689$ plus C and $($left arrow UTF$).$ You will want to give these unique IDs $-$ you already have a $7$ in the sample template.

Make the numbers work as input for both time and distance:

Make both input paragraphs start showing the number $0$ on first run

When the user taps on an "input" paragraph: highlight it as current paragraph by adding a $|$ carat cursor to the end of the paragraph. Move this when the user taps the other input field, start with the distance paragraph highlighted on page load;

When the user taps on a numeric button: add that number to the currently active field $($before the $|).$

When the user taps on C: set the currently selected field value to zero.

When the user taps on $$: remove the rightmost digit from the currently selected field $($setting it to zero if no digits remain$).$

Limit the distance field to up to five digits $($e$.$g$.$ max $99999$ metres$)$ and the time field to a maximum of three digits $($e$.$g$.$ max $999$ minutes$).$

Show the calculation of pace in minutes per kilometre $($whole number mins$/$km$,$ e$.$g$."17$ mins$/$km$").$ When the input distance $>=10$ and minutes $>=5$ show the pace calculation as the user inputs to the distance and time fields. When the distance or time is too short, show the pace simply as $--$ this is the template code for the html and javaScript files $-$