Counting Engine

Exercise 3: HTML Helper module

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.

Exercise

Take a look at the file html.js; this file is an ES module which exposes a helper method for creating HTML tags:

Your task is to update the renderer.js file so that it uses the html.element() method to create HTML tags, passing in the attributes as a JavaScript object literal such as {'src': 'counter.css', 'rel': 'stylesheet'}, and removing the repetive calls to createElement, setAttribute and innerHTML = 'html'


    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