Pure JavaScript Web Components

Architecture and Solution Structure

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

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

Download the source: architecture.zip

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.