From 396c92692acf466f9f11b32bd473f07f9394d6f4 Mon Sep 17 00:00:00 2001 From: Nick Van Doorn Date: Thu, 11 Oct 2018 17:38:32 -0700 Subject: Clarify implementation with comments --- projects/2-stay-motivated/index.html | 5 ++++- projects/2-stay-motivated/main.js | 27 +++++++++++++++++++++++++++ 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 @@ + +
Loading...
+ - \ No newline at end of file + 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 `
+ return `
${gridItems}
` }, gridItem(isHighlighted, id) { return `
` }, form(header, id, inputId, value = '') { - return `
+ return `

${header}

- + +
` }, container(content) { -- cgit v1.2.3