Last active
May 12, 2020 21:25
-
-
Save kosalvann/4e09c63b3b8770493e4217a8f43c07ce to your computer and use it in GitHub Desktop.
A simple todo app written in Javascript // source https://jsbin.com/nuxucuc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * The data source | |
| */ | |
| var groceries = [ | |
| 'Take out the garbage', | |
| 'Buy milk and eggs', | |
| ] | |
| /** | |
| * Run the todo methods on page load | |
| * @param event The event that is triggered | |
| * | |
| * @return array | |
| */ | |
| window.addEventListener('load', (event) => { | |
| setTimeout(() => { | |
| document.querySelector("#name").focus(); | |
| document.querySelector('#list').innerHTML = ''; | |
| listGroceries(); | |
| }, 750, | |
| document.querySelector('#list').innerHTML = 'Loading ...' | |
| ); | |
| document.addEventListener('keydown', (event) => { | |
| let inputValue = document.querySelector('#name').value | |
| // Ensure input field isn't empty on keypress | |
| if (event.code == 'Enter' && inputValue.length !== 0) { | |
| renderGroceryList() | |
| } | |
| }) | |
| }) | |
| /** | |
| * Rerender the list with the newly added item | |
| * | |
| * @return string | |
| */ | |
| renderGroceryList = (() => { | |
| let inputValue = document.querySelector('#name').value | |
| // clear the current content and append the new list | |
| document.querySelector('#list').innerHTML = '' | |
| addGrocery(inputValue) | |
| listGroceries() | |
| }) | |
| /** | |
| * Display the list of items | |
| * @return string | |
| */ | |
| listGroceries = (() => { | |
| groceries.forEach((item, key) => { | |
| document.querySelector('#list').innerHTML += | |
| key + ': ' + item + '<br>' | |
| }) | |
| }) | |
| /** | |
| * Append the new item to the list | |
| * | |
| * @param string item The item name | |
| * @param string key The item index | |
| * @return array | |
| */ | |
| addGrocery = ((item, key) => { | |
| groceries.push( | |
| groceries[parseInt(key)] = item | |
| ) | |
| document.querySelector('#name').value = '' | |
| }) | |
| /** | |
| * Clear screen and reset groceries | |
| * array to empty | |
| * | |
| * @return null | |
| */ | |
| document.querySelector('#clear') | |
| .addEventListener('click', (event) => { | |
| document.querySelector("#name").focus(); | |
| // Empty the list of groceries | |
| setTimeout(() => { | |
| document.querySelector('#list').innerHTML = ''; | |
| document.querySelector('#name').value = ''; | |
| groceries = []; | |
| }, 250, | |
| document.querySelector('#list').innerHTML = 'Clearing ...' | |
| ); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Simple todo application written in Javascript"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Todo App</title> | |
| </head> | |
| <body> | |
| <label for="name">Simple Todo</label> | |
| <div id="form"> | |
| <input id="name" type="text" value="" /> | |
| <input id="clear" type="Submit" value="Clear" /> | |
| </div> | |
| <div id="list"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| padding: 10px; | |
| margin: 0; | |
| height: 100%; | |
| } | |
| body * { | |
| font-size: 15px; | |
| font-family: arial,sans-serif; | |
| line-height: 1.2; | |
| box-sizing: border-box; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 4px; | |
| font-size: 16px; | |
| } | |
| #form { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| } | |
| #form *, #clear { | |
| flex-basis: 100%; | |
| margin: 4px 0; | |
| padding: 8px; | |
| width: 100%; | |
| border: 0 none; | |
| box-shadow: inset 0 0 1px 1px #ced3e0; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| outline: none; | |
| } | |
| #clear { | |
| flex-basis: 85px; | |
| margin-left: 5px; | |
| color: #cccccc; | |
| } | |
| #form *:hover, #clear:hover { | |
| background-color: #fcfcfc; | |
| } | |
| #list { | |
| margin: 20px 0; | |
| font-family: arial,sans-serif; | |
| line-height: 1.6; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment