Make To-Do List With - HTML,CSS,JS source code
Creat To do list Using HTML,CSS,JS
Png Images -
Html source 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="todoApp">
<h2>To-Do List <img src="images/book_and_Pen.png" alt=""></h2>
<div class="row">
<input type="text " id="inputBox" placeholder="Add Your text">
<button onclick="addTask()">Add</button>
</div>
<div >
<ul id="list-container">
<!-- <li class="checked">Task 1</li>
<li>Task 2</li>
<li>Task 3</li> -->
</ul>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS source code --
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.container {
width: 100%;
min-height: 100vh;
background: linear-gradient(135deg , #153677, #4e085f);
padding: 10px;
}
.todoApp {
width: 100%;
max-width: 540px;
background-color: white;
margin: 100px auto 20px;
padding: 40px 30px 70px;
border-radius: 10px;
}
.todoApp h2 {
color: #002765;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.todoApp img {
width: 40px;
margin-left: 10px;
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
background: #edeef0;
border-radius: 30px;
padding-left: 20px;
margin-bottom: 25px;
}
.row input {
flex: 1;/* input box apne hisab se barabar space le lega apni widht set karke*/
border: none;
outline: none;
background: transparent;
padding: 10px;
}
.row 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;/*text select nhi hoga*/
font-size: 17px;
padding: 12px 8px 12px 50px;
user-select: none;
position: relative;
cursor: pointer;
}
ul li::before {
content: '';
position: absolute;
height: 28px;
width: 28px;
background-image: url(images/circle.png);
background-size: cover;
background-position: center;
top: 7px;
left: 8px;
cursor: pointer;
}
ul li.checked {
color: #555;
text-decoration: line-through;
}
ul li.checked::before {
background-image: url(images/check.png);
}
ul li span {
position: absolute;
right: 0px;
top: 5px;
width: 40px;
height: 40px;
font-size: 22px;
color: #555;
line-height: 40px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
ul li span:hover {
background: #edeef0;
}
JS source code --
// console.log("jai shree ram")
const input_box = document.getElementById("inputBox");
const listContainer = document.getElementById("list-container");
function addTask() {
if(input_box.value === ''){
alert("कुछ लिखो वत्स : - जय श्री राम 🚩");
}
else {
let li = document.createElement("li");
li.innerHTML = input_box.value;
listContainer.appendChild(li);
let span = document.createElement("span");
span.innerHTML = "\u00d7";//ye crose (x) icon ka code hai.
li.appendChild(span)
}
input_box.value = "";
saveData();
}
listContainer.addEventListener("click", function(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 showTask() {
listContainer.innerHTML = localStorage.getItem("data");
}
showTask();
टिप्पणियाँ
एक टिप्पणी भेजें