diff options
| author | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-11 02:40:42 -0700 |
|---|---|---|
| committer | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-11 02:40:42 -0700 |
| commit | 5eda7a0d40116170a3dafc6e37b770ca70050106 (patch) | |
| tree | 4195b2c692d32c1dacb6809ca1cf0d6b2fdeb64a | |
| parent | 5cfb4ce30bda3bed04eeabb9ae09bd90bab9f8c4 (diff) | |
Initial implementation of motivation app
| -rw-r--r-- | projects/2-stay-motivated/components.js | 0 | ||||
| -rw-r--r-- | projects/2-stay-motivated/index.html | 11 | ||||
| -rw-r--r-- | projects/2-stay-motivated/main.js | 62 | ||||
| -rw-r--r-- | projects/2-stay-motivated/style.css | 65 | ||||
| -rw-r--r-- | projects/2-stay-motivated/templates.js | 24 |
5 files changed, 162 insertions, 0 deletions
diff --git a/projects/2-stay-motivated/components.js b/projects/2-stay-motivated/components.js deleted file mode 100644 index e69de29..0000000 --- a/projects/2-stay-motivated/components.js +++ /dev/null diff --git a/projects/2-stay-motivated/index.html b/projects/2-stay-motivated/index.html index e69de29..fddd88f 100644 --- a/projects/2-stay-motivated/index.html +++ b/projects/2-stay-motivated/index.html @@ -0,0 +1,11 @@ +<html> + <head> + <title>Stay Motivated</title> + <link rel="stylesheet" type="text/css" href="style.css"> + </head> + <body> + <div id="root">Loading...</div> + <script type="text/javascript" src="templates.js"></script> + <script type="text/javascript" src="main.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/projects/2-stay-motivated/main.js b/projects/2-stay-motivated/main.js index e69de29..7d7bb0d 100644 --- a/projects/2-stay-motivated/main.js +++ b/projects/2-stay-motivated/main.js @@ -0,0 +1,62 @@ +function getRandomId(prefix) { + return `${prefix}-${Math.round(Date.now() * Math.random())}` +} + +function makeGrid() { + let gridItems = [] + let gridIds = [] + for (let i = 1; i <= 365; i++) { + let id = getRandomId('grid-item') + gridIds.push(id) + gridItems.push(Templates.gridItem(false, id)) + } + let gridTemplate = Templates.gridContainer(gridItems.join('')) + return { + template: gridTemplate, + ids: gridIds + } +} + +function makeForm(value) { + let id = 'motivation-form' + let template = Templates.form( + 'What are you working on?', + getRandomId(''), + id, + value + ) + return { template, id } +} + +function bindGridClickHandlers(ids) { + for (let id of ids) { + let gridItem = document.getElementById(id) + gridItem.addEventListener('click', function() { + gridItem.classList.toggle('grid-item__highlighted') + }) + } +} + +function mount(rootNode, content) { + rootNode.innerHTML = Templates.container(content) +} + +function mountGrid(rootNode, content, gridIds) { + mount(rootNode, content) + bindGridClickHandlers(gridIds) +} + +window.onload = function() { + let rootNode = document.getElementById('root') + let grid = makeGrid() + let form = makeForm() + mount(rootNode, form.template) + let formNode = document.getElementById(form.id) + formNode.addEventListener('keydown', function(event) { + if (event.key == 'Enter') { + form = makeForm(formNode.value) + console.log() + mountGrid(rootNode, form.template + grid.template, grid.ids) + } + }) +} diff --git a/projects/2-stay-motivated/style.css b/projects/2-stay-motivated/style.css index e69de29..4c62239 100644 --- a/projects/2-stay-motivated/style.css +++ b/projects/2-stay-motivated/style.css @@ -0,0 +1,65 @@ +html, +body, +#root { + width: 100%; + height: 100%; +} +body { + background: #40454e; + color: #ffffff; + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.grid-item { + height: 20px; + width: 20px; + background: #262a32; + margin: 1px; +} + +.grid-item__highlighted { + background: #51f2fc; +} + +.container { + display: flex; + width: 100%; + height: 100%; + flex-direction: column; + justify-content: space-around; +} + +.grid-container { + display: flex; + flex-wrap: wrap; + width: 90%; + margin: 0 auto; +} + +.form-container { + text-align: center; +} + +#motivation-form { + font-size: 100px; + background: none; + color: #ffffff; + border: none; + outline: none; + text-align: center; + font-style: italic; +} + +#motivation-form:focus { + border: 0; +} + +h1 { + font-size: 3em; +} diff --git a/projects/2-stay-motivated/templates.js b/projects/2-stay-motivated/templates.js new file mode 100644 index 0000000..776913c --- /dev/null +++ b/projects/2-stay-motivated/templates.js @@ -0,0 +1,24 @@ +let Templates = (function() { + return { + 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>` + } + } +})() |