KorigamiK · November 2, 2022 01:24
diff --git a/todo-list.html b/todo-list.html
 <!DOCTYPE html>

 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        font-family: "Courier New", Courier, monospace;
      }

      footer {
        position: static;
        width: 100%;
        text-align: center;
        text-decoration: none;
        margin-top: 1rem;
      }

      footer a {
        text-decoration: none;
      }

      .todo-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-top: 1rem;
      }

      .todo-list ul {
        list-style: none;
        padding: 0;
        align-items: center;
      }

      .todo-list li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        max-width: 500px;
        min-width: 300px;
        margin: 0.5rem;
        padding: 10px;
        border: 1px solid black;
        border-radius: 5px;
      }

      .todo-list li button {
        border: none;
        background-color: transparent;
        cursor: pointer;
      }

      .todo-list li button:hover {
        color: red;
      }

      .todo-list li button {
        margin-left: 0.5rem;
      }

      .todo-list li button:hover {
        cursor: pointer;
        color: red;
      }
    </style>
    <title>Todo List</title>
  </head>
  <body>
    <main class="todo-list">
      <h1>Todo List</h1>

      <form class="new-todo__form" action="/new-todo" method="POST">
        <input type="text" name="todo" placeholder="New Todo" />
        <button type="submit">Add Todo</button>
      </form>

      <ul>
        <li>
          <span>Learn Node.js</span>
          <button>Delete</button>
        </li>
      </ul>
    </main>

    <footer>
      &copy; 2022 - 2023
      <a target="_blank" href="https://github.com/KorigamiK">KorigamiK</a>
    </footer>

    <script type="text/javascript">
      const deleteButtons = document.querySelectorAll(".todo-list li button");

      deleteButtons.forEach((button) => {
        button.addEventListener("click", (event) => {
          event.target.parentElement.remove();
        });
      });

      const todoList = document.querySelector(".todo-list > ul");

      const addTodo = (todo) => {
        const todoItem = document.createElement("li");
        const todoText = document.createElement("span");
        todoText.innerText = todo;

        const deleteButton = document.createElement("button");
        deleteButton.innerText = "Delete";

        deleteButton.addEventListener("click", (e) =>
          e.target.parentElement.remove()
        );

        todoItem.appendChild(todoText);
        todoItem.appendChild(deleteButton);

        todoList.appendChild(todoItem);
      };

      const newTodoForm = document.querySelector(".new-todo__form");

      newTodoForm.addEventListener("submit", (event) => {
        event.preventDefault();

        const formData = new FormData(event.target);
        const todo = formData.get("todo");
        todo.length ? addTodo(todo) : alert("Please enter a todo");

        event.target.reset();
      });

      addTodo("Learn React");
    </script>
  </body>
 </html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
	body {
	font-family: "Courier New", Courier, monospace;
	}

	footer {
	position: static;
	width: 100%;
	text-align: center;
	text-decoration: none;
	margin-top: 1rem;
	}

	footer a {
	text-decoration: none;
	}

	.todo-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	margin-top: 1rem;
	}

	.todo-list ul {
	list-style: none;
	padding: 0;
	align-items: center;
	}

	.todo-list li {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 500px;
	min-width: 300px;
	margin: 0.5rem;
	padding: 10px;
	border: 1px solid black;
	border-radius: 5px;
	}

	.todo-list li button {
	border: none;
	background-color: transparent;
	cursor: pointer;
	}

	.todo-list li button:hover {
	color: red;
	}

	.todo-list li button {
	margin-left: 0.5rem;
	}

	.todo-list li button:hover {
	cursor: pointer;
	color: red;
	}
	</style>
	<title>Todo List</title>
	</head>
	<body>
	<main class="todo-list">
	<h1>Todo List</h1>

	<form class="new-todo__form" action="/new-todo" method="POST">
	<input type="text" name="todo" placeholder="New Todo" />
	<button type="submit">Add Todo</button>
	</form>

	<ul>
	<li>
	<span>Learn Node.js</span>
	<button>Delete</button>
	</li>
	</ul>
	</main>

	<footer>
	© 2022 - 2023
	<a target="_blank" href="https://github.com/KorigamiK">KorigamiK</a>
	</footer>

	<script type="text/javascript">
	const deleteButtons = document.querySelectorAll(".todo-list li button");

	deleteButtons.forEach((button) => {
	button.addEventListener("click", (event) => {
	event.target.parentElement.remove();
	});
	});

	const todoList = document.querySelector(".todo-list > ul");

	const addTodo = (todo) => {
	const todoItem = document.createElement("li");
	const todoText = document.createElement("span");
	todoText.innerText = todo;

	const deleteButton = document.createElement("button");
	deleteButton.innerText = "Delete";

	deleteButton.addEventListener("click", (e) =>
	e.target.parentElement.remove()
	);

	todoItem.appendChild(todoText);
	todoItem.appendChild(deleteButton);

	todoList.appendChild(todoItem);
	};

	const newTodoForm = document.querySelector(".new-todo__form");

	newTodoForm.addEventListener("submit", (event) => {
	event.preventDefault();

	const formData = new FormData(event.target);
	const todo = formData.get("todo");
	todo.length ? addTodo(todo) : alert("Please enter a todo");

	event.target.reset();
	});

	addTodo("Learn React");
	</script>
	</body>
	</html>