How to Create Todo List with HTML,CSS
and JavaScript
Today you will figure out How to Make Schedule Application in HTML CSS and JavaScript. This undertaking will assist with supporting your insight and give you a few better thoughts for making this sort of plan for the day application.
Schedules are the work that you need to do or you need to do. Also, the plan for the day application is where you can keep your daily agendas. You can track down this sort of use on a cell phone.
View the given picture of our venture schedule application, as you can see on the picture there is an information field to compose your task.
Video Tutorial of Creating Todo List
I have given all the HTML CSS and JavaScript code that I have used to make this Plan for the day Application, prior to getting the source code record, I would be really glad to momentarily clear up the given video instructional exercise of this For Truly do Rundown Application.
As you have found in the video instructional exercise Plan for the day Application. From the get go, there was an information field with a dim line and a dark symbol, lower part of it there was a pointer text which shows we have no errand to do and erase all button to erase which was in crippled status. At the point when I center info field its line tone and symbol variety change into blues.
Create Todo List [Source Codes]
To Create Todo List with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Todo List </title>
- <link rel="stylesheet" href="style.css">
- <link
- rel="stylesheet"
- href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
- </head>
- <body>
- <div class="container">
- <div class="input-field">
- <textarea placeholder="Enter your new todo"></textarea>
- <i class="uil uil-notes note-icon"></i>
- </div>
- <ul class="todoLists"></ul>
- <div class="pending-tasks">
- <span
- >You have <span class="pending-num"> no </span> tasks pending.</span>
- <button class="clear-button">Clear All</button>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: "Open Sans", sans-serif;
- }
- body {
- background-color: #282A35;
- }
- ::-webkit-scrollbar {
- width: 6px;
- }
-
- ::-webkit-scrollbar-track {
- background: #f2f2f2;
- }
-
- ::-webkit-scrollbar-thumb {
- border-radius: 8px;
- background: #ccc;
- }
-
- ::-webkit-scrollbar-thumb:hover {
- background: #aaa;
- }
-
- .container {
- position: relative;
- max-width: 550px;
- width: 100%;
- border-radius: 8px;
- padding: 30px;
- margin: 85px auto 0;
- background-color: #a9a9a9;
- }
- .container .input-field {
- position: relative;
- height: 60px;
- width: 100%;
- }
- .input-field textarea {
- height: 100%;
- width: 100%;
- outline: none;
- font-size: 18px;
- font-weight: 400;
- border-radius: 8px;
- padding: 18px 45px 18px 15px;
- border: 1px solid #ccc;
- resize: none;
- }
- .input-field textarea:focus {
- border-color: #4070f4;
- }
- textarea::-webkit-scrollbar {
- display: none;
- }
- .input-field .note-icon {
- position: absolute;
- top: 50%;
- right: 15px;
- transform: translateY(-50%);
- pointer-events: none;
- font-size: 24px;
- color: #707070;
- }
- .input-field textarea:focus ~ .note-icon {
- color: #4070f4;
- }
- .container .todoLists {
- max-height: 380px;
- overflow-y: auto;
- padding-right: 10px;
- }
- .todoLists .list {
- display: flex;
- align-items: center;
- list-style: none;
- background-color: #f1f1f1;
- padding: 20px 15px;
- border-radius: 8px;
- margin-top: 10px;
- position: relative;
- cursor: pointer;
- }
- .todoLists .list input {
- height: 16px;
- min-width: 16px;
- accent-color: #4070f4;
- pointer-events: none;
- }
- .todoLists .list .task {
- margin: 0 30px 0 15px;
- word-break: break-all;
- }
- .list input:checked ~ .task {
- text-decoration: line-through;
- }
- .todoLists .list i {
- position: absolute;
- top: 50%;
- right: 15px;
- transform: translateY(-50%);
- font-size: 20px;
- color: #707070;
- padding: 5px;
- opacity: 0.6;
- display: none;
- }
- .todoLists .list:hover i {
- display: inline-flex;
- }
- .todoLists .list i:hover {
- opacity: 1;
- }
- .container .pending-tasks {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 25px;
- }
- .pending-tasks span {
- color: #333;
- }
- .pending-tasks .clear-button {
- padding: 6px 12px;
- outline: none;
- border: none;
- background: #785BF8;
- color: #fff;
- font-size: 15px;
- border-radius: 4px;
- cursor: pointer;
- pointer-events: none;
- white-space: nowrap;
- }
- .clear-button:hover {
- background-color: #0e4bf1;
- }
- @media screen and (max-width: 350px) {
- .container {
- padding: 25px 10px;
- }
- }
-
Now paste the following codes into your script.js file
- const inputField = document.querySelector(".input-field textarea"),
- todoLists = document.querySelector(".todoLists"),
- pendingNum = document.querySelector(".pending-num"),
- clearButton = document.querySelector(".clear-button");
- function allTasks() {
- let tasks = document.querySelectorAll(".pending");
-
- pendingNum.textContent = tasks.length === 0 ? "no" : tasks.length;
-
- let allLists = document.querySelectorAll(".list");
- if (allLists.length > 0) {
- todoLists.style.marginTop = "20px";
- clearButton.style.pointerEvents = "auto";
- return;
- }
- todoLists.style.marginTop = "0px";
- clearButton.style.pointerEvents = "none";
- }
-
- inputField.addEventListener("keyup", (e) => {
- let inputVal = inputField.value.trim();
- if (e.key === "Enter" && inputVal.length > 0) {
- let liTag = ` <li class="list pending" onclick="handleStatus(this)">
- <input type="checkbox" />
- <span class="task">${inputVal}</span>
- <i class="uil uil-trash" onclick="deleteTask(this)"></i>
- </li>`;
-
- todoLists.insertAdjacentHTML("beforeend", liTag);
- inputField.value = "";
- allTasks();
- }
- });
-
- function handleStatus(e) {
- const checkbox = e.querySelector("input");
- checkbox.checked = checkbox.checked ? false : true;
- e.classList.toggle("pending");
- allTasks();
- }
-
- function deleteTask(e) {
- e.parentElement.remove(); //getting parent element and remove it
- allTasks();
- }
-
- clearButton.addEventListener("click", () => {
- todoLists.innerHTML = "";
- allTasks();
- });
-
If you face any difficulties while creating Todo List or your code is not working as expected, you can download the source code files by clicking download button.