Exercise 2: Refactoring towards MVC

Press the Up Arrow and Down Arrow keys to increment and decrement the counter.

Download the code: exercise02.zip

This version of the counter application has been split into separate JS modules, but those modules have not been implemented. The missing methods are marked with //TODO comments - you'll need to figure out what should go in these methods and add the missing code.

Source Files:

• index.html - this page
• counter.js - the JS file containing the custom element
• counting-engine.js - the JS class containing the app logic.
• renderer.js - the renderer class that translates the app logic into HTML.
• html.js - helper class used by the renderer to render HTML
• counter.css - CSS rules and styles used by the counter component

In case you need it, we've also included theold version of counter.js, as it looked before refactoring was applied.

A note about ES modules

This project uses <script type="module"> and ES modules, so it will not work from a file:// URL

You'll need to run a local web server that serves .js files with the application/javascript MIME type - if you don't have one set up, check out rif/spark, a tiny web server written in Go that will turn any folder on your machine into a website.