"Crear un Tracker de Cursos con Vue.js"

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

Armar un simple "tracker" de cursos, que permita calcular y registrar la cantidad cursos de Platzi tomados y obtener la suma de las horas invertidas en tu educacion.

Haz fork de este CodePen para obtener la estructura basica del proyecto:

Consideraciones de los ejercicios

La aplicación debe cumplir los siguientes lineamientos:
- Un propiedad courses que sea un array y permita almacenar la lista de cursos.
- Tener una propiedad title y otra time que se usean para agregar un nuevo curso a la lista, estas propiedades deben estar enlazados a los inputs usando v-model.
- Un boton con un metodo addCourse (enlazado con v-on) que permita agregar un nuevo courso usando los valores de title y time.
- Una propiedad computada totalTime que recorra toda la lista de cursos y retorne la suma del tiempo invertido en educacion.
- Mostrar la lista de cursos tomados, con el titulo de los mismos y las horas de cada uno usando v-for.
- Mostrar el total de horas con totalTime, en caso que no existan cursos se debe mostrar un mensaje indicandolo.

Solución

"Crear un Tracker de Cursos con Vue.js"

Curso Básico de Vue.js 2

Clase 14 de 38

Clase 14 / 38

Samuel Montoya Gallo

Hace 4 años

Hola, soy muy malo con el diseño, sin embargo aquí mi solución:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PracticeOne</title>
    <link rel="stylesheet" href="./styles.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div id="app" class="container mt-5">
      <h1 class="text-center">{{ title }}</h2>
      <div class="container d-flex">
        <input 
        class="col-7"
          type="text"
          placeholder="Name of the course..."
          v-model="newCourse"
        />
        <input
        class="col-4" type="number" placeholder="Time" v-model="newTime" />
        <button @click="addCourse" class="btn btn-secondary">Add</button>
      </div>

      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Course Name</th>
            <th scope="col">Time</th>
          </tr>
        </thead>
        <tbody v-for="(course, i) in courses" :key="i">
          <tr>
            <th scope="row">{{ i + 1 }}</th>
            <td>{{ course.name }}</td>
            <td>{{ course.time }}</td>
          </tr>
        </tbody>
        <tfoot>
          <td colspan="3" class="text-center" v-if="courses.length === 0">
            You haven't studied yet
          </td>
          <td colspan="3" class="text-center" v-else>
            You have studied for {{ totalTime }}h
          </td>
        </tfoot>
      </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
  </body>
</html>

new Vue({
  el: "#app",
  name: "practiceOne",
  data() {
    return {
      title: "Courses List",
      courses: [],
      newCourse: null,
      newTime: null,
    };
  },
  methods: {
    addCourse() {
      this.courses.push({ name: this.newCourse, time: this.newTime });
      this.newCourse = null;
      this.newTime = null;
    },
  },
  computed: {
    totalTime(){
      var tiempoCalc = 0;
      for (i=0; i<this.courses.length; i++) {
        tiempoCalc += parseInt(this.courses[i].time)
      }
      
      return tiempoCalc
    }
  },
});

Comentarios (346)346 comentarios

Daniel Bretado Reyes

Hace 6 años

Repositorio: https://github.com/daniektj/Reto-01-Curso-Basico-de-Vue.js Link del Proyecto: https://daniektj.github.io/Reto-01-Curso-Basico-de-Vue.js/

Francisco González Nava

Hace 5 años

Te quedó cool! :+1:

Miguel Angel Reyes Moreno

Qué chula interfaz :)

Wandy Rafael Santana Evangelista

Hola Devs: -Les traigo algo maravilloso, pueden checar el proyecto que he realizado y colaborar en cualquier cosa que deseen mejorar. -Tambien les invito a participar de la dinamica, y es que vayan al repositorio, coloquen su nombre en el array de students en el archivo JS y haganme un Pull Request, asi estaran dentro de la lista de estudiantes que forman parte de la comunidad, aceptare todos los pull request, te espero. [Puedes acceder desde tu dispositivo movil, es responsive] Link del repositorio: Click Aqui Link del proyecto en produccion: Click Aqui

Recuerda, #NuncaParesDeAprender 💚

Matías Daniel Cravero

Excelente!

Johan Garzon

Buena iniciativa! Hice un aporte. :)

Alejandro Mejia Escobar

Adapte un poco mucho la idea de la lista e hice un ayudante para listas de mercado.

Jhonny Lincol Quispe Navarro

Hace 7 años

Me costo 😅... pero lo conseguí 😁

Juan Esteban Galvis

Listo! tuve cierta dificultad con la parte de totalTime pero este es el resultado:

Repositorio: https://github.com/JuanesGalvis/FirstPage_VueJS

¿Tu problema con totalTime también era que lo trataba como string en vez de entero? jaja

Daniel Hidalgo

Les comparto mi proyecto: https://codepen.io/hidalgutzu/project/editor/AEvxgx

Giuliano Marinella

muy bueno el estilo de neumorphism, has seguido alguna guia para hacerlo?

Federico Walovnik

Les comparto como lo resolvi yo! https://codepen.io/federicowalovnik/pen/rNWOMgO

Juan Pablo Jimenez

Reto cumplido!!

Abdiel Ortega

Les dejo el enlace a mi solución.

Keven Mauricio Chaparro Benavides

Hola, les comparto mi solución... cambie algo en los estilos. Les agradezco cualquier comentario. Gracias!

https://codepen.io/kevcb1988/pen/povdZPd

Christian Humberto

te falto una validacion para que cuando sea vacio el curso y las horas 0 no lo agregue

Jesus Antonio Chacon Rodriguez

Hola, Reto cumplido. Los estilos de botones e inputs use Boostrap. Link

Manuel Ojeda

https://codepen.io/darkjeda/pen/qBBvXZV

Ameth Ordoñez Erazo

Casi todos tuvimos el problema que concatenaba el totalTime en vez de sumarlo 😂. Pero que bueno que ya sabemos cómo resolverlo con parseInt() 😎

Jesús Romero Rivera

Chicos qué tal!, este es mi intento del reto, espero que les guste :D Repositorio: Link Link del proyecto: Link

Cristian Iñiguez

Ejercicio completado: https://codepen.io/cristianiniguez/pen/bGBprZa?editors=1010

deberias agregar una validacion para evitar que cuando este vacio el nombre del curso no lo deje guardar.. los keys se van a repetir

Edgar Yesid Rodríguez Valbuena

Noé Muñoz

¡Ejercicio Resuelto! Codepen Imagen Previa:

Platzi Team

Hola, Aquí les dejo mi solución y le agregué un poquito de CSS porque ¿Por qué no? #frontendlifestyle 🔥

Emanuel Toro

Gracias por el aporte, estuve revisando un poco y fijate el error de consola en la propiedad totalTime y un pequeño error en los estilos del button. Es muy didáctico comparar las diferentes soluciones. Saludos!

Oscar Eduardo Rodríguez Largaespada

Mi solucion al modulo: Aqui

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

"Crear un Tracker de Cursos con Vue.js"