HTML:
<body> <div class="container"> <div class="row"> <div class="intro col-12"> <h1>To Do List Using JavaScrpit</h1> <div> <div class="border1"></div> <div c </div> </div> </div> <div class="row"> <div class="helpText col-12"> <p id="first">Enter Task into the input field to add Tasks to your list.</p> </div> </div> <div class="row"> <div class="col-12"> <input id="userInput" type="text" placeholder="New Task..." maxlength="27"> <button id="enter"><i class="fas fa-pencil-alt"></i></button> </div> </div> <div class="row"> <div class="listItems col-12"> <ul class="col-12 offset-0 col-sm-8 offset-sm-2"> </ul> </div> </div> </div> </body> </html>
CSS:
body { background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); text-align: center; font-family: 'Open Sans', sans-serif; } .intro { margin: 30px 0px; font-weight: bold; } h1 { color: #ffffff; text-transform: uppercase; font-weight: 800; } p { font-weight: 600; } #first { margin-top: 10px; color: #FFCD5D; } #second { color: #51DF70; } #third { color: #025F70; margin-bottom: 30px; } #enter { border: none; padding: 5px 15px; border-radius: 5px; color: #04A1BF; background-color: #025F70; transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -ms-transition: all 0.75s ease; -o-transition: all 0.75 ease; font-weight: normal; } #enter:hover{ background-color: #02798F; color: #FFCD5D; } ul { text-align: left; margin-top: 20px; } li { list-style: none; padding: 10px 20px; color: #ffffff; text-transform: capitalize; font-weight: 600; border: 2px solid #025f70; border-radius: 5px; margin-bottom: 10px; background: #4EB9CD; transition: all 0.75s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5 ease; } li:hover { background: #76CFE0; } li > button { font-weight: normal; background: none; border: none; float: right; color: #025f70; font-weight: 800; } input { border-radius: 5px; min-width: 65%; padding: 5px; border: none; } .done { background: #51DF70 !important; color: #00891E; } .delete { display: none; }
JavaScript:
var enterButton = document.getElementById("enter"); var input = document.getElementById("userInput"); var ul = document.querySelector("ul"); var item = document.getElementsByTagName("li"); function inputLength(){ return input.value.length; } function listLength(){ return item.length; } function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; function crossOut() { li.classList.toggle("done"); } li.addEventListener("click",crossOut); var dBtn = document.createElement("button"); dBtn.appendChild(document.createTextNode("X")); li.appendChild(dBtn); dBtn.addEventListener("click", deleteListItem); function deleteListItem(){ li.classList.add("delete") } } function addListAfterClick(){ if (inputLength() > 0) { createListElement(); } } function addListAfterKeypress(event) { if (inputLength() > 0 && event.which ===13) { createListElement(); } } enterButton.addEventListener("click",addListAfterClick); input.addEventListener("keypress", addListAfterKeypress);
Try to answer about this code:
What HTML element is used to create a new task in the To-Do List?
<div>
<li>
<ul>
<input>
Which function is responsible for adding a new task to the list?
addListAfterClick()
createListElement()
inputLength()
deleteListItem()
What event triggers the creation of a new task when typing in the input field?
onHover
onKeypress
onClick
onSubmit
How is a task marked as completed in this To-Do List?
By double-clicking the task
By clicking the task itself
By clicking the 'Enter' button
By pressing the 'Delete' key