To-Do List Web App

[17AnuragMishra]

<title>To Do List</title>

<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);
	});
});

});