Don't forget to Subscribe to my YouTube channel to learn programming fast and free: https://www.youtube.com/channel/UCFzeA3xC-_i4ZT-XwcwsJxQ
Here is the code:
HTML <!DOCTYPE html> <html> <head> <title>To Do List</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://kit.fontawesome.com/007b767ad0.js" crossorigin="anonymous"></script> <style> * { margin: 0; border: 0; font-family: sans-serif; } h1 { margin-top: 10px; position: absolute; color: blue; font-size: 300%; width: 100%; text-align: center; } .inp { position: absolute; top: 13%; left: 50%; transform: translate(-50%, -13%); width: 70%; align-items: center; } input { border: none; border: 2px solid blue; padding: 10px; border-radius: 20px 0px 0px 20px; outline: none; border-right: none; color: grey; font-size: 20px; width: 70%; } button { background: none; border: none; width: 15%; height: 20%; border: 2px solid blue; border-radius: 0px 20px 20px 0px; outline: none; padding: 10px; font-size: 20px; color: blue; z-index: 9999px; cursor: pointer; transition: 0.5s; } button:hover { background: blue; color: white; transition: 0.5s ease-in-out; } .to-dos { position: absolute; top: 26%; left: 50%; transform: translate(-50%, -50%); color: grey; font-size: 30px; cursor: pointer; } </style> </head> <body> <h1>iDo List</h1> <div class="inp"> <input id="inputField" type="text" placeholder="I want to do..."><button id="addToDo"><i class="fas fa-plus"></i></button> </div> <div class="to-dos" id="toDoContainer"> </div> <script> let addToDoButton = document.getElementById('addToDo'); let toDoContainer = document.getElementById('toDoContainer'); let inputField = document.getElementById('inputField'); addToDoButton.addEventListener('click', function(){ var paragraph = document.createElement('p'); paragraph.classList.add('paragraph-styling'); paragraph.innerText = inputField.value; toDoContainer.appendChild(paragraph); inputField.value = ''; paragraph.addEventListener('click', function() { paragraph.style.textDecoration = 'line-through'; }) paragraph.addEventListener('dblclick', function() { toDoContainer.removeChild(paragraph); }) }) </script> </body> </html> 
Top comments (2)
You know, you should explain your code, not just type it out
Some comments may only be visible to logged-in visitors. Sign in to view all comments.