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.
- Utiliza una lista (
- Implementa la funcionalidad para marcar tareas como completadas:
- Añade un método que cambie el estado de
completadaal hacer clic en el botón correspondiente. - Aplica estilos condicionales para diferenciar las tareas completadas (por ejemplo, texto tachado).
- Añade un método que cambie el estado de
- 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.vueyTarea.vue.
- Divide tu aplicación en componentes como
- 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
Contenido bloqueado
¡Desbloquea la solución completa!
Completa el examen para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.
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
);
5
6
// Aplicar técnica de dos punteros
7
let
left
=
0
,
right
=
sorted
.
length
-
1
;
8
const
result
= [];
9
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
}
21
22
return
result
;
23
}
+1.200 developers han resuelto este ejercicio de programación
Practica con exámenes de Vuejs
Mejora tus habilidades con cientos de exámenes de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.
Retroalimentación
Aprende de tus errores
Progreso
Mide tu avance
Certificación
Valida tus habilidades
Únete a miles de desarrolladores mejorando sus habilidades
⭐⭐⭐⭐⭐
4.9/5 valoración