<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #fff;
}
.container {
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
}
input[type="text"] {
width: calc(100% - 100px);
padding: 0.8rem;
border-radius: 8px;
border: none;
outline: none;
font-size: 1rem;
margin-right: 1rem;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
button {
box-sizing: border-box;
padding: 0.8rem 1rem;
border-radius: 8px;
border: none;
background: #ff6b6b;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
height: 43px;
padding-top: 13px;
display: flex;
gap: 5px;
}
button:hover {
background: #ff4757;
}
.todo {
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
margin-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, background 0.3s;
}
.todo:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.3);
}
.task {
flex: 1;
font-size: 1rem;
}
.delete {
cursor: pointer;
transition: transform 0.2s, color 0.3s;
}
.delete:hover {
transform: scale(1.1);
color: #ff4757;
}
svg {
fill: currentColor;
}
#header {
position: relative;
left: 20px;
}
#mains {
width: 100%;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<h1 id="header">Task Management App</h1>
<div id="mains">
<input type="text" placeholder="Enter a new task">
<button><span>Add</span> <span>Task</span></button>
</div>
<div id="task-list"></div>
</div>
<script>
var inputs = document.querySelector('input');
var btn = document.querySelector('button');
var taskList = document.getElementById('task-list');
var task = [];
var localstoragedata = localStorage.getItem("task array");
if (localstoragedata !== null) {
var ogdata = JSON.parse(localstoragedata);
task = ogdata;
maketodo();
}
btn.addEventListener("click", function () {
var query = inputs.value;
inputs.value = "";
if (query.trim() === "") {
alert("no value entered");
throw new Error("empty input field error");
}
var taskObj = {
id: Date.now(),
text: query
};
task.push(taskObj);
localStorage.setItem("task array", JSON.stringify(task));
maketodo();
});
function maketodo() {
taskList.innerHTML = "";
for (var i = 0; i < task.length; i++) {
var _a = task[i], id = _a.id, text = _a.text;
var element = document.createElement('div');
element.innerHTML = "\n <span class=\"task\">".concat(text, "</span>\n <span class=\"delete\">\n <svg xmlns=\"https://www.w3.org/2000/svg%5C" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n <path d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM13.4142 13.9997L15.182 15.7675L13.7678 17.1817L12 15.4139L10.2322 17.1817L8.81802 15.7675L10.5858 13.9997L8.81802 12.232L10.2322 10.8178L12 12.5855L13.7678 10.8178L15.182 12.232L13.4142 13.9997ZM9 4V6H15V4H9Z\"></path>\n </svg>\n </span>\n ");
// Handle the delete button click event
var delbtn = element.querySelector('.delete');
delbtn.addEventListener("click", function () {
// Remove the task from the array based on its ID
var filteredarray = task.filter(function (taskobj) { return taskobj.id !== id; });
task = filteredarray;
localStorage.setItem("task array", JSON.stringify(task));
taskList.removeChild(element);
});
element.classList.add('todo');
taskList.appendChild(element);
}
}
</script>
</body>
</html>