HTML Code
<div class="container">
<div id="newtask">
<input type="text" placeholder="Add Tasks">
<button id="push">Add</button>
</div>
<div id="tasks"></div>
</div>
SCSS Code
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background: #066acd;
}
.container{
width: 40%;
top: 50%;
left: 50%;
background: white;
border-radius: 10px;
min-width: 450px;
position: absolute;
min-height: 100px;
transform: translate(-50%,-50%);
}
#newtask{
position: relative;
padding: 30px 20px;
}
#newtask input{
width: 75%;
height: 45px;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
font-family: 'Poppins',sans-serif;
font-size: 15px;
border: 2px solid #d1d3d4;
}
#newtask input:focus{
outline: none;
border-color: #0d75ec;
}
#newtask button{
position: relative;
float: right;
font-weight: 500;
font-size: 16px;
background-color: #0d75ec;
border: none;
color: #ffffff;
cursor: pointer;
outline: none;
width: 20%;
height: 45px;
border-radius: 5px;
font-family: 'Poppins',sans-serif;
}
#tasks{
border-radius: 10px;
width: 100%;
position: relative;
background-color: #ffffff;
padding: 30px 20px;
margin-top: 10px;
}
.task{
border-radius: 5px;
align-items: center;
justify-content: space-between;
border: 1px solid #939697;
cursor: pointer;
background-color: #c5e1e6;
height: 50px;
margin-bottom: 8px;
padding: 5px 10px;
display: flex;
}
.task span{
font-family: 'Poppins',sans-serif;
font-size: 15px;
font-weight: 400;
}
.task button{
background-color: #6583e5;
color: #ffffff;
border: none;
cursor: pointer;
outline: none;
height: 100%;
width: 40px;
border-radius: 5px;
}
JavaScript Code
function todoList() {
var item = document.getElementById('todoInput').value
var text = document.createTextNode(item)
var newItem = document.createElement("li")
newItem.appendChild(text)
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";
newItem.appendChild(checkbox);
document.getElementById("todoList").appendChild(newItem)
}
document.querySelector('#push').onclick = function(){
if(document.querySelector('#newtask input').value.length == 0){
alert("Kindly Enter Task Name!!!!")
}
else{
document.querySelector('#tasks').innerHTML += `
<div class="task">
<span id="taskname">
${document.querySelector('#newtask input').value}
</span>
<button class="delete">
<i class="far fa-trash-alt"></i>
</button>
</div>
`;
var current_tasks = document.querySelectorAll(".delete");
for(var i=0; i<current_tasks.length; i++){
current_tasks[i].onclick = function(){
this.parentNode.remove();
}
}
}
}
Output
 |
| Todo List in HTML,CSS,JS |
Explanation
Line 1: We make a div that acts as a container for our to-do list.
Lines 2–5: We make a div for the new task in which the user writes the name of the task, and at the end, it has the “add” button.
Line 6: We create a div for the written tasks.
Lines 1–22: We add the styling for the container.
Lines 23–58: We add the styling for the tasks input field and the add “Task” button.
Lines 59–94: We add the styling for the tasks which we have added.
Lines 1–4: We write a function that states that if a user doesn’t enter any task and presses the “Add” button, then an alert message is generated which states that enter the task.
Lines 6–16: If the user enters a task, then we have to decide what to do with the task. We use the innerhtml to display all the information on the web page.
Lines 18–23: We add a “Delete” button which can be found after every task.
Wrapping Up
I hope you understood it. This Post was for "Todo List site using HTML,CSS and JS". Now you can using it for your school, College Project. This is Just a Basic Todo list project I will be bringing an Advance part also in future.
Till then you can make some Java Projects like these.