Search

Create A To-Do List App Using HTML, CSS, and JavaScript

Learn How to create a simple to-do list web app using HTML, CSS,

and JavaScript.


This is a basic to-do app that will let you add, edit, and mark tasks as completed.

  • HTML

First, we will create a basic structure using HTML of where to place the items on our application.

<body class="no-margin">
 <div class="main-container">
 <div class="page-heading">To Do List</div>
 <div class="body-container">
 
 <div class="card-container">
 <input id="new-task" class="task-textbox" type="text">
 <button class="add-task-button" onclick="addTask()">Add Task</button>
 </div>
 <hr class="hr-width">

 <div class="to-do-container">
 <h3 class="center-align">To Do </h3>
 <ul id="incomplete-tasks" class="list-style">
 <li class="flex-container">
 <input class="task-checkbox" type="checkbox">
 <div class="label-style">Pay Bills</div>
 <input type="text">
 <button class="edit">Edit</button>
 <button class="delete">Delete</button>
 </li>
 <li class="flex-container">
 <input class="task-checkbox" type="checkbox">
 <div class="label-style">Buy Books</div>
 <input type="text">
 <button class="edit">Edit</button>
 <button class="delete">Delete</button>
 </li>
 </ul>
 </div>
 <hr class="hr-width">
 <div class="to-do-container">
 <h3 class="center-align">Completed </h3>
 <ul id="completed-tasks" class="list-style">
 <li class="flex-container">
 <input class="task-checkbox" type="checkbox" checked>
 <div class="label-style">Bought Grocery</div>
 <input type="text">
 <button class="edit">Edit</button>
 <button class="delete">Delete</button>
 </li>
 <li class="flex-container">
 <input class="task-checkbox" type="checkbox" checked>
 <div class="label-style">Car Wash</div>
 <input type="text">
 <button class="edit">Edit</button>
 <button class="delete">Delete</button>
 </li>
 </ul>
 </div>
 </div>
 </div>
</body>

  • CSS:

We will add some Styles to the web page using CSS.

.main-container{
 background-image: url("background.jpg");
}
.page-heading{ 
 font-size: 5em;
 font-family: 'Ubuntu', sans-serif;
 color: white;
 text-align: center;
 background-color: #1783e0;
}
.add-task-button{
 padding: 10px;
 font-size: 20px;
 color: grey;
 background: white;
 border: solid grey;
 border-radius: 5px;
 width: 15%;
}
.card-container{
 display: flex;
 justify-content: center;
 padding: 10% 10% 2% 10%;
}
.task-textbox{
 width: 30%;
 border: solid 2px grey;
 border-radius: 8px;
 margin: 0 20px;
}
.no-margin{
 margin: 0px;
}
.no-padding{
 padding: 0px;
}
.to-do-container{
 text-align: center;
}
.to-do-heading{
 font-size: 25px;
 color: #4517ff;
}
.hr-width{
 border: solid;
 width: 45%;
 border-width: 2px;
 color: black;
}
.list-style{
 list-style-type: none;
 padding: 0px;
}
.center-align{
 text-align: center;
}
.label-style{
 font-size: 30px;
 width: 8em;
 text-align: left;
 padding: 10px;
}
li > .delete:hover {
 color: #CF2323;
}
li > .edit:hover{
 color: green;
}
.edit{
 font-size: 15px;
 background-color: white;
 border: solid 2px grey;
 border-radius: 5px;
 width: 5em;
 margin: 10px;
}
.delete{
 font-size: 15px;
 background-color: white;
 border: solid 2px grey;
 border-radius: 5px;
 width: 5em;
 margin: 10px;
}
.flex-container{
 display: flex;
 justify-content: center;
}
.task-checkbox{
 margin: 20px;
}
ul li input[type=text] {
 display:none;
} 
ul li.editMode input[type=text] {
 display:block;
 width: 17%;
 border: solid 2px gray;
 border-radius: 5px;
}
ul li.editMode div {
 display:none;
}
#completed-tasks div {
 text-decoration: line-through;
 color: #888;
}

  • JavaScript

Now, we will add, edit, and delete tasks using JavaScript.

var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completedTasksHolder = document.getElementById("completed-tasks");

var addTask = function () {
 var newTask = document.getElementById("new-task");

 if (newTask.value == '' || newTask.value == undefined) {
 alert("task cannot be empty");
 }
 else {
 var taskItem = createNewTaskElement(newTask.value);
 incompleteTasksHolder.appendChild(taskItem);
 bindTaskEvents(taskItem, taskCompleted);
 newTask.value = '';
 }
}

var createNewTaskElement = function (task) {
 // create List Item
 var taskList = document.createElement("li");
 // input checkbox
 var checkBox = document.createElement("input");
 // label
 var div = document.createElement("div");
 // input (text)
 var editInput = document.createElement("input");
 // button.edit
 var editButton = document.createElement("button");
 // button.delete
 var deleteButton = document.createElement("button");

 //Each element needs modified 
 checkBox.type = "checkBox";
 editInput.type = "text";

 editButton.innerText = "Edit";
 editButton.className = "edit";
 deleteButton.innerText = "Delete";
 deleteButton.className = "delete";
 div.className = "label-style";
 checkBox.className = "task-checkbox";
 taskList.className = "flex-container";
 div.innerText = task;
 // Each element needs appending
 taskList.appendChild(checkBox);
 taskList.appendChild(div);
 taskList.appendChild(editInput);
 taskList.appendChild(editButton);
 taskList.appendChild(deleteButton);

 return taskList;
}
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
 // select listitems chidlren
 var checkBox = taskListItem.querySelector('input[type="checkbox"]');
 var editButton = taskListItem.querySelector("button.edit");
 var deleteButton = taskListItem.querySelector("button.delete");
 //bind editTask to edit button
 editButton.onclick = editTask;
 //bind deleteTask to delete button
 deleteButton.onclick = deleteTask;
 //bind checkBoxEventHandler to checkbox
 checkBox.onchange = checkBoxEventHandler;
}
var editTask = function() {
var taskList = this.parentNode;
var editInput = taskList.querySelector("input[type=text]");
var div = taskList.querySelector("div");
var containsClass = taskList.classList.contains("editMode");
 
 // if class of the parent is .editMode
 if (containsClass) {
 //Switch from .editMode
 //label text become the input's value
 div.innerText = editInput.value;
 } else {
 //Switch to .editMode
 //input value becomes the labels text
 editInput.value = div.innerText;
 }
 //Toggle .editMode on the parent 
 taskList.classList.toggle("editMode");
}
var deleteTask = function () {
 var taskList = this.parentNode;
 var ul = taskList.parentNode;
 
 ul.removeChild(taskList);
}
//Mark a task as complete
var taskCompleted = function() {
 //When the Checkbox is checked 
 //Append the task list item to the #completed-tasks ul
 var taskList = this.parentNode;
 completedTasksHolder.appendChild(taskList);
 bindTaskEvents(taskList, taskIncomplete);
 }
var taskIncomplete = function() {
 console.log("Task Incomplete...");
 //When the checkbox is unchecked appendTo #incomplete-tasks
 var taskList = this.parentNode;
 incompleteTasksHolder.appendChild(taskList);
 bindTaskEvents(taskList, taskCompleted);
 }
for (var i = 0; i < incompleteTasksHolder.children.length; i ++) {
 bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}
 //cycle over completedTaskHolder ul list items
for (var i = 0; i < completedTasksHolder.children.length; i ++) {
 bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}

Result



Checkout the Github repository here.

28 views0 comments

Recent Posts

See All