✅ Aplicación Web Encuesta y mostrar resultados en Grafico con Chart JS HTML CSS JavaScript
Summary
TLDREste script de video ofrece una guía paso a paso para utilizar Chart.js, una librería de JavaScript para crear gráficos. Se muestra cómo configurar el proyecto, incluir la librería y desarrollar una interfaz de usuario básica con botones para votar por diferentes equipos de fútbol. El script incluye el uso de HTML, CSS y JavaScript para construir la aplicación y la manipulación de datos con arrays y el almacenamiento local (localStorage) para mantener el conteo de votos entre sesiones. El objetivo es permitir a los usuarios votar por su equipo favorito y visualizar los resultados en tiempo real en una gráfica dinámica.
Takeaways
- 😀 Se presenta una nueva librería de JavaScript llamada Chart.js para crear gráficos.
- 📊 La librería Chart.js ofrece una amplia variedad de tipos de gráficos, incluyendo barras, líneas, burbujas, combo, dona y radar.
- 🌐 Se puede encontrar información detallada y ejemplos en la página oficial de Chart.js.
- 📝 Se crea un proyecto básico con archivos HTML y JavaScript para utilizar Chart.js.
- 📚 Se incluyen en el HTML referencias a la CDN de Chart.js para el CSS y JavaScript.
- 🎨 Se diseña una interfaz de usuario con botones y un título para la encuesta de equipos de fútbol.
- 📈 Se utiliza el elemento canvas para dibujar la gráfica dentro de la aplicación.
- 🔢 Se establecen los parámetros de configuración y los datos para la gráfica, incluyendo colores y etiquetas.
- 🏆 Se implementa una funcionalidad que permite votar por equipos y actualizar dinámicamente la gráfica.
- 💾 Los votos se almacenan en el local storage para mantener el estado de la votación incluso después de cerrar la aplicación.
- 🔄 Se puede cambiar el tipo de gráfica mostrada sin problemas, gracias a la configuración modular de Chart.js.
Q & A
¿Qué es Chart.js y para qué se utiliza?
-Chart.js es una librería de JavaScript diseñada para crear gráficos y visualizaciones de datos en cualquier tipo de proyecto web.
¿Qué tipos de gráficos se pueden crear con Chart.js según el script?
-Se pueden crear gráficos de barras, líneas, burbujas, combos, dona, radar y otros tipos de gráficos con Chart.js.
¿Cómo se inicia un proyecto para crear una gráfica con Chart.js según el video?
-Se inicia creando una carpeta para el proyecto, archivos HTML y JS, y luego se estructura la página HTML con la inclusión de la CDN de Chart.js.
¿Qué etiquetas HTML se utilizan para estructurar la página web del ejemplo del video?
-Se utilizan etiquetas como <html>, <head>, <body>, <h1>, <button> y <canvas> para estructurar la página web del ejemplo.
¿Qué función tienen los botones en la interfaz del proyecto mostrado en el video?
-Los botones permiten a los usuarios votar por diferentes equipos de fútbol, lo que afecta dinámicamente los datos mostrados en la gráfica.
¿Cómo se agregan los estilos CSS para personalizar los elementos de la interfaz?
-Se agregan los estilos CSS directamente en un archivo .css o dentro de una etiqueta <style> en el HTML, personalizando elementos como los botones y el canvas.
¿Qué es el canvas y cómo se relaciona con la gráfica en Chart.js?
-El canvas es un elemento HTML donde se dibuja la gráfica utilizando Chart.js, actuando como el lienzo sobre el cual se renderiza la visualización.
¿Cómo se configura la gráfica en Chart.js según lo explicado en el video?
-Se configura la gráfica en Chart.js mediante un objeto de configuración que incluye el tipo de gráfica, los datos, las opciones de responsividad, la posición de las leyendas, el título y otros parámetros.
¿Qué es la función 'votar' y cómo se relaciona con la interacción del usuario?
-La función 'votar' es un callback que se ejecuta cuando un usuario hace clic en un botón para votar. Esta función actualiza los datos de la gráfica en función del voto del usuario.
¿Cómo se almacenan los votos en el ejemplo del video y cómo se recuperan?
-Los votos se almacenan en el localStorage del navegador web utilizando JSON para serializar los datos. Se recuperan mediante la función localStorage.getItem('votos') y se parsean para actualizar la gráfica.
¿Cómo se actualiza la gráfica en función de los votos del usuario?
-La gráfica se actualiza mediante la función Chart.update() o similares de Chart.js, que se llama después de que cambian los datos de votos para reflejar los cambios visualmente.
Outlines
😀 Introducción a Chart.js
El primer párrafo presenta una introducción a una librería de JavaScript llamada Chart.js, utilizada para crear gráficos de diferentes tipos. Se mencionan ejemplos de gráficas como barras, líneas, burbujas y radar, y se habla sobre la creación de un proyecto básico que incluye un archivo HTML y un archivo JavaScript. Se describe el proceso de agregar la librería Chart.js a través de una CDN y se comienza a construir la interfaz de usuario con un título y un botón.
🛠️ Configuración de la Interfaz y Estilos
En el segundo párrafo, se continúa con la configuración de la interfaz de usuario, agregando botones con diferentes clases para representar a equipos de fútbol y se le da estilos CSS para que tengan un tamaño específico. Luego, se describe el proceso de agregar un elemento canvas donde se dibujará la gráfica y se le asigna un estilo. Se menciona la idea de que los usuarios puedan votar por un equipo y ver la gráfica actualizada en tiempo real según los votos.
📊 Creación de la Gráfica con Chart.js
El tercer párrafo se enfoca en la creación de la gráfica utilizando Chart.js. Se explica cómo tomar el control del elemento canvas y se detalla el proceso de configuración de la gráfica, incluyendo el tipo de gráfica, los datos, la posición de las leyendas y el título. Se proporciona un ejemplo de código para configurar la gráfica y se personalizan los colores y las etiquetas de los datos para representar a diferentes equipos de fútbol.
⚽️ Implementación de la Funcionalidad de Votación
En el cuarto párrafo, se implementa la funcionalidad de votación. Se crea un array para almacenar los votos de cada equipo y se describe cómo se inicializan en cero. Se crea una función llamada 'votar' que recibe un número de equipo como parámetro y actualiza el array de votos. Se utiliza el almacenamiento local (local storage) para guardar los votos y se explica cómo se recuperan y actualizan los votos en la aplicación.
🔄 Recuperación y Actualización de votos
El quinto párrafo trata sobre la recuperación y actualización de votos. Se describe cómo se verifica si la variable de votos existe en el local storage y cómo se crea si no existe. Se implementa la función para contar los votos por equipo y se utiliza el método 'map' para recorrer el array de votos y contarlos. Se menciona cómo se podría haber guardado el nombre del equipo en lugar de números para contar los votos de forma más significativa.
🎨 Personalización y Conservación del Estado de la Aplicación
Finalmente, en el sexto párrafo, se discute la personalización de la gráfica y cómo se puede cambiar el tipo de gráfica utilizando Chart.js. Se menciona la funcionalidad de conservar el estado de la aplicación en el local storage, lo que permite que los votos se mantengan incluso después de cerrar y volver a abrir la aplicación. Se da un ejemplo de cómo se pueden recuperar los votos y actualizar la gráfica una vez que se vuelve a cargar la aplicación.
Mindmap
Keywords
💡Chart.js
💡Gráficos
💡Votación
💡HTML
💡CSS
💡JavaScript
💡Canvas
💡Local Storage
💡Botones
💡Dinámico
Highlights
Introducción a la librería Chart.js para crear gráficos en JavaScript.
Demostración de diferentes tipos de gráficos como barras, líneas, burbujas y radar en la página de ejemplos de Chart.js.
Creación del proyecto y archivos HTML y JS para integrar Chart.js.
Inclusión de la CDN de Chart.js en el archivo HTML para facilitar la implementación.
Diseño de la interfaz HTML con encabezado y botones para votación de equipos de fútbol.
Uso de estilos CSS para personalizar los botones de votación.
Adición de un canvas en HTML donde se dibujará el gráfico.
Selección de un ejemplo de gráfico de tipo 'polar area' para adaptar a la aplicación.
Configuración del objeto 'chart' con el elemento canvas y la configuración de Chart.js.
Personalización de los datos del gráfico, reemplazando los valores aleatorios por datos específicos de equipos.
Implementación de la interacción dinámica: votos a través de botones que afectan al gráfico en tiempo real.
Uso de 'localStorage' para guardar y recuperar votos a través de sesiones del navegador.
Creación de una función 'votar' que actualiza el arreglo de votos y refleja el cambio en el gráfico.
Manejo de errores y validaciones en la función de votación para garantizar la integridad de los datos.
Actualización del gráfico según los votos recopilados y su representación gráfica.
Cambio de visualización del gráfico a 'barra horizontal' y otros tipos desde Chart.js.
Persistencia de los votos a través de la utilización de 'localStorage', manteniendo el estado después de cerrar el navegador.
Conclusión del tutorial y resumen de los pasos para crear una aplicación de votación con gráficos dinámicos utilizando Chart.js.
Transcripts
00:01hola que tal bienvenidos a este nuevo
00:03vídeo donde vamos a aprender a utilizar
00:05una librería de javascript se llama
00:07chats
00:08pronuncio bien se llama chart chart js
00:12es esta librería que es esta su página
00:16oficial dice es chart js que es
00:18precisamente para realizar gráficas
00:22gráficas en pues pues cualquier tipo de
00:26gráfico aquí vamos a ver algunos
00:27ejemplos en esta página de samples hay
00:30gráficas de barras por ejemplo
00:32vamos a ver es cómo está esto es una
00:34gráfica de barras
00:36de líneas de interpolación de líneas y
00:40otras como puede ser de burbujas combo
00:46como de dona la mira este se ve
00:49interesante
00:50multi serie spy este ese país
00:54éste se colara área hay diferentes por
00:58lara arias entrado con punto bueno radar
01:03no graficar tipo radar
01:06y bueno hay diferentes tipos de gráficas
01:08que se pueden hacer con esta con esta
01:11librería de javascript
01:13pues básicamente vamos a hacer un
01:15ejemplo con ésta
01:17aquí en la página pues vienen varios
01:19ejemplos entonces vamos a reutilizar
01:20algunas
01:21para esto más vamos a hacer un ejemplo
01:23básico entonces es para esto vamos a
01:25crear aquí yo tengo una carpeta aquí en
01:28el escritorio que se llama proyecto
01:31y voy a crear
01:33pues unos archivos que vais el index
01:36html
01:39junto a html
01:41y voy a crear una cima
01:44js
01:46en el html vamos a empezar con la
01:49estructura de telecinco
01:52le vamos a poner encuesta al no perdona
01:56es acá
01:58impuesta
01:59a esta página le vamos a agregar el
02:01vuestra industria para
02:05pero lo vamos a ganar desde la cbn
02:07entonces vamos a ver aquí en
02:10instalar y nos da que la cdn que es el
02:15el css y acá está el lleva escribirnos
02:18copiamos este no lo llevamos aquí y aquí
02:21lo pegamos start
02:23y está él
02:26el css y vamos a traer el javascript que
02:30sería este
02:31para reutilizarlos
02:34ahí está
02:37bueno ahora aquí vamos a agregarse
02:40la librería de charts charts
02:44entonces se le dice iniciar instalación
02:46y tenemos esta opción de utilizar la
02:48acdn de charts de la librería nos vamos
02:52a utilizar la que se nos apunta
02:56está
02:58esta versión no dice aquí copiar
03:00descripta entonces copiamos este
03:03esta es la que vamos a utilizar me
03:06parece que sí
03:08vamos a pegar aquí abajo de este
03:12pegamos y aquí abajo vamos a agregar el
03:15scripts rc
03:19el script se rece
03:24js
03:25ok
03:27entonces vamos creando la interfaz ya
03:29tenemos todos los archivos necesarios
03:30que es el cssd gusta el jsd mostrar en
03:34la librería de charts
03:37y me apunto jota dice que sería este
03:39archivo donde voy a programar qué es lo
03:41que va a hacer la encuesta para eso
03:43vamos a crear una etiqueta centre y
03:46vamos a crear un título vamos a llamar
03:49y encuesta
03:51en cuesta y aquí lo que vamos a hacer es
03:53voy a hacerlo para acá y vamos a abrirlo
03:56directamente con line servers para que
03:58se ve el resultado
04:00pero ahí me lo está abriendo con el
04:03porte determinado entonces
04:07no me gusta esa parte
04:10miembro a través de servers
04:16bueno lo voy a cambiar nada más voy a
04:18copiar la url y luego a pasar aquí
04:22esta encuesta a google chrome entonces
04:26vamos a poner una línea horizontal aquí
04:29y esta y ahora vamos a colocar una
04:32pregunta algo poner aquí una pregunta
04:35con un h4
04:38cual
04:41cuál es el equipo más grande
04:46más crear de darle vista
04:49ahí está y vamos a poner abajo
04:51[Música]
04:52vr y vamos a poner un botón
04:57button y vamos a poner cada américa
05:00y vamos a poner acento americano está y
05:05vamos a poner un class aquí vamos a
05:07utilizar el gustar ptn btn
05:10warning
05:12y esta no sale el américa con el botón
05:15ningún salto de línea
05:18vamos a colocar otro botón
05:21y vamos a poner un class
05:23vtn btn de angers
05:27rangers y lomas con el chivas
05:33y bueno aquí lo vamos a poner una
05:35separación con un margen margin
05:39margin top de 2 ya se separó
05:44ok vamos a poner los saltos de línea
05:48y aquí vamos a unir para colocar otro
05:51botón y otro botón este va a ser
05:56bray marín
05:58y vamos a ponerle cruz azul
06:02cruz azul
06:05y vamos a poner otro botón le vamos a
06:07dar el sussex porque no hay otro color
06:09que sea
06:10y vamos a poner pumas
06:13que están ahí están los botones y
06:17aquí podemos agregar un poco de ccs
06:22para mí digamos que ocupen un cierto
06:25tamaño
06:27los botones pero los vamos a cejar si a
06:30ver vamos a agregarle un pequeño css
06:31aquí
06:35a quién
06:37no está ahí
06:39botón
06:42y un weeds
06:45de hecho no lo va a ser aquí mejor lugar
06:49lo voy a agregar aquí directamente
06:51dentro del proyecto lo vamos a poner
06:54estilos puntos css
06:57vamos a ver
07:01y vamos a agregar que el archivo
07:06aquí con links el etiquetar link
07:10y vamos a ponerle estilos css que están
07:14aquí agregamos button
07:17y luego no son bits de 400 píxeles
07:21ahí está y así quedarían los botones
07:25ok y acá abajo vamos a poner la gráfica
07:29y vamos a poner una chica
07:32484
07:34gráfica
07:36gráfica ahí está la gráfica y siento
07:39gráfica
07:41y ahora dentro de esa gráfica vamos a
07:43abajo vamos a poner un canvas un canvas
07:46que es donde se va a dibujar
07:52aquí es donde se va a dibujar el dibujo
07:55el bueno la gráfica que le vamos a poner
07:57link
07:58gráfica
08:00está ahí no se ve pero ahí está entonces
08:03también este le vamos a poner estilo de
08:04una vez
08:06canvas
08:07rosa de león with the wall 400 píxeles
08:11400 píxeles
08:14y basado en border
08:17de 2 píxeles
08:19solid
08:21sólido
08:25a esta ahí se ve perfectamente vamos a
08:27verle también un cake
08:30en 400 píxeles y hasta ahí se ve
08:35bueno creo que fue demasiado 400 300 ahí
08:39se ve ahí ahí se va a dibujar la gráfica
08:41la gráfica que hagamos entonces la idea
08:44es que aquí yo seleccionen un botón de
08:46estos y vote por el equipo y la gráfica
08:49se vamos viviendo de acuerdo al por el
08:52equipo que voy votando
08:54entonces bueno de aquí ya vamos a acabar
08:57chats
08:59y vamos a decir samples y yo elijo uno
09:03el icono de estos tipos de gráficas y en
09:06este caso elegí donde dice otros arts y
09:09voy a elegir la de país
09:12o directamente podemos elegir aquí uno
09:15de los ejemplos que te dice al inicio al
09:18inicio te muestra un ejemplo aquí y este
09:21es el que podemos utilizar
09:24pero podemos ir directamente a samples y
09:27yo voy a agarrar el que dice país
09:30aquí este quiero mi gráfica cómo está
09:32entonces hay dos códigos muy importantes
09:34de unos el setup y otro es el conflicto
09:36voy a copiar el código como está aquí
09:38está el ejemplo y nos vamos a la punto
09:41cota ese y vamos a pegar lo vamos acá
09:45y el confín lo copiamos y lo pegamos
09:49y vamos a analizar bueno aquí ya está
09:51este código
09:53pero hay que pasarle hay que pasarle el
09:55control d
09:57de este elemento que es el canvas para
09:59esto
10:00vamos a crear un código que nos permita
10:03tomar el control de ese elemento
10:05entonces vamos a llamar aquí
10:08para mí
10:10chart
10:12char es igual a 1
10:14[Música]
10:15charts
10:17y lo vamos a pasar los siguientes
10:18parámetros y vamos a pasar el elemento
10:21del canvas que esto como en cómputo
10:23document punto cuál es el lector y el
10:26elemento canvas se llama tiene lady
10:28gráfica entonces lo vamos a pasar ese
10:30elemento voy a hacer un poquito para acá
10:33está libre de creel a la aplicación
10:37entonces que lo vamos a pasar a esta
10:39gráfica
10:41como segundo parámetro recibe la
10:43configuración la variable de
10:44configuración que sería en esta variable
10:47que será config aquí viene el tipo de
10:50gráfica los datos que va a graficar si
10:53responsivo si la posición de las
10:56leyendas es arriba el título se utiliza
10:59un título y si quieres que el título se
11:00muestre y cuál va a ser el texto que va
11:02a mostrar ahí y acá en la data que es el
11:07parámetro que también recibe la
11:08configuración el that los datos los
11:10datos se vienen las etiquetas de los
11:14de los parámetros a graficar y los datos
11:16el 'label es data set 1 y los datos los
11:21saqqaq y otros de una función que se
11:22llama de forma aleatoria pero no tiene
11:24datos entonces esto lo vamos a sustituir
11:25nosotros por datos
11:28son aquí tiene cinco parámetros uno dos
11:31tres cuatro cinco parámetros entonces
11:34vamos a pasar diez valores cinco valores
11:36perdón sin puntos con 3 5 6 7 8 y 9
11:40lo vamos a sustituir porque nosotros no
11:42tenemos la función útiles y aquí si
11:44tiene cinco parámetros entonces voy a
11:47borrarlo de acá porque acá este esta
11:50constante genera un número aleatorio
11:51ahorita no lo queremos entonces tampoco
11:54esto lo queremos y aquí me dice los
11:56colores también de forma digamos los
11:59genera de forma aleatoria me imagino que
12:00con esta función pero nosotros los vamos
12:03a asignar aquí de por nombre por ejemplo
12:06puedo poner red
12:08así como vienen los colores de arriba
12:10red orange
12:13ahora en qué
12:17bueno
12:18hello
12:20y luego sería green
12:25green y por tanto una y acá sería blue
12:32y bien ya sé graficaron esto es así como
12:36lo tenemos ya ese gráfico
12:38con los valores que tenemos si nosotros
12:40movemos estos valores por ejemplo que yo
12:42le pongo no sé al red le pongo 15 la
12:46gráfica se mueve y la red adquiere un
12:48valor de 15 el bloom 9 tal como lo estoy
12:52poniendo aquí 9 green 8 y el lowe 7
12:56ahora en 6 y sin cambio alguno de estos
12:59valores por ejemplo quiero cambiar el
13:01blues sería el valor de 9 y lo podía
13:03poner no sé de 30 lo guardo y ya
13:06directamente se está graficando el valor
13:07de 30 a y así sería y aquí podemos ver
13:10en nuestro título de la gráfica que
13:11sería charles by charles yo quiero poner
13:14el aquí lo puedo poner en mi caso voy a
13:17ponerle mejor
13:21por equipo de méxico equipo de fútbol es
13:24así
13:27o bueno el equipo más grande equipo de
13:30fútbol
13:32más grande y más
13:36ok esta ya se pone el título y bueno lo
13:40que tenemos que cambiar nosotros es pues
13:42esta connotación aquí vamos a ponerle
13:45por ejemplo para amarillo en vez de
13:47amarillo yo quiero que sea américa
13:50aquí en rojo va a ser las chivas
13:54ahora no tengo horas pero vamos a poner
13:57por ejemplo un azul sería el cruz azul
14:00el cruz azul
14:03y el green serían los los pumas o más
14:07pero aquí dije chivas / vamos a ponerle
14:11más
14:14entonces cruz azul y el orange es el
14:16tubo quitar porque no tengo ninguno que
14:18sea orange entonces voy a quitar este y
14:21quito uno de los valores que sería para
14:23que sean 44 etiquetas 4 valores y 4 aquí
14:29y ahí tenemos el color respectivo por
14:31ejemplo chivas es el rojo y chivas me
14:34faltó una s chivas
14:39rojo amarilla el américa el amarillo o
14:41más el verde y cruz azul el azul ya está
14:45así funciona la gráfica ahora lo que
14:47vamos a hacer es dinámico que vamos a
14:49hacer que cuando le damos clic a un
14:51botón quiero que los valores primero
14:54inician en cero y después conforme yo
14:57vaya votando vaya votando este esta
15:00gráfica vaya modificando se de acuerdo
15:02al botox que lleva cada cada equipo para
15:06esto vamos a crear hasta arriba hasta
15:09arriba una raid vamos a crear primero un
15:12array que tengamos con el en homs
15:16contar votos
15:19botox este va a ser un arreglo y va a
15:21inicializar en 0
15:240,000
15:26nuestros valores el primero vamos va a
15:29sumar los votos del américa
15:33bueno aquí aquí los debería de poner
15:35exactamente en el orden que aparecen
15:36aquí américa chivas cruz azul voy a
15:39poder cambiar acá américa
15:42chivas
15:45aquí voy a cambiar esto
15:50cruz azul y pumas así en ese mismo orden
15:53américa chivas cruz azul y pumas ok
15:57entonces iría
16:03están
16:05hielo red
16:09bloom sería aquí
16:13y
16:15entonces se irían en ese orden para que
16:19coincida con los colores que tenemos de
16:20los botones en ese orden
16:22ok una vez que tenemos esto ahora vamos
16:25a crear una función a los botones vamos
16:27a llamarle
16:29un clic
16:32con clic y le vamos a poner votar
16:36y aquí le voy a poner que el votar aquí
16:38por él por ejemplo le vamos a poner un
16:41número
16:43que sea por ejemplo 1
16:47qué es el equipo 1
16:51votar por el equipo 2 y aquí sería
16:54cortar por el equipo 3 y así luego poner
16:582 3 y 4 es decir crear una función que
17:02se llame votar y que reciba como
17:04parámetro un número que sería el número
17:05de equipo por el que esté votando
17:07entonces vamos a crear que la función
17:09tendría que ser después de esto es lo
17:11que tenemos y nos vamos a ponerle cons
17:13votar
17:15y vamos a poner una función así y ver la
17:20fichita aquí está empezando a fallar
17:21porque también mi función y aquí le va a
17:24poner
17:25equipo no
17:27entonces me va a dar un número este
17:30número es el que estamos diciendo que es
17:32el número de equipo que vamos a votar
17:35yo acá arriba cresta está esta función
17:38el puente en este arreglo que guarda
17:40quiero que aquí guarde los votos del
17:42américa acá guarde los
17:45cuente los votos de la american de las
17:48chivas del cruz azul y pumas
17:51quiero guardarlos en local storage local
17:55storage
17:57los voy a abordar pues para esto primero
17:59voy a preguntar
18:03si el equipo es diferente de nulo es
18:07decir que sea
18:09el equipo bueno que el equipo que parece
18:11está pasando aquí el valor de equipo sea
18:14uno o dos o tres pero también puede ser
18:17vacío entonces el primer lo voy a
18:19validar y después vamos a con aquí vamos
18:23a crear la variable por primera vez que
18:24llaman votos y la vamos a obtener del
18:26local storage aunque no lo hemos
18:28guardado pero sin embargo la vamos a
18:30obtener
18:31por primera vez local storage get it en
18:35y le vamos a llamar votos
18:40aunque esta y vamos a dar vamos a
18:43utilizar jason punto parce para
18:45convertirlo porque es de un arreglo
18:46vamos a convertir en formato a este
18:50formato ok
18:53en si no tenemos guardar los datos pero
18:56vamos a tener este es un arreglo
18:59pero ese arreglo no ahorita no notamos
19:01creado pero sin un cambio ahorita lo
19:03vamos a crear de este lado también
19:06vamos a es decir yo voy a crear una
19:08variable que se debe llamar votos
19:12es una variable que va a guardar los
19:15votos
19:17digamos que he obtenido la américa y las
19:20chivas el cruz azul y pumas pero primero
19:22tenemos que saber si existe esa variable
19:26existe botox
19:28adelante
19:30y si no existen
19:32necesitamos que cree
19:35una breve votos pero con un arreglo
19:37vacío ahorita lo van a ver es primero
19:40por ejemplo que la aplicación vamos a
19:42darle clic derecho inspeccionar y aquí
19:45nos tenemos que ir a una parte que dice
19:46application lo cual local de storage y
19:49aquí pueden ver que no tenemos ninguna
19:50variable creada ni con ningún valor y
19:52ahorita lo vamos a crear
19:54la vamos a crear con esto
19:56vamos a poner local storage punto set
20:02y vamos a decir que se llama botox
20:06y le vamos a pasar como tal un arreglo
20:08vacío pero en formato jason
20:12así de esta forma con un arreglo vacío
20:16lo guardamos y cuando lo guardamos y
20:18cargado nuevamente la aplicación como no
20:21está creado esa variable la variable
20:23votos como no hay ningún parámetro
20:24guardado al intentar yo recuperar desde
20:28local storage la variable votos y que no
20:30existe
20:33aquí este y les decimos que aquí es
20:35cuándo
20:36existen esta variable
20:41en los lectores
20:43el local store ag
20:49cuando existe lo que no existe
20:52quiero que la crea cuando no existen
20:59crea
21:01la variable
21:05crea la variable votos entonces ya lo
21:07pueden ver aquí que crearon la variable
21:08votos pero con un arreglo vacio no tiene
21:10ningún valor
21:11entonces lo vamos a dejar así por
21:13mientras ya la tenemos creada y aquí lo
21:16recuperamos nuevamente aquí para
21:17recuperar pues un arreglo vación y
21:20entonces quiero que botox sea un arreglo
21:21y después si alguien vota por un equipo
21:24quiero que es el valor de ese equipo se
21:27agregue al arreglo con votos punto puig
21:32vamos a ponerle y le vamos a poner que
21:35quiero que guarden
21:37quiero que guardes el número de equipo
21:39por el que bote
21:40bueno el equipo y aquí lo vamos a poner
21:44aquí que como lo estoy pasando como
21:47parámetro 1
21:50bueno si lo vamos a dejar así como 12
21:53vamos a dejarles es decir si voto por
21:56equipo por 1 sería el equipo américa por
21:5812 equipos chivas por 13 cruce sol y 4
22:01sería pumas
22:03ok ya que lo que tenemos así lo vamos a
22:06reasignar a la variable local store con
22:08puntos
22:10haití y le pasamos qué
22:14perdón que se mueva así pero es que
22:16también declaró votos
22:20y le pasamos el arreglo votos pero van a
22:23notar que ya cuando tengamos así se van
22:25a ir agregando aquí valores de 1
22:27dependiendo por cuál selección
22:29entonces ya está
22:32y aquí vamos a agregar el contador de
22:36votos contar votos
22:41bueno a ver contar votos vamos a ponerle
22:46y equipo
22:49- 1
22:52más más esto lo que va a hacer es sumar
22:56a este arreglo en la posición 0 vamos a
22:59sumar los votos del equipo américa en la
23:01posición 1 va a sumar los votos del
23:03equipo chivas en la posición 2 va a
23:05sumar los votos del equipo cruz azul y
23:07en la posición 3 vamos a tomar los votos
23:10del equipo pumas entonces ahorita vamos
23:12a hacer pero quiero que vean que lo que
23:14pasa
23:15ahí no pasa nada pero cuando le doy
23:17votar
23:19bueno aquí ya me marcó un error me dice
23:22nos puede propiedades en la línea 46
23:2646
23:28vamos a ver votos votos
23:34nos faltaba
23:39ok nos faltaba agregar esta parte de
23:41aquí jason string fi y agregarle
23:43comillas aquí aquí y al de acá lo estaba
23:47dejando así 5 millas por estar
23:48referenciando referencia al a la
23:50variable votos que estamos abordando
23:51aquí entonces vamos a guardarlo
23:53nuevamente bueno voy a eliminar esta que
23:56está marcando error
23:57y vamos a guardar que está ahí se cree
24:00una raíz ahora si votamos por américa se
24:04debe guardar 1 si votamos por chivas
24:06debe abordar 2 cruz azul 3 pumas y se
24:10regresa a votar por américa va a bordar
24:1111 y entonces lo que yo quiero es que
24:14este este variable votos me va guardando
24:16los votos por de cada uno de estos
24:19equipos no por ejemplo 2 2 va guardando
24:21ahí los votos del equipo
24:23y después yo quiero recorrer recuperar
24:25esta variable recorrerla y contarlo
24:28cuántas veces se votó por el equipo uno
24:30que sea américa cuántos por el equipo
24:32dos cuántas por el equipo tres y cuántos
24:34por el equipo cuatro eso lo vamos a
24:36recuperar en él
24:38en este caso con la variable votos por
24:41don contar votos que es una raíz
24:42entonces para eso
24:45vamos a recorrer votos con una función
24:48map
24:50y vamos a poner cada elemento es un ítem
24:53bueno parte de elemento es un botón
24:57un voto de equipo y vamos a ponerle
25:00contar
25:02botox quiere que cuenten los votos de
25:07del equipo voto
25:09menos uno más más lo voy a ir contando y
25:14ya lo va a ir pasando entonces contar
25:16votos va va a tener digamos un arreglo
25:20muy parecido a este con la cantidad de
25:22votos que existe en cada equipo entonces
25:24le voy a pasar aquí con en vez de datos
25:25lo componer contar votos creo que para
25:29el caso de canarias no sería necesario
25:30hacer esto la verdad nos a ponerle y
25:33vamos a ver si funciona entonces vamos a
25:35ver
25:38y se iba contando los votos si va
25:39contando los votos y para efectos
25:41prácticos vamos a poner que cada que
25:43cuenten quiero con un con sol punto loc
25:48vamos a imprimir
25:51la variable
25:53juntarse
25:55bueno lo vamos a hacer desde acá
26:00contar votos vamos a hacer que imprima
26:02acá
26:08no existan estaba correcto acá
26:14ok
26:18o que lo dejamos así
26:20está perfecto ya que nos vamos a agregar
26:23una función que va a ser el nombre del
26:24chart
26:27sears.com plate
26:31aunque esta ahora vamos a probar a ver
26:34si funciona
26:37en teoría que los votos y cuánto
26:39contados en el américa tiene
26:43123456789
26:45ahora vamos a ver aquí cuando tiene
26:47nueve el equipo de chivas tiene 123
26:50tiene 3 el equipo de cruz azul tiene 1 y
26:54el equipo de pumas en 1 ahora creo que
26:56ya funciona entonces vamos a ver si si
26:58es cierto
27:01si le doy a américa vuelve a subir si le
27:03doy chivas sube sube si le doy a
27:05procesar sube sube pumas también y así
27:09se van moviendo se van desplazando los
27:10valores de cada uno de estos y nada más
27:12para resaltar bueno podemos ver acá de
27:15este lado podemos cambiar de gráfica por
27:17ejemplo me gustó mucho por la horaria
27:19y aquí simplemente con que yo agarré
27:22tome este nombre
27:24y lo pegue camps
27:26puedo cambiar el tipo de gráfica que se
27:29va a poner aquí en esta polar área por
27:32ejemplo puedo buscar otra había otra que
27:34es esta
27:35también el nombre el tipo del nombre de
27:38este lo pegó acá y ya se hace la gráfica
27:41así como está y entonces podemos cambiar
27:44de gráfica sin problema y llena más
27:47imprimirá los datos y vean aquí algo
27:49interesante es que si yo cierro esta
27:51aplicación vamos a copiar la realidad
27:54cierro la aplicación es más cierra el
27:56navegador
27:57vuelvo a abrir el navegador
27:58pego
28:00los resultados se quedan exactamente
28:01dónde iban
28:03porque porque se están almacenando en el
28:05local storage así quedaría la aplicación
28:08esté nada más para actualizar la gráfica
28:11este es para imprimirlos lo bueno ir
28:14contando los votos
28:16en caso de que
28:18estés para recuperar los votos y
28:21contarlos nuevamente cuando nosotros
28:23cerramos el navegador yo vamos a
28:25abrirnos recuperando los de los votos
28:27del directamente local storage y vuelve
28:29a ser un reconteo de los votos ya que
28:31esta variable siempre se está raíz
28:33siempre inicia en cero pero siempre
28:35queremos que nos vuelva a recuperar los
28:37dos votos en cuanto a si va los vuelva a
28:39contar y para contarlos pues bien aquí
28:42está en la raíz de ahí está la raíz de
28:44los votos miren ahí se ve aquí también
28:46en lugar de números pude haber guardado
28:48el nombre del equipo
28:51y aquí en vez de contar pues podríamos
28:53haber contado los
28:56pues bueno cuántas veces decía américa
28:58cuántas veces cruz azul cuántas veces
28:59chivas y cuántas veces pumas y bueno así
29:02quedaría esta aplicación muy rápido
29:04espero que te ha gustado y nos vemos el
29:07siguiente vídeo
Browse More Related Video
Implementa gráficos muy rápido con Chart Js y Javascript
Plotly: visualización de datos sencilla y muy potente
[MOOC] - Apps para dispositivos móviles (ed. 2016) - iOS. Desarrollo de una App
Aprende a Programar tu Primera Calculadora Básica Paso a Paso | Java | NetBeans
Curso de Android con Java: Control Spinner con una lista de String
1. SWIFT - iOS 10 Español: Acceso a la cámara y al álbum
5.0 / 5 (0 votes)
