Whoops! Added magic dust to make tasks disappear ✨🧹

48k483x · Feb 27, 2024 · 5cd2da8 · 5cd2da8
commit 5cd2da8
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 0 deletions.
diff --git a/checked.png b/checked.png
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="style.css">
+	<title>TO_DO</title>
+</head>
+<body>
+	<div class="container">
+		<div class="todo">
+			<h2>TO_DO APP <img src="/icon.png"> </h2>
+			<div class="row">
+				<input type="text" id="input" placeholder="Enter your task">
+				<button onclick="addTask()"  id="add">Add</button>
+			</div>
+			<ul id="task-container">
+				<!-- <li class="checked">Task 1 </li>
+				<li>Task 2 </li>
+				<li>Task 3 </li> -->
+			</ul>
+		</div>
+	</div>
+</body>
+<script src="index.js"></script>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,40 @@
+let inputVal = document.getElementById('input');
+let list = document.getElementById('task-container');
+
+
+addTask = () => {
+	if (inputVal.value === '') {
+		alert('Please enter a task');
+	}
+	else {
+		let li = document.createElement('li');
+		li.innerHTML = inputVal.value;
+		list.appendChild(li);
+		let span = document.createElement('span');
+		span.innerHTML = "\u00d7";
+		li.appendChild(span);
+		inputVal.value = '';
+		saveData();
+	}
+}
+
+list.addEventListener('click', (e) => {
+	if (e.target.tagName === 'LI') {
+		e.target.classList.toggle('checked');
+		saveData();
+	}
+	else if (e.target.tagName === 'SPAN') {
+		e.target.parentElement.style.display = 'none';
+		saveData();
+	}
+}, false);
+
+saveData = () => {
+	localStorage.setItem('data', list.innerHTML);
+}
+
+showTasks = () => {
+	list.innerHTML = localStorage.getItem('data');
+}
+
+showTasks();
diff --git a/style.css b/style.css
@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: 'Poppins', sans-serif;
+}
+
+.container {
+	width: 100%;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: rgb(2,0,36);
+	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(22,72,159,1) 46%, rgba(34,116,234,1) 100%, rgba(0,212,255,1) 100%); 
+}
+
+.todo {
+	max-width: 540px;
+	width: 100%;
+	height: auto;
+	background-color: #fff;
+	border-radius: 10px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+	padding: 40px 30px 70px;
+}
+
+.todo h2 {
+	font-weight: 800;
+	color: #333;
+	display : flex;
+	/* justify-content: center; */
+	margin-bottom: 20px;
+}
+
+.todo h2 img {
+	width: 30px;
+	margin-left: 10px;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background-color: #edeef0;
+	border-radius: 30px;
+	padding-left: 20px;
+	margin-right: 25px;
+}
+
+input {
+	flex: 1;
+	border: none;
+	outline: none;
+	background-color: transparent;
+	padding: 10px;
+}
+
+.row button {
+	padding: 16px 50px;
+	border: none;
+	outline: none;
+	border-radius: 30px;
+	background-color: #2d9cdb;
+	color: #fff;
+	font-weight: 900;
+	cursor: pointer;
+	font-size: 20px;
+}
+
+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: 28px;
+	width: 28px;
+	background-image: url(/unchecked.png);
+	background-size: cover;
+	background-position: center;
+	left: 8px;
+	top: 12px;
+}
+
+.checked {
+	text-decoration: line-through;
+	color: #ff0000;
+}
+
+ul li.checked::before {
+	background-image: url(/checked.png);
+}
+
+ul li span {
+	position: absolute;
+	right: 25px;
+	top: 5px;
+	width: 40px;
+	height: 40px;
+	font-size: 22px;
+	line-height: 40px;
+	text-align: center;
+	cursor: pointer;
+	color: #ff0000;
+}
+
+ul li span:hover {
+	background-color: #edeef0;
+	border-radius: 50%;
+}
diff --git a/unchecked.png b/unchecked.png