Pure JavaScript Web Components

Architecture and Solution Structure

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

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

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.