anisur3036/Todo.html

## Todo.html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>JavaScript Basic</title>
</head>

<body>
	<div class="container">
		<p>Add Shopping list</p>
		<input type="text" name="todo"><button>+</button>
		<ol class="todo-list"></ol>
	</div>

	<script>
		const input = document.querySelector('input');
		const btn = document.querySelector('button');
		const todoList = document.querySelector('.todo-list');

		btn.addEventListener('click', e => {
			let newItem = document.createElement('li');
			// console.log(e);
			newItem.textContent = input.value;
			input.value = '';
			todoList.appendChild(newItem);

			newItem.addEventListener('click', e => {
				newItem.style.textDecoration = 'line-through';
			})

			newItem.addEventListener('dblclick', e => {
				todoList.removeChild(newItem);
			})
		})

	</script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>JavaScript Basic</title>
	</head>

	<body>
	<div class="container">
	<p>Add Shopping list</p>
	<input type="text" name="todo"><button>+</button>
	<ol class="todo-list"></ol>
	</div>

	<script>
	const input = document.querySelector('input');
	const btn = document.querySelector('button');
	const todoList = document.querySelector('.todo-list');

	btn.addEventListener('click', e => {
	let newItem = document.createElement('li');
	// console.log(e);
	newItem.textContent = input.value;
	input.value = '';
	todoList.appendChild(newItem);

	newItem.addEventListener('click', e => {
	newItem.style.textDecoration = 'line-through';
	})

	newItem.addEventListener('dblclick', e => {
	todoList.removeChild(newItem);
	})
	})

	</script>
	</body>

	</html>