Ejercicios Vue.js proyecto lista de tareas básica

Descripción

Desarrolla una aplicación web de lista de tareas con Vue.js y TypeScript. La aplicación permitirá agregar, visualizar, completar y eliminar tareas, aplicando estilos con CSS y organizando el código en componentes.

Configura el proyecto: inicia un nuevo proyecto de Vue.js con TypeScript. Puedes utilizar la herramienta Vue CLI para generar la estructura básica del proyecto.
Crea el componente principal: en el componente principal de la aplicación (App.vue), define la estructura básica y establece un contenedor para la lista de tareas.
Diseña el modelo de datos: define una interfaz en TypeScript para representar una tarea.
Implementa la funcionalidad para agregar tareas:
- Crea un formulario que permita al usuario ingresar el título de una nueva tarea.
- Añade un método que, al enviar el formulario, agregue la nueva tarea al listado con un estado de "no completada".
Muestra la lista de tareas:
- Utiliza una lista (<ul>) para renderizar todos los elementos de tareas actuales.
- En cada elemento, muestra el título y botones para marcar como completada y eliminar.
Implementa la funcionalidad para marcar tareas como completadas:
- Añade un método que cambie el estado de completada al hacer clic en el botón correspondiente.
- Aplica estilos condicionales para diferenciar las tareas completadas (por ejemplo, texto tachado).
Implementa la funcionalidad para eliminar tareas:
- Añade un método que elimine la tarea seleccionada del listado.
Aplica estilos con CSS:
- Asegúrate de que la aplicación sea visualmente atractiva.
- Utiliza flexbox o grid para organizar los elementos.
- Asegura la adaptabilidad en diferentes dispositivos (diseño responsivo).
Organiza el código en componentes:
- Divide tu aplicación en componentes como ListaTareas.vue y Tarea.vue.
Prueba la aplicación: * Verifica que todas las funcionalidades funcionen correctamente. * Asegúrate de que no haya errores en la consola y que el código esté limpio y bien comentado.

Solución al ejercicio de programación en Vuejs

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en Vuejs para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en Vuejs

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a programar

Únete a miles de desarrolladores mejorando sus habilidades en Vuejs

⭐⭐⭐⭐⭐

4.9/5 valoración