m2-front-end-101/s9-s10-dom/to-do-app/index.html

<!DOCTYPE html>
<html lang="es-cl">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Lista de tareas pendientes</title>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
			crossorigin="anonymous"
		/>
		<link rel="stylesheet" href="assets/css/style.css" />
	</head>
	<body class="container">
		<div class="container text-center mt-4">
			<h3>Lista de tareas pendientes 👇</h3>
		</div>

		<div class="container">
      <div class="my-3 text-center">
        <button type="button" class="btn btn-success" id="addTasksBtn">
          Agregar tarea
        </button>
      </div>

			

      <div class="my-3"></div>

			<div id="tasksForm" class="hidden border border-3 rounded p-3">
				<form action="">
					<div class="mb-3">
						<input type="text" class="form-control" id="newTaskInput" placeholder="Escribe tu tarea en mente 😙"/>
					</div>
					<div class="mb-3">
						<button type="button" class="btn btn-primary" id="addSingleTaskBtn">Agregar</button>
					</div>
				</form>
			</div>
		</div>

		<div class="container mt-4">
			<table class="table" id="tasksTable">
				<thead>
					<tr>
						<th scope="col">Tarea</th>
						<th scope="col">Finalizar</th>
						<th scope="col">Eliminar</th>
					</tr>
				</thead>

				<tbody id="tasksTableBody">
				</tbody>
			</table>
		</div>

		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
			crossorigin="anonymous"
		></script>
		<script src="assets/js/script.js"></script>
	</body>
</html>