Pure JavaScript Web Components

Architecture and Solution Structure

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

Download the code: exercise04.zip

This project demonstrates how to isolate your HTML rendering and event handlers from the core application logic of your JS web components.

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

Exercises

Download the code for the counter app, unzip it into a local folder, and set up a web server so you can browse and run the example.

Exercise 1: Modify the counter app so that:

• Left-clicking on the counter with the mouse will increment the counter.
• Pressing the spacebar should reset the counter to its initial value.

Exercise 2: Modify the counter app so that:

• The counter will not accept an initial value greater than 25. If you specify an initial value greater than 25, the counter will initialise with 25 as the default value.
• It cannot decrement below zero; if the counter already reads zero, decrementing it should have no effect
• If you increment the counter above 25, it resets to zero. (i.e. the counter will never display 26)

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.