Learning JS with Project is the best idea to enhance your learning.
Let's create a TO-DO List
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TO-DO List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="todo-app">
<h2>TO-DO-List<img src="images/icon.png" alt="todo-icon"></h2>
<div class="row">
<input type="text" placeholder="Add Task" id="input-box">
<button id="btn">Add</button>
</div>
<ul class="list-container"></ul>
</div>
</div>
</div>
<script src="srcipt.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Macondo&family=Tilt+Neon&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Macondo', cursive;
font-family: 'Tilt Neon', sans-serif;
}
.container{
width: 100%;
height: 100vh;
background: linear-gradient(140deg, rgb(132, 50, 132), rgb(213, 108, 125));
padding: 20px;
}
.todo-app{
width: 540px; /* width:100% */
max-height: 540px;
background-color:#c6d7eb;
margin: 100px auto 40px;
padding: 40px 30px 70px;
border-radius: 20px;
}
.todo-app h2{
color: #002765;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.todo-app img{
width: 30px;
margin-left: 20px;
}
.row{
display: flex;
align-items: center;
justify-content: space-between;
background: #edeef0;
padding-left: 20px;
border-radius: 30px;
margin-bottom: 25px;
}
input{
flex: 1;
border: none;
outline: none;
background: transparent;
padding: 10px;
font-weight: 16px;
}
button{
border: none;
outline:none;
padding: 16px 50px;
background: #ff5945;
color: #fff;
font-size: 16px;
cursor: pointer;
border-radius: 40px;
}
ul li{
list-style: none;
font-size: 17px;
padding: 12px 8px 12px 50px;
user-select: none;
cursor: pointer;
position: relative;
}
ul li::before{
content: '';
position: absolute;
height: 27px;
width: 27px;
background-image: url(images/unchecked.png);
background-size: cover;
background-position: center;
border-radius: 50%;
top: 12px;
left: 8px;
}
ul li.checked{
color: #555;
text-decoration: line-through;
}
ul li.checked::before{
background-image: url(images/checked.png);
}
ul li span{
position: absolute;
right: 0;
top: 5px;
width: 40px;
height: 40px;
font-size: 21px;
color: #555;
border-radius: 50%;
line-height: 40px;
text-align: center;
}
ul li span:hover{
background: #edeef0;
}
Javascript Code
const inputText = document.querySelector('#input-box');
const listContainer = document.querySelector('.list-container');
const button = document.querySelector('#btn');
button.addEventListener('click', () => {
if (inputText.value === '') {
alert('Please Enter Your Task to be added');
} else {
let li = document.createElement('li');
li.innerHTML = inputText.value;
listContainer.appendChild(li);
let span = document.createElement('span');
span.innerHTML = '\u00d7';
li.appendChild(span);
}
inputText.value = '';
saveData();
});
listContainer.addEventListener('click',(e)=>{
if(e.target.tagName === 'LI'){
e.target.classList.toggle('checked');
saveData();
}
else if(e.target.tagName === 'SPAN'){
e.target.parentElement.remove();
saveData();
}
},false);
function saveData(){
localStorage.setItem("data",listContainer.innerHTML);
}
function showData(){
listContainer.innerHTML = localStorage.getItem("data");
}
showData();
Twitter Post
Thank You 🙏🏻