Last active
November 17, 2018 07:00
-
-
Save harrisonmalone/3b1bbce089c1731a76ee327cf5094106 to your computer and use it in GitHub Desktop.
simple to do list in js using a form, appending elements to the dom
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
| const form = document.querySelector('#addItemForm') | |
| const items = document.querySelector('.items') | |
| form.addEventListener('submit', addItem) | |
| function addItem(event) { | |
| event.preventDefault() | |
| const formEvent = event.target | |
| const text = formEvent.taskItem.value | |
| createListItems(items, text) | |
| formEvent.reset() | |
| } | |
| function createListItems(items, text) { | |
| const para = document.createElement('p') | |
| para.innerHTML = text | |
| if (text !== "") { | |
| items.appendChild(para) | |
| } | |
| } |
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
| body { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .wrapper { | |
| margin: 40px 0px; | |
| } | |
| form { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| label { | |
| font-size: 20px; | |
| font-family: sans-serif; | |
| } | |
| input[name="taskItem"] { | |
| width: 50%; | |
| margin: 6px 0px; | |
| height: 50px; | |
| border: 1px solid black; | |
| font-size: 20px; | |
| text-align: center; | |
| } | |
| input[type="submit"] { | |
| width: 50%; | |
| margin: 6px 0px; | |
| height: 50px; | |
| border: 1px solid black; | |
| font-size: 20px; | |
| } | |
| .items { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| font-size: 30px; | |
| font-family: sans-serif; | |
| } |
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"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script defer src="script.js"></script> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <form id="addItemForm"> | |
| <label for="taskItem">Reminders</label> | |
| <input type="text" name="taskItem" placeholder="do the washing"> | |
| <input type="submit" value="Submit"> | |
| </form> | |
| <div class="items"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment