"Crear un Tracker de Cursos con Vue.js"

Clase 14 de 38 • Curso Básico de Vue.js 2

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

Rendering Declarativo y Manipulacion de DOM

Tomar examen

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

Samuel Montoya Gallo

student•

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
    }
  },
});

Daniel Bretado Reyes

Francisco González Nava

Miguel Angel Reyes Moreno

Wandy Rafael Santana Evangelista

Matías Daniel Cravero

Johan Garzon

Alejandro Mejia Escobar

Jhonny Lincol Quispe Navarro

Juan Esteban Galvis

Daniel Hidalgo

Giuliano Marinella

Federico Walovnik

Juan Pablo Jimenez

Abdiel Ortega

Keven Mauricio Chaparro Benavides

Christian Humberto

Jesus Chacon

Manuel Ojeda

Ameth Ordoñez Erazo

Jesús Romero Rivera

Cristian Iñiguez

Edgar Yesid Rodríguez Valbuena

Noé Muñoz

Platzi Team

Emanuel Toro

Oscar Eduardo Rodríguez Largaespada

"Crear un Tracker de Cursos con Vue.js"

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