| license: mit |
Built with blockbuilder.org
forked from loganwilliams's block: Session 1 Example (part 0)
forked from loganwilliams's block: Session 1 Example (part 0)
forked from loganwilliams's block: Session 1 Example (part 0)
forked from loganwilliams's block: Session 1 Example (part 1)
forked from loganwilliams's block: Session 1 Example (part 2)
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Our To-do list</title> | |
| <style> | |
| body { | |
| background-color: #332244; | |
| color: white; | |
| font-family: Arial, sans-serif; | |
| } | |
| ul { | |
| list-style-type: square; | |
| } | |
| li { | |
| background-color: #553366; | |
| margin-bottom: 1em; | |
| padding: 0.5em; | |
| width: 200px; | |
| border: 1px solid white; | |
| border-radius: 5px; | |
| } | |
| li.completed { | |
| color: gray; | |
| text-decoration: line-through; | |
| } | |
| li:not(.completed):hover { | |
| background-color: dodgerblue; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| function addtask() { | |
| var input = document.getElementById("newtask"); | |
| var newitem = document.createElement("li"); | |
| newitem.innerHTML = input.value; | |
| newitem.onclick = completeTask; | |
| var list = document.getElementById("tasks"); | |
| list.appendChild(newitem); | |
| input.value = ""; | |
| } | |
| function completeTask(e) { | |
| e.target.classList.add("completed"); | |
| } | |
| </script> | |
| <h1>To-do</h1> | |
| <ul id="tasks"> | |
| <li class="completed">Learn HTML</li> | |
| <li>Make a To-do list</li> | |
| <li>Learn D3</li> | |
| </ul> | |
| <input id="newtask" /> | |
| <button onclick="addtask()">Add task</button> | |
| </body> |