diff --git a/To-do-list/To-do-list.html b/To-do-list/To-do-list.html new file mode 100644 index 0000000..ed99f49 --- /dev/null +++ b/To-do-list/To-do-list.html @@ -0,0 +1,22 @@ + + + + + + Lista de Tareas + + + +
+

Lista de Tareas

+
+
+
+ + + +
+
+ + + diff --git a/To-do-list/to-do-list.css b/To-do-list/to-do-list.css new file mode 100644 index 0000000..9732a97 --- /dev/null +++ b/To-do-list/to-do-list.css @@ -0,0 +1,65 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f9; + margin: 0; + padding: 0; + text-align: center; +} + +#todo-app { + margin: 50px auto; + width: 300px; + padding: 20px; + background-color: white; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +#task-input { + width: 80%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + margin-bottom: 10px; +} + +#add-task-btn { + padding: 10px 20px; + background-color: #007acc; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#add-task-btn:hover { + background-color: #005fa3; +} + +#task-list { + list-style: none; + padding: 0; +} + +#task-list li { + background-color: #e3e3e3; + margin: 5px 0; + padding: 10px; + border-radius: 5px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.delete-btn { + background-color: #ff4d4d; + color: white; + border: none; + border-radius: 5px; + padding: 5px 10px; + cursor: pointer; +} + +.delete-btn:hover { + background-color: #d93636; +} diff --git a/To-do-list/to-do-list.js b/To-do-list/to-do-list.js new file mode 100644 index 0000000..3960f5e --- /dev/null +++ b/To-do-list/to-do-list.js @@ -0,0 +1,49 @@ +// Selección de elementos +const taskInput = document.getElementById("task-input"); +const addTaskBtn = document.getElementById("add-task-btn"); +const taskList = document.getElementById("task-list"); + +// Función para agregar una tarea +function addTask() { + const taskText = taskInput.value.trim(); // Elimina espacios en blanco + + if (taskText === "") { + alert("Escribe una tarea antes de agregarla."); + return; + } + + // Crear un elemento
  • + const taskItem = document.createElement("li"); + + // Añadir el texto de la tarea + taskItem.textContent = taskText; + + // Botón para eliminar la tarea + const deleteBtn = document.createElement("button"); + deleteBtn.textContent = "Eliminar"; + deleteBtn.classList.add("delete-btn"); + + // Evento para eliminar la tarea + deleteBtn.addEventListener("click", () => { + taskItem.remove(); + }); + + // Añadir el botón al
  • + taskItem.appendChild(deleteBtn); + + // Añadir el
  • al