En la búsqueda constante de herramientas que nos ayuden a mejorar nuestra organización y productividad, un software de lista de tareas se destaca por su simplicidad y eficacia. Desarrollado con tres archivos clave: index.html, script.js y style.css, este software proporciona una solución integral para la gestión de tareas diarias. A continuación, exploramos cómo puede ayudarte a llevar tu productividad al siguiente nivel.
Te recomiendo que revises mi blog entero, actualmente tengo más de 150 aplicaciones de libre distribución que te podrían servir, aplicaciones en PHP, Javascript, Python, Node JS, así como tutoriales sobre desarrollo web.
Vídeo Explicativo
Introducción
Las listas de tareas han demostrado ser herramientas efectivas para mejorar la productividad personal y profesional. Este software, diseñado con la simplicidad en mente, ofrece una forma intuitiva de gestionar tus tareas diarias, permitiéndote concentrarte en lo que realmente importa.
Demo del Sistema
https://configuroweb.github.io/lista-tareas-javascript/
Descripción del Software
El software se compone de tres archivos principales:
index.html: estructura la interfaz de usuario, presentando un diseño claro y accesible para añadir, visualizar y gestionar tareas.script.js: contiene la lógica del programa, permitiendo añadir nuevas tareas, marcarlas como completadas y eliminarlas, todo mientras se mantiene una persistencia de datos conlocalStorage.style.css: define el estilo visual del software, asegurando una experiencia de usuario agradable y una interfaz responsiva.
Cómo Funciona el Software de Lista de Tareas en JavaScript
El funcionamiento del software es intuitivo:
- Añadir Nuevas Tareas: Introduce una tarea y añádela a tu lista.
- Marcar Tareas como Completadas: Identifica las tareas que has completado.
- Eliminar Tareas: Elimina las tareas que ya no son necesarias.
La persistencia de datos mediante localStorage garantiza que tus tareas se mantengan actualizadas entre sesiones de navegación.
Archivos del Software
A continuación te comparto el código de la aplicación, a continuación te muestro el index.html
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Tareas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<h1>Lista de Tareas</h1>
<input type="text" id="newTask" placeholder="Añadir nueva tarea" />
<button onclick="addTask()">Añadir</button>
<div id="tasksList"></div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
function addTask() {
const taskInput = document.getElementById('newTask');
if (taskInput.value) {
tasks.push({ id: Date.now(), text: taskInput.value, completed: false });
taskInput.value = '';
renderTasks();
saveTasks();
}
}
function toggleTaskCompletion(taskId) {
const taskIndex = tasks.findIndex(task => task.id === taskId);
if (taskIndex !== -1) {
tasks[taskIndex].completed = !tasks[taskIndex].completed;
renderTasks();
saveTasks();
}
}
function deleteTask(taskId) {
tasks = tasks.filter(task => task.id !== taskId);
renderTasks();
saveTasks();
}
function renderTasks() {
const tasksList = document.getElementById('tasksList');
tasksList.innerHTML = '';
tasks.forEach(task => {
const taskElement = document.createElement('div');
taskElement.className = `task-item ${task.completed ? 'completed' : ''}`;
taskElement.innerHTML = `
<span>${task.text}</span>
<div>
<button onclick="toggleTaskCompletion(${task.id})">${task.completed ? 'Desmarcar' : 'Completar'}</button>
<button onclick="deleteTask(${task.id})">Eliminar</button>
</div>
`;
tasksList.appendChild(taskElement);
});
}
document.addEventListener('DOMContentLoaded', function() {
renderTasks();
const taskInput = document.getElementById('newTask');
taskInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
addTask();
}
});
});
style.css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
padding-top: 50px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
width: 90%;
max-width: 500px;
margin: auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input, button {
width: 100%;
padding: 10px;
margin: 5px 0;
box-sizing: border-box;
}
button {
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
}
button:hover {
background-color: #0056b3;
}
.task-item {
margin: 10px 0;
padding: 10px;
background-color: #f9f9f9;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px;
}
.task-item.completed {
text-decoration: line-through;
background-color: #e9ecef;
}
@media (max-width: 768px) {
body {
padding-top: 20px;
}
}
Beneficios de Usar Este Software
- Mejora de la Organización Personal: Gestiona tus tareas de manera eficiente.
- Interfaz Amigable: Fácil de usar, sin necesidad de instrucciones complicadas.
- Persistencia de Datos: Tus tareas se guardan entre sesiones.
- Accesibilidad y Responsividad: Gestiona tus tareas en cualquier dispositivo.
- Simplicidad y Enfoque: Concentración en las funcionalidades esenciales.
Repositorio del Proyecto
Invitación a Feedback y Comentarios
Te invitamos a probar este software de lista de tareas y compartir tus experiencias y sugerencias con nosotros. Tu feedback es crucial para seguir mejorando esta herramienta y adaptarla a las necesidades de los usuarios.
¡Gracias por leer! Esperamos que este software te sea útil en tu día a día, mejorando tu organización y productividad. No dudes en compartir tus comentarios con nosotros.
Para desarrollos a medida me puedes contactar en el siguiente enlace de contacto
