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.
16 views0 comments