To Do List App In HTML
Hello everyone, I am the founder of Syiainfoku. Today in Syiainfoku you will learn how to create a To Do List App With Vanilla JavaScript.
To Do List App is also a JavaScript Mini Project, and very useful to train you, if you are just starting to learn JS. And many people suggest you to practice creating some Mini Projects JS so that you understand JS better.
Preview To Do List App
- There is a column to fill in your activity list
- "+" button
- Activities you haven't completed
- Activities you have completed
- There is a "Tick" button/icon and a "Trash" button/icon, if you have created a list of activities in the To Do List App
Source Code and Brief Explanation
To make this program [To Do List App with Vanilla JavaScript]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this To Do List App from the given download button.
First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.
<!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 app | hitoricoding</title>
<link rel="stylesheet" href="./assets/style.css">
<script src="https://kit.fontawesome.com/11aee9d162.js"></script>
</head>
<body>
<div class="container">
<div class="inputTask">
<input type="text" placeholder="Add a Task...">
<button><i class="fas fa-plus"></i></button>
</div>
<ol class="notCompleted">
<h2>Not Completed</h2>
</ol>
<ol class="Completed">
<h2>Completed</h2>
</ol>
</div>
<script src="./assets/main.js"></script>
</body>
</html>Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #0c1b30;
font-family: 'Roboto', sans-serif;
}
.container {
position: relative;
max-width: 800px;
padding: 10px;
margin: 0 auto;
}
.inputTask {
width: 100%;
display: flex;
margin-top: 50px;
padding: 10px 0;
}
.inputTask>input[type="text"] {
width: 90%;
color: #93a4dd;
border: none;
border-bottom: 2px solid #cacaca;
background: none;
font-size: 22px;
outline: none;
}
.inputTask button {
margin: 0 10px;
background: #333;
color: #cacaca;
font-size: 15px;
padding: 8px 15px;
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.inputTask button:hover {
background: rgb(83, 82, 82);
}
.notCompleted,
.Completed {
margin: 5px 0;
padding: 20px;
}
h2 {
letter-spacing: 1px;
font-size: 28px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
}
ol {
list-style: none;
counter-reset: counterKU;
}
ol li {
width: 100%;
padding: 18px;
margin: 5px 0;
background: #c03737;
font-size: 22px;
counter-increment: counterKU;
}
ol.Completed li {
background: #37c042;
}
ol li::before {
content: counter(counterKU);
background: #93a4dd;
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-block;
line-height: 30px;
text-align: center;
color: #463e3e;
margin-right: 8px;
}
li button {
color: #cacaca;
float: right;
padding: 5px;
font-size: 20px;
line-height: 20px;
margin-right: 15px;
background: none;
border: none;
outline: none;
cursor: pointer;
}
button i.fa-check:hover {
color: #59ec60;
}
button i.fa-trash:hover {
color: #eb6d6d;
}Finally, create a JS file with the name main.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.
let input = document.querySelector('input');
let btn = document.querySelector('.inputTask > button');
btn.addEventListener('click', addList);
input.addEventListener('keyup', (e) => {
(e.keyCode === 13 ? addList(e) : null);
});
function addList(e) {
let notCompleted = document.querySelector('.notCompleted');
let Completed = document.querySelector('.Completed');
let newLi = document.createElement('li');
let checkBtn = document.createElement('button');
let trashBtn = document.createElement('button');
checkBtn.innerHTML = '<i class="fa fa-check"></i>';
trashBtn.innerHTML = '<i class="fa fa-trash"></i>';
if (input.value !== '') {
newLi.textContent = input.value;
input.value = '';
notCompleted.appendChild(newLi);
newLi.appendChild(checkBtn);
newLi.appendChild(trashBtn);
}
checkBtn.addEventListener('click', function () {
let parent = this.parentNode;
parent.remove();
Completed.appendChild(parent);
checkBtn.style.display = 'none';
});
trashBtn.addEventListener('click', function () {
let parent = this.parentNode;
parent.remove();
});
}That's it, now you have successfully created a To Do List App with Vanilla JavaScript, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.
Closing
Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.
If you found this article useful, you can share it. That's all from me, and THANK YOU
Post a Comment