To-Do List Web App

[17AnuragMishra]

<link rel="stylesheet" href="todo.css" />

:root { --dark: #34222E; --darker: #1F2937; --darkest: #111827; --grey: #6B7280; --pink: #EC4899; --purple: #8B5CF6; --light: #EEE; }

• { margin: 10; box-sizing: border-box; font-family: "Fira sans", sans-serif; }

body { display: flex; flex-direction: grid; min-height: 100px; color: #FFF; background-color: var(--dark); }

header { padding: 2rem 1rem; max-width: 800px; width: 100%; margin: 0 auto; }

header h1{ font-size: 2.5rem; font-weight: 300; color: var(--grey); margin-bottom: 1rem; }

#new-plan-form { display: flex;; }

input, button { appearance: none; border: none; outline: none; background: none; }

#new-plan-input { flex: 1 1 0%; background-color: var(--darker); padding: 1rem; border-radius: 1rem; margin-right: 1rem; color: var(--light); font-size: 1.25rem; }

#new-plan-input::placeholder { color: var(--grey); }

#new-plan-submit { color: var(--pink); font-size: 1.25rem; font-weight: 700; background-image: linear-gradient(to right, var(--pink), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; cursor: pointer; transition: 0.4s; }

#new-plan-submit:hover { opacity: 0.8; }

#new-plan-submit:active { opacity: 0.6; }

main { flex: 1 1 0%; max-width: 800px; width: 100%; margin: 0 auto; }

.plan-list { padding: 1rem; }

.plan-list h2 { margin-top: 40px; font-size: 1.5rem; font-weight: 300; color: var(--grey); margin-bottom: 1rem; }

#plans .plan { display: flex; justify-content: space-between; background-color: var(--darkest); padding: 1rem; border-radius: 1rem; margin-bottom: 1rem; }

.plan .content { flex: 1 1 0%; }

.plan .content .text { color: var(--light); font-size: 1.125rem; width: 100%; display: block; transition: 0.4s; }

.plan .content .text:not(:read-only) { color: var(--pink); }

.plan .actions { display: flex; margin: 0 -0.5rem; }

.plan .actions button { cursor: pointer; margin: 0 0.5rem; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; transition: 0.4s; }

.plan .actions button:hover { opacity: 0.8; }

.plan .actions button:active { opacity: 0.6; }

.plan .actions .edit { background-image: linear-gradient(to right, var(--pink), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.plan .actions .delete { color: crimson; }

<header>
	<h1>To Do List </h1>
	<form id="new-plan-form">
		<input 
			type="text" 
			name="new-plan-input" 
			id="new-plan-input" 
			placeholder="What do you have planned?" />
		<input 
			type="submit"
			id="new-plan-submit" 
			value="Add plan" />
	</form>
</header>
<main>
	<section class="plan-list">
		<h2>Your Plans/Task</h2>

		<div id="plans">

			<div class="plan">
				<div class="content">
					<input 
						type="text" 
						class="text" 
						value="A new plan"
						readonly>
				</div>
				<div class="actions">
					<button class="edit">Edit</button>
					<button class="delete">Delete</button>
				</div>
			</div>

		</div>
	</section>
</main>

<script src="main.js"></script>
    window.addEventListener('load', () => {
const form = document.querySelector("#new-plan-form");
const input = document.querySelector("#new-plan-input");
const list_el = document.querySelector("#plans");

form.addEventListener('submit', (e) => {
	e.preventDefault();

	const plan = input.value;

	const plan_el = document.createElement('div');
	plan_el.classList.add('plan');

	const plan_content_el = document.createElement('div');
	plan_content_el.classList.add('content');

	plan_el.appendChild(plan_content_el);

	const plan_input_el = document.createElement('input');
	plan_input_el.classList.add('text');
	plan_input_el.type = 'text';
	plan_input_el.value = plan;
	plan_input_el.setAttribute('readonly', 'readonly');

	plan_content_el.appendChild(plan_input_el);

	const plan_actions_el = document.createElement('div');
	plan_actions_el.classList.add('actions');
	
	const plan_edit_el = document.createElement('button');
	plan_edit_el.classList.add('edit');
	plan_edit_el.innerText = 'Edit';

	const plan_delete_el = document.createElement('button');
	plan_delete_el.classList.add('delete');
	plan_delete_el.innerText = 'Delete';

	plan_actions_el.appendChild(plan_edit_el);
	plan_actions_el.appendChild(plan_delete_el);

	plan_el.appendChild(plan_actions_el);

	list_el.appendChild(plan_el);

	input.value = '';

	plan_edit_el.addEventListener('click', (e) => {
		if (plan_edit_el.innerText.toLowerCase() == "edit") {
			plan_edit_el.innerText = "Save";
			plan_input_el.removeAttribute("readonly");
			plan_input_el.focus();
		} else {
			plan_edit_el.innerText = "Edit";
			plan_input_el.setAttribute("readonly", "readonly");
		}
	});

	plan_delete_el.addEventListener('click', (e) => {
		list_el.removeChild(plan_el);
	});
});

});

[Milanrao98]

What is the issue in this?