Last active
June 16, 2020 23:57
-
-
Save harrisonmalone/eaa17b2432038c68eaf5123eec3e241c to your computer and use it in GitHub Desktop.
This file contains hidden or 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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <script defer src="./index.js"></script> | |
| </head> | |
| <body> | |
| <h1>Number of tasks: 0</h1> | |
| <input type="text" name="task" id="task"> | |
| <button>Add task</button> | |
| <ol> | |
| <!-- tasks will go here --> | |
| </ol> | |
| </body> | |
| </html> |
This file contains hidden or 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
| // selecting elements on the page | |
| const button = document.querySelector("button") | |
| const ol = document.querySelector("ol") | |
| const input = document.querySelector("input") | |
| const h1 = document.querySelector("h1") | |
| const renderTasks = (task) => { | |
| // .appendChild | |
| // .innerHTML | |
| ol.insertAdjacentHTML("beforeend", ` | |
| <li>${task}</li> | |
| `) | |
| } | |
| const countTasks = () => { | |
| const numOfTasks = ol.children.length | |
| h1.textContent = `Number of tasks: ${numOfTasks}` | |
| } | |
| const handleClick = (e) => { | |
| renderTasks(input.value) | |
| input.value = '' | |
| countTasks() | |
| } | |
| button.addEventListener("click", handleClick) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment