diff options
| author | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-11 17:38:32 -0700 |
|---|---|---|
| committer | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-11 17:38:32 -0700 |
| commit | 396c92692acf466f9f11b32bd473f07f9394d6f4 (patch) | |
| tree | b987e0e2516008f8a65cd8b801bfad924c874401 | |
| parent | 57f325b29ed5aeee4fa6344847c66a71bee92dd0 (diff) | |
Clarify implementation with comments
| -rw-r--r-- | projects/2-stay-motivated/index.html | 5 | ||||
| -rw-r--r-- | projects/2-stay-motivated/main.js | 27 | ||||
| -rw-r--r-- | projects/2-stay-motivated/templates.js | 14 |
3 files changed, 41 insertions, 5 deletions
diff --git a/projects/2-stay-motivated/index.html b/projects/2-stay-motivated/index.html index fddd88f..b7a08da 100644 --- a/projects/2-stay-motivated/index.html +++ b/projects/2-stay-motivated/index.html @@ -4,8 +4,11 @@ <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> + <!-- This is our root node where the rest of our app will spawn --> + <!-- If the inner HTML of this root node has not been changed yet, things are still loading --> <div id="root">Loading...</div> + <!-- Make sure the templates get imported first --> <script type="text/javascript" src="templates.js"></script> <script type="text/javascript" src="main.js"></script> </body> -</html>
\ No newline at end of file +</html> diff --git a/projects/2-stay-motivated/main.js b/projects/2-stay-motivated/main.js index 97c6bf0..796cadf 100644 --- a/projects/2-stay-motivated/main.js +++ b/projects/2-stay-motivated/main.js @@ -1,7 +1,15 @@ +// We want to generate many "instances" of our templates +// so being able to generate a random ID that will not collide +// with other generated ids is very helpful function getRandomId(prefix) { return `${prefix}-${Math.round(Date.now() * Math.random())}` } +// Create many of our gridItem template +// and insert them into our gridContainer +// template. We return the template as one big string +// and return an array of ids for the gridItems such +// that we can query them later function makeGrid() { let gridItems = [] let gridIds = [] @@ -17,6 +25,9 @@ function makeGrid() { } } +// Create an "instance" of our form template. +// id of the form doesn't matter, but id of the +// input is very important function makeForm(value) { let id = 'motivation-form' let template = Templates.form( @@ -28,32 +39,48 @@ function makeForm(value) { return { template, id } } +// Bind a callback to each DOM node +// identified by one of the elements of ids function bindGridClickHandlers(ids) { for (let id of ids) { let gridItem = document.getElementById(id) gridItem.addEventListener('click', function() { + // This css class "highlights" the grid item + // so we want to toggle it when the user clicks gridItem.classList.toggle('grid-item__highlighted') }) } } +// Helper function to mount content to +// the root node (wrapped in our container) function mount(rootNode, content) { rootNode.innerHTML = Templates.container(content) } +// Helper function to mount our grid +// and bind callbacks to our gridItems function mountGrid(rootNode, content, gridIds) { mount(rootNode, content) bindGridClickHandlers(gridIds) } window.onload = function() { + // Get our root node let rootNode = document.getElementById('root') + // Make our templates let grid = makeGrid() let form = makeForm() + // Mount just the form mount(rootNode, form.template) let formNode = document.getElementById(form.id) formNode.addEventListener('keydown', function(event) { + // When the user presses enter in the form + // mount the grid below the form if (event.key == 'Enter') { + // Our old form template did not contain + // the users value, so we re-make it, and pass + // in the user input (grabbed from the formNodes value) form = makeForm(formNode.value) mountGrid(rootNode, form.template + grid.template, grid.ids) } diff --git a/projects/2-stay-motivated/templates.js b/projects/2-stay-motivated/templates.js index 776913c..daa2ebe 100644 --- a/projects/2-stay-motivated/templates.js +++ b/projects/2-stay-motivated/templates.js @@ -1,20 +1,26 @@ +// Create a module to keep +// our template functions +// out of the global scope let Templates = (function() { return { + // Allowing an id to be passed in is very useful + // for finding this node after it gets mounted gridContainer(gridItems, id) { - return `<section class="grid-container" id=${id}> + return `<section class="grid-container" id="${id}"> ${gridItems} </section>` }, gridItem(isHighlighted, id) { return `<div - id=${id} + id="${id}" class="grid-item ${isHighlighted ? 'grid-item__highlighted' : ''}"> </div>` }, form(header, id, inputId, value = '') { - return `<section class="form-container" id=${id}> + return `<section class="form-container" id="${id}"> <h1>${header}</h1> - <input autofocus type="text" name="goal" value="${value}" id=${inputId}></input> + <input autofocus type="text" name="goal" value="${value}" id="${inputId}"> + </input> </section>` }, container(content) { |