Hello readers, in this blog we will learn how to create a To-Do-LIst with the help of html css and javascript. You'll learn how to create a custom To-Do-LIst.
If you are learning or have learned JavaScript, then you can create To-Do-LIst like this and put it in your project. When you go for an interview, you can tell that we have created a To-Do-LIst app in JavaScript.
When you are in the beginning of web developer, you are first told to make a To-Do-LIst app. So you start thinking what is To-Do-LIst app, then you know what is this To-Do-LIst app, what is it used for.
We use To-Do-LIst app to organize any information. To-Do-LIst app is used to maintain the list of our tasks. Where you can create a list of multiple texts.
We have designed it using html css. Which looks beautiful on seeing you. When we click on the Add Task button by writing the text inside the Add new task above, it gets added below the Tasks List. To add, we can also edit and delete the task list. You can add many tasks below.
Now we know about the html code of this To-Do-LIst app, how its code is written.
You might like this:
- Responsive Multi-level Dropdown Navigation Bar
- Login And Register Form Design
- Responsive Modal Login Form
- DropDown Navigation Menu and Sub Menu
- Responsive Navbar with Social Media share icons
- Responsive Registration Form
- create registration form
We have taken a <section> tag inside the <body> tag whose class name is class="todowrap" . Inside this tag, we have taken a <div> tag whose class name is class="todo-container". Inside this we have taken another <div> tag whose class name is class="add-task-wrap". Inside this tag a <form> tag is taken inside which <input> tag and <button> tag are taken.
And inside it a <h1> tag has been taken whose class name is class="heading-tasklist" inside which the text Task List is written. And below this <h1> tag <div> tag is taken whose Id name is id="todo-tasks"
And its inside is written using the dom method of JavaScript.
We hope that you must have understood something about the html of this To-Do-LIst app, how its code is written in html, which we have tried our best to explain to you from our side. If you want to understand it by watching the video, then you can see it by clicking on the link of the video tutorial given below. And you can easily understand its code too.
Video Tutorial of Todo List App
By watching this video tutorial, you must have understood how the code of this To-Do-LIst app is written. And how the code of this JavaScript has been written. If you want to see its code in your system, then you can copy the code given below and paste it in your editor and run it to see the design of the To-Do-LIst app.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="todowrap">
<div class="todo-container">
<div class="add-task-wrap">
<form action="" id="add-task-form">
<div class="list-input-box">
<input type="text" class="input-filed" placeholder="Add new task" id="add-task-input">
<button class="btn-sub" type="submit" id="add-task-submit">Add Task</button>
</div>
</form>
</div>
</div>
<div class="todo-container todo-task-list">
<h1 class="heading-tasklist">Tasks List</h1>
<div id="todo-tasks">
<!-- <div class="list-input-box">
<input type="text" class="input-filed" placeholder="Add new task" readonly>
<button class="btn-sub">edit</button>
<button class="btn-sub">delete</button>
</div> -->
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
CSS CODE FILE :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.todowrap {
background-color: #3b7bcb;
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
justify-content: center;
padding: 5%;
}
.todo-container {
background-color: #fff;
max-width: 600px;
width: 100%;
padding: 30px;
}
.add-task-wrap {
padding: 16px;
text-align: center;
opacity: 1;
background-color: #2196f3;
color: #344767;
box-shadow: #00000024 0rem 0.25rem 1.25rem 0rem,
#00bbd466 0rem 0.4375rem 0.625rem -0.3125rem;
}
.list-input-box {
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 10px;
}
.input-filed {
border: 0;
height: 30px;
margin: 0px;
width: 70%;
color: #495057;
padding: 20px;
font-size: 18px;
outline: none;
}
.btn-sub {
width: 120px;
height: 40px;
padding: 0 3px;
background-color: #fff;
border: none;
letter-spacing: 0;
color: #2196f3;
text-transform: uppercase;
cursor: pointer;
font-weight: 700;
}
.todo-task-list {
margin-top: 30px;
}
.heading-tasklist {
font-size: 24px;
color: #2196f3;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 15px;
}
JAVASCRIPT CODE FILE :
window.addEventListener("load", () => {
const form = document.getElementById("add-task-form");
const addtask = document.getElementById("add-task-input");
const todotask_el = document.getElementById("todo-tasks");
form.addEventListener('submit', (e) => {
e.preventDefault();
const taskvalue = addtask.value;
if (!taskvalue) {
alert("please fill out the task");
} else {
todotask_el.classList.add("add-task-wrap");
const list_input_box_el = document.createElement("div");
list_input_box_el.classList.add("list-input-box");
const input_filed_element = document.createElement("input");
input_filed_element.type = "text";
input_filed_element.classList.add("input-filed");
input_filed_element.setAttribute("readonly", "readonly");
input_filed_element.value = taskvalue;
const edit_el = document.createElement("button");
edit_el.classList.add("btn-sub");
edit_el.innerHTML = "edit";
const delete_el = document.createElement("button");
delete_el.classList.add("btn-sub");
delete_el.innerHTML = "delete";
list_input_box_el.appendChild(input_filed_element);
list_input_box_el.appendChild(edit_el);
list_input_box_el.appendChild(delete_el);
todotask_el.appendChild(list_input_box_el);
addtask.value = "";
edit_el.addEventListener("click", () => {
if (edit_el.innerHTML == "edit") {
edit_el.innerHTML = "save";
input_filed_element.removeAttribute("readonly");
input_filed_element.focus();
} else {
input_filed_element.setAttribute("readonly", "readonly");
edit_el.innerHTML = "edit";
}
});
delete_el.addEventListener("click", () => {
todotask_el.removeChild(list_input_box_el);
})
}
})
})
Post a Comment