summaryrefslogtreecommitdiff
path: root/projects/2-stay-motivated/templates.js
blob: daa2ebe0fcc9468d2444e14880bd76b40400a168 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 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}">
          ${gridItems}
        </section>`
    },
    gridItem(isHighlighted, id) {
      return `<div
        id="${id}"
        class="grid-item ${isHighlighted ? 'grid-item__highlighted' : ''}">
      </div>`
    },
    form(header, id, inputId, value = '') {
      return `<section class="form-container" id="${id}">
        <h1>${header}</h1>
        <input autofocus type="text" name="goal" value="${value}" id="${inputId}">
        </input>
      </section>`
    },
    container(content) {
      return `<main class="container">${content}</main>`
    }
  }
})()