"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

Comentarios

Daniel Bretado Reyes

student•

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

student•

Te quedó cool! :+1:

Miguel Angel Reyes Moreno

student•

Qué chula interfaz :)

Wandy Rafael Santana Evangelista

student•

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

student•

Excelente!

Johan Garzon

student•

Buena iniciativa! Hice un aporte. :)

Alejandro Mejia Escobar

student•

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

Jhonny Lincol Quispe Navarro

student•

Me costo 😅... pero lo conseguí 😁

Juan Esteban Galvis

student•

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

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

Miguel Angel Reyes Moreno

student•

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

Daniel Hidalgo

student•

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

Giuliano Marinella

student•

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

Federico Walovnik

student•

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

Juan Pablo Jimenez

student•

Reto cumplido!!

Abdiel Ortega

student•

Les dejo el enlace a mi solución.

Keven Mauricio Chaparro Benavides

student•

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

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

Christian Humberto

student•

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

Jesus Chacon

student•

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

Manuel Ojeda

student•

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

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

Ameth Ordoñez Erazo

student•

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

student•

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

Cristian Iñiguez

student•

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

Christian Humberto

student•

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

student•

Mi solución

Index.html

<!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>Reto 1</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div id="app">
        <h2>
          Mis Cursos de Platzi💚
        </h2>
          <p>
            <input type="text" v-model="title" placeholder="Titulo del curso"/>
          </p>
          <p>
            <input type="number" v-model.number="time" placeholder="Horas"/>
          </p>
          <p>
            <button v-on:click="addCourse">Guardar Curso</button>
          </p>
        </fieldset>
        <div>
          <h4>Lista de Cursos</h4>
          <p class="red" v-if="courses.length<1">Aun no has realizado cursos</p>
          <div v-if="courses.length>=1">
            <ol>
              <!-- Lista de cursos -->
              <li v-for="course in courses">
                  {{course.title}} : {{course.time}} {{course.time>1? 'horas':'hora'}}
              </li>
            </ol>
            <hr/>
            <p>
              Llevo <strong>{{ totalTime }}</strong> horas aprendiendo en Platzi.
              <b>#NuncaParesDeAprender 💚</b>
            </p>
          </div>
        </div>
      </div>
      <!--Librería VUE.JS-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

app.js

new Vue({
    el: '#app',
    
    data () {
      return {
        courses :[],
        title :"",
        time:0
      }
    },
    
    computed: {
        totalTime(){
            var suma = 0;
            var listCurses = this.courses
            for(var i = 0; i < listCurses.length; i++){
                var time = listCurses[i].time;
                suma += time;
            }
            return suma;
        }
    },
    
    methods: {
        addCourse(){
            if((this.time != "" &&this.time!= null)||this.time ===0){
                this.courses.push({title:this.title,time:this.time});
                this.title = "";
                this.time = 0;
            }else {
                swal({
                    text: "Dato invalido",
                    icon: "error",
                  });
            }
            
        }
    }
  })```

Noé Muñoz

student•

¡Ejercicio Resuelto! Codepen Imagen Previa:

Platzi Team

student•

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

Emanuel Toro

student•

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

student•

Mi solucion al modulo: Aqui

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

<!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>Reto 1</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div id="app">
        <h2>
          Mis Cursos de Platzi💚
        </h2>
          <p>
            <input type="text" v-model="title" placeholder="Titulo del curso"/>
          </p>
          <p>
            <input type="number" v-model.number="time" placeholder="Horas"/>
          </p>
          <p>
            <button v-on:click="addCourse">Guardar Curso</button>
          </p>
        </fieldset>
        <div>
          <h4>Lista de Cursos</h4>
          <p class="red" v-if="courses.length<1">Aun no has realizado cursos</p>
          <div v-if="courses.length>=1">
            <ol>
              <!-- Lista de cursos -->
              <li v-for="course in courses">
                  {{course.title}} : {{course.time}} {{course.time>1? 'horas':'hora'}}
              </li>
            </ol>
            <hr/>
            <p>
              Llevo <strong>{{ totalTime }}</strong> horas aprendiendo en Platzi.
              <b>#NuncaParesDeAprender 💚</b>
            </p>
          </div>
        </div>
      </div>
      <!--Librería VUE.JS-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

new Vue({
    el: '#app',
    
    data () {
      return {
        courses :[],
        title :"",
        time:0
      }
    },
    
    computed: {
        totalTime(){
            var suma = 0;
            var listCurses = this.courses
            for(var i = 0; i < listCurses.length; i++){
                var time = listCurses[i].time;
                suma += time;
            }
            return suma;
        }
    },
    
    methods: {
        addCourse(){
            if((this.time != "" &&this.time!= null)||this.time ===0){
                this.courses.push({title:this.title,time:this.time});
                this.title = "";
                this.time = 0;
            }else {
                swal({
                    text: "Dato invalido",
                    icon: "error",
                  });
            }
            
        }
    }
  })```

"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