Diversión de Javascript: crear una aplicación de seguimiento en ejecución!

1. Te damos la bienvenida a la clase: Hola, bienvenidos a esta clase. Si eres un principiante de desarrollo web, vamos, así que solo salta, y construye algunos proyectos divertidos. Has venido al lugar correcto. La idea detrás de esta serie es mostrarte lo que puedes hacer con HTML, CSS, y JavaScript regulares. Cuando se trata de usar cualquier frameworks, cualquier boilerplate, cualquier librería, o cualquier plantilla, en su lugar, vamos a estar construyendo todo completamente desde cero, paso a paso para mostrarte cómo todas estas tecnologías gratuitas trabajar en conjunto. El proyecto para esta clase es una aplicación [inaudible] en ejecución, donde el usuario puede registrar cuántas millas han corrido cada día. Tenemos un campo de entrada en la parte superior, donde podemos registrar el número de millas y éstas se registrarán como valores de los últimos siete días. Si agrega un segundo, éste se agregará luego a la derecha y almacena los últimos siete valores que ingresamos. Todos estos valores se almacenan entonces justo debajo. Podemos ver el número total de millas. Este total se divide entonces por el número de entradas, para darnos un promedio también, a lo largo de lo que está en la entrada más alta que el usuario ha ingresado para esta semana también. Además de esto justo debajo, también añadiremos un círculo de progreso también, donde podemos agregar en un objetivo semanal, y luego este círculo de progreso se actualizará para cada valor que añada el usuario. Esto nos dará una buena retroalimentación visual de cómo va la semana también. Este proyecto se crea completamente desde cero. Usaremos HTML para la interfaz de usuario, agregaremos fuente personalizada, agregaremos estilo, aprenderemos todo sobre los fundamentos de JavaScript como funciones, creación de variables y constantes, trabajaremos con matrices, vamos a crear cálculos, trabajaremos con el DOM, trabajaremos con eventos, sentencias condicionales, y todos los fundamentos que necesitarás en JavaScript. Tu círculo de progreso también será totalmente personalizado. Haremos uso de JavaScript, y también CSS para mantener esto actualizado. Bueno, gracias por revisar esta clase y nos vemos en la primera lección. 2. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no acostumbrarse a seguirlo solo por el simple hecho de marcar otra conferencia. Tómese el tiempo para procesar cada lección. Revisa el código que escribes y piensa en cómo podrías abordar estas soluciones tú mismo. Con esto en mente, esta clase está basada en proyectos y esto te da la oportunidad de hacer algo realmente personal y único. No necesitas perderte demasiado y alejarte de la clase e incluso puedes dar un paso atrás después de haber terminado la clase, volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido de la clase. Además, recuerda compartir tu proyecto también aquí en Skillshare, y no solo lo revisaré, sino que también inspirará a otros estudiantes también. Más información sobre el proyecto de clase dirígete a la pestaña de proyecto y recursos donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente espero ver lo que creas , y subirlo aquí en Skillshare. 3. Crear la interfaz de usuario: Esta es una mirada de lo que vamos a construir en este próximo conjunto de videos. Vamos a construir una aplicación running track donde el usuario pueda registrar cada día, cuántas millas han corrido. Por ejemplo, podríamos agregar un valor para hoy como 1.9, y esto luego se agrega al final de esta matriz. Cada día podemos agregar un valor, y registraremos los valores de los últimos siete días. Cada vez que agrego valor, vamos a reemplazar cualquiera de estos marcador de posición, vamos a agregar el nuevo dentro de aquí, y todos estos empujaron fuera del borde aquí, así que nos dieron los últimos siete días. Desplazándose hacia abajo, tenemos un área donde podemos consultar todas nuestras estadísticas. Entonces sólo el total, que correrá en esta semana en particular, la distancia promedio, y también el valor más alto registrado para esta semana en particular. Justo en la parte inferior, también podemos agregar un objetivo dentro del código donde podemos decir cuántas millas queremos correr para esa semana en particular. Esto luego se actualiza cada vez que agrego un nuevo valor, y luego vemos este bonito círculo de progreso hacia abajo en la parte inferior. Añadamos el nuevo valor, y esto luego se agrega a nuestro total y también actualizamos el círculo de progreso. Vamos a empezar en este video creando la interfaz de usuario con HTML, y para ello también podemos usar esta imagen arriba en la parte superior, que está en SVG. Por supuesto puedes encontrar el tuyo propio, pero si quieres usar el mismo, que estoy usando en el curso, dirígete a este enlace en GitHub, que es chrisdixon161/fun-javascript-projects.com. En este repositorio, encontrarás todo el código terminado para cada uno de estos proyectos. Si te diriges al Running Tracker, también verás un runner.svg. Para usar esto dentro de nuestro proyecto, necesitamos hacer clic en el icono del código, y este es el código que necesitamos justo aquí. Ahora vamos a empezar por crear nuestro proyecto y volveremos a esto muy pronto. Vayamos al escritorio. Voy a crear una carpeta nueva. Voy a nombrar a esto el running-tracker. Abre el código de Visual Studio y luego podemos arrastrar sobre nuestros proyectos. El primero que necesitamos es crear una página index.html, esto va a ser para nuestra interfaz de usuario. Vamos a crear un nuevo archivo dentro de nuestra carpeta, este es el index.html. Si estás usando código de estudio visual, puedes hacer uso del atajo, que es html:5, y pulsar Enter. Esto nos dará entonces nuestros puntos de partida para nuestra página HTML. También puedo abrir esto en el navegador haciendo clic en la pestaña, copiar la ruta, y luego pegar esto dentro del navegador. Como siempre, puede hacer doble clic en el archivo index.html, que también está contenido dentro de nuestra carpeta de proyecto. Trabajando desde arriba vamos a incluir este SVG justo al principio. Para ello voy a crear una sección div, que va a tener la clase de logo. Dentro de esta sección ya podemos hacer uso de nuestro SVG. Voy a copiar el código de GitHub, pega esto en. Bajando; lo siguiente que necesitamos para nuestro proyecto es la sección de entrada. Vamos a crear esto con una etiqueta y luego una entrada numérica, y luego un botón para enviar este formulario. Justo debajo de nuestra sección de logotipos, o el envoltorio div, crea nuestro formulario. Tampoco necesitamos la acción, vamos a empezar con una etiqueta. Esta etiqueta va a ser para una entrada con el Id de entrada, y entonces el texto va a ser número de millas hoy. También puedes cambiar esto para que sean kilómetros, o cualquier otro valor que quieras usar, eso también está completamente bien y no afectará a esta aplicación. A break tag, pon esto en una nueva línea. Entonces nuestra entrada, que va a tener el tipo de número, el id de entrada que va a coincidir con nuestra etiqueta, y luego un atributo de paso de 0.1, lo que significa que nuestros valores dentro de las entradas numéricos aumentarán en el valor de 0.1. Después de esto, una nueva etiqueta de break, para que luego podamos agregar nuestro botón de enviar. El botón necesita el tipo de envío lo que permitirá que esto presente nuestro formulario. Por el momento, no tenemos ningún JavaScript en su lugar para aprovechar los números que el usuario ingresa, pero por ahora podemos agregar estos guiones como valores de marcador de posición. Vamos a hacer esto creando un envoltorio para la sección, creando una lista desordenada, y cada uno de estos valores va a ser un elemento de lista. Debajo de nuestra forma, una regla horizontal sólo para dividir la sección. El elemento de sección en la clase, por lo que podemos usar esto dentro del CSS va a ser el EnriesWrapper. El título de los últimos siete días. Como acabamos de mencionar, y listas desordenadas para almacenar todos estos valores, que también pueden tener un id, por lo que podemos apuntar a esto dentro de JavaScript. Por ahora nuestro valor de marcador de posición simplemente va a ser un guión. Ya que trabajamos con los siete días anteriores, voy a duplicar esto para calificar siete ítems de lista, y vamos a echar un vistazo a esto. A continuación tenemos una sección de datos la cual va a ser todas las estadísticas para nuestra aplicación. Vamos a crear una sección y tres divs separados, y cada uno de estos divs va a tener un título y también un valor. También podemos escribir esto en una nueva sección en nuestro HTML. Una sección puede tener una clase de datos, y luego nuestro primer div para nuestra sección total. Pero cada uno de estos títulos de la izquierda voy a envolver esto en un p elementos, y luego un lapso sobre a la derecha. El primer p es para el texto de total y luego un colon. El primer lapso, incluso puedes vivir está vacío, o poner en un valor de marcador de posición, esto también necesitará un id, por lo que vamos a actualizar esto en JavaScript. Después de este div, entonces podemos concentrarnos en nuestra sección de distancia promedio. Nuevo div, los elementos p, y el texto para éste es la distancia media. El lapso para éste también va a tener un id único, que va a ser el promedio. De nuevo, también puede agregar un número de marcador de posición, pero esto es completamente opcional. El tercer apartado es para el semanal de alto valor. Nuestros elementos p, nos dirigimos esta semana en alto. Nuestro lapso con el id, que va a ser alto, y luego un valor predeterminado. Echemos un vistazo a esto. La mayor parte de la interfaz de usuario ya está en su lugar, pero solo necesitamos echar un vistazo a la parte inferior y luego agregar nuestro círculo de progreso. Todo este círculo de progreso va a depender del JavaScript y también del CSS, que vamos a agregar en futuros videos, pero por ahora podemos crear una etiqueta y también una sección div, por lo que podemos usar esto más adelante en el curso. El último tramo hacia abajo en la parte inferior, se puede agregar una clase de progreso. Entonces nuestro nivel tres rumbo arriba en la parte superior que es objetivo semanal. Esta sección objetivo semanal va a tener también dos valores separados. Tendremos el número total de millas para esta semana en particular, y luego también una barra inclinada seguida del objetivo. Para ello, voy a agregar dos elementos de span separados. El primero, esto va a tener un id de progreso total, un valor de marcador de posición de cero después del lapso, agregar una barras inclinadas hacia adelante. Entonces un segundo elemento span, vamos a agregar un valor predeterminado de 25, y también un id que va a ser igual al objetivo. Después de ambos tramos, también necesitamos agregar el texto de millas justo al final después de nuestro último lapso. Añadamos esto a su propia línea para que sea más legible, ahí vamos. También asegúrese de que todo esto esté contenido dentro del encabezado de nivel tres, guarde, y vuelva a cargar el navegador. Tenemos un rumbo, y lo último que hay que hacer por debajo del rubro de nivel tres es agregar un nuevo div, que va a ser para nuestro círculo de progreso. Podemos agregar esto solo con una clase de envoltura de círculo de progreso. Como mencionamos anteriormente, no necesitamos hacer nada más con esta sección, esto simplemente va a ser un marcador de posición div, nos ocuparemos de esto más adelante usando CSS y también JavaScript. Por ahora llamaremos a este video hecho, nuestra interfaz de usuario ya está en su lugar, y en el siguiente video haremos que se vea mucho más bonito usando CSS. 4. Fuentes y estilo: Ahora hagamos que esta aplicación sea un poco más bonita usando algo de CSS y también agregando una fuente de Google. Lo primero si abrimos la barra lateral y entramos en nuestro proyecto, vamos a crear el styles.css y luego vincularlo en la cabeza de nuestro index.html. Ya he elegido una fuente de Google Fonts, pero puedes elegir cualquier diferente que prefieras. Este es el que voy a usar, que está en la página de inicio, pero puedes elegir o buscar un valor diferente arriba en la parte superior. Para incluir esto, al igual que el proyecto anterior, vamos a dar click en esto y luego podemos seleccionar cualquiera de los pesos de fuente. Voy a ir por el 300, el 500 y una versión audaz 700. Embebe, y luego vamos a copiar este enlace que puedes colocar en nuestra página de índice, justo encima de nuestra hoja de estilo, y luego nuestra familia de fuentes se coloca en nuestro styles.css. Podemos agregar esto en la raíz bajo el elemento HTML. Pega esto en y también podemos seleccionar un tamaño de fuente raíz. Voy a ir por 10 pixeles. También puedes establecer un color de fondo. Esto va a ser para la sección detrás de nuestro contenido. Si estiramos el navegador en la versión final, este es el color que vemos fuera de la sección del cuerpo. El volumen que voy a utilizar es 2d3740. Comprobemos que esto está funcionando y nuestra hoja de estilo se ha vinculado correctamente. Recarga esto y vemos el color de fondo, vemos una fuente diferente y también el tamaño de la fuente ha entrado en vigor. El motivo por el que vemos todo este fondo en lugar de solo por fuera, es porque aún no hemos establecido un color para nuestra sección corporal. Hagámoslo ahora. En primer lugar, algún relleno que te va a dar algo de espaciado alrededor de nuestros bordes de 1rem, que es de 10 píxeles, luego un fondo para la sección. El volumen que voy a utilizar es 1c262f. El tipo de letra es un poco difícil de leer con este fondo oscuro, por lo que también podemos cambiar el color de la fuente. Podemos volver a usar un valor hexadecimal, igual que hemos usado anteriormente, o también podemos usar un color RGB, solo tienes que seleccionar cualquiera de nuestros valores. Un color RGB es una forma de combinar valores rojo, verde y azul para hacer un color en particular. Voy a ir por un valor rojo de 230, 225 por el verde y 225 por el azul. Esto nos va a dar este color blanco claro, que surtirá efecto para toda nuestra sección corporal. Para saber más sobre estos valores de color particulares, podemos hacer una búsqueda de selector de color HTML. Hay varios selectores de color los cuales se pueden ver en línea, o este por defecto el cual viene con el motor de búsqueda. Podemos ver para cualquier sombra que seleccionemos, tienen un valor rojo, verde y azul, y también el valor hexadecimal equivalente que hemos mirado justo arriba, junto con algunos valores diferentes aquí también. Esto es solo un par de formas diferentes que puedes usar para seleccionar valores de color. Siguiente de vuelta en la sección de cuerpo, el ancho del 90 por ciento solo para restringir el ancho general del proyecto, y también centrar esto con margen cero auto. Recuerda, si no teníamos este auto valor, esto será empujado. Sólo comprobemos esto. Esto será empujado sobre la izquierda del proyecto. Pero ahora con el valor automático de izquierda y derecha, esto ahora se ha dividido por igual en ambos lados. Después del cuerpo, vamos por la sección de logo, que está en la parte superior. Podemos sensores esto con text-align center. El color de relleno actual para nuestra imagen en la parte superior actualmente no se destaca demasiado bien en este fondo más oscuro. Al igual que vemos en la versión final, también podemos cambiar esto. También podemos apuntar a esto en el CSS, o podemos hacerlo de nuevo en nuestro index.html. El modo de hacerlo dentro de nuestro elemento SVG, es echarle un vistazo a la sección de trayectoria. Cada una de estas secciones tiene un atributo de relleno el cual podemos cambiar. Yo quiero cambiar esto para que sea un valor de gris, refrescar, y ahora la sección de cabeza es gris, y también podemos hacer lo mismo para la sección de cuerpo. De vuelta a nuestra hoja de estilo, ahora vamos a pasar a la sección de formularios, que va a ser el envoltorio para nuestra etiqueta, las entradas de formulario y también el botón de enviar. Todo lo que necesitamos hacer para este envoltorio es poner la línea de texto en el centro. Tenemos que hacer la etiqueta un poco más grande, así que vamos a apuntar a esto. El tamaño de fuente, quiero ir por 1.8rems, que es equivalente a 18 pixels hasta la entrada numérica. Primero apuntar a todas las entradas de formulario, luego dentro de los corchetes, podemos seleccionar nuestro tipo particular de número. No cualquier tipo de número no es particularmente importante para este proyecto ya que no tenemos múltiples insumos, pero de esta manera nos cubren cuatro un proyecto era crecer en una etapa posterior. predeterminada, la entrada de formulario no heredará el resto de la familia de fuentes. Podemos ver que se trata de una fuente completamente diferente a la del resto del proyecto. Familia de fuentes, podemos establecer que esto sea heredado. Ahora heredemos el estilo de fuente del resto del proyecto. El fondo, para mantener las cosas consistentes. Agarremos también el mismo color RGB, que usamos para el texto más claro. El ancho del 80 por ciento. Algún espaciado en la parte superior e inferior, 1rem y luego un valor de cero a la izquierda y a la derecha. Para hacer la entrada de forma real también más grande, podemos agregar algo de relleno en el interior. 0.8rems en la parte superior e inferior, y luego cero en la izquierda y la derecha. Elimina el borde predeterminado con borde ninguno, un tamaño de fuente para que esto sea un poco más grande cuando uses entradas o valor. Vamos por nuestros 1.2rems y también establezcamos el text-align para que se centren. Bajando, lo siguiente que tenemos es este botón de envío de formulario. Para hacer esto igual que la versión terminada, vamos a añadir un color de fondo. Vamos a sumar un 50 por ciento de radio de borde para hacer esto totalmente redondeado, junto con ajustar el ancho y la altura. Vamos a apuntar a nuestro elemento inferior. Nuevamente, también necesitamos heredar la familia de fuentes. El tamaño de la fuente un poco más grande y también el peso de la fuente va a ser más audaz también. Para hacer de este un fondo redondeado, también vamos a establecer un ancho y también una altura igual. Voy a ir por ocho píxeles y también un valor coincidente para la altura también. Veamos cómo se ve esto dentro del navegador. Esto es igual ancho y altura, pero también necesitamos redondear las esquinas con el borde radio, y también eliminar cualquier borde por defecto. Empecemos con el borde ninguno, y luego el frontero-radio, que tiene un valor de 50 por ciento. Para darle a esto el color azul que vemos en la versión final, necesitamos establecer el color de fondo. Quiero ir por un valor hexadecimal que sea igual a 0ad9ff, seguido de algunos valores de margen. En la parte superior, 0.5rems en la parte superior, cero en la derecha, 1rem en la parte inferior, y luego cero en la izquierda. Bajando a nuestros últimos siete días valores, esto está dentro de otra lista. Elimina el relleno predeterminado con el valor de cero, y también necesitamos eliminar las viñetas de elemento de lista, y luego podemos configurar esto para que pase por la página configurando el tipo de visualización para que sea flex. Elimina las balas con el estilo de lista para ser ninguno dejándonos con los guiones que tenemos para cada ítem de la lista. Echando un vistazo a la versión terminada, también tenemos algún espaciado igual entre cada uno de estos elementos, y podemos hacerlo configurando justifique que el contenido tenga espacio entre. En la lista hay un paso en la dirección correcta para peinar la sección. Lo siguiente que tenemos que hacer es apuntar a cada uno de nuestros ítems de la lista. A partir de las fronteras, cada uno de estos ítems destaca más. Vamos por un valor de un píxel, una línea sólida, y luego algo de relleno dentro de estos elementos de la lista para agregar algo de espaciado. Un rem en la parte superior e inferior y 1.5 en la izquierda y derecha. Dentro de esta sección, apuntemos al encabezado de nivel tres, aumentemos el tamaño de la fuente y también añadamos algo de relleno para darle algo de espaciado al igual que en la versión final. Para hacer esto a menudo en el index.html, tenemos una sección con la clase de envoltorio de entradas. Vamos a apuntar a esto. Algunos pueden trabajar con nuestro encabezamiento a nivel tres y también agregar algo de espaciado a nuestras secciones. Esta es una clase por lo que necesitamos los puntos. En primer lugar, podemos agregar algo de relleno para darle a esto algo de espaciado en la parte superior e inferior de 1rem, cero en la izquierda y la derecha, y luego también establecer el tamaño de fuente predeterminado para ser 1.6rems. A continuación el rubro de nivel tres que es para el título de los últimos siete días. Podemos eliminar cualquier margen por defecto que proporcione el navegador, y se puede ver que esto elimina el margen por defecto de la parte superior de nuestro rubro. Podemos empujar esto hacia el centro, con text-align. Esto también es bastante audaz, así que cambiemos el peso de la fuente para que sea más ligero. Debajo de esto, tenemos todo el resto de la información para nuestra app. Tenemos el total, las distancias y también la altura semanal. Todo esto está envuelto en una sección con la clase de datos. Bajando, apuntemos a esto. En primer lugar, podemos establecer el tamaño de fuente predeterminado para que sea un poco más grande, por lo que 1.4rems. Cada una de nuestras secciones está rodeada dentro de un div dos, por lo que podemos apuntar.data y luego div. Empecemos con el color de fondo para cada una de nuestras secciones. El valor que voy a usar va a ser 141c22. El tipo de pantalla va a ser igual a flex. Podemos hacer uso del flexbox para centrar nuestra etiqueta y también el valor en la misma línea, junto con agregar también algo de espacio en el medio. Primero los colocamos en su propia línea con un centro de ítem de línea, y ahora está en el espaciado intermedio, podemos usar justificar contenido. Esto ahora empuja todos nuestros valores hacia la derecha. Lo siguiente que hay que hacer es agregar algo de relleno. Estos no están arriba contra los bordes izquierdo y derecho y también algún margen hacia el exterior de nuestro div, por lo que las tres secciones tienen algún espacio en el medio. En primer lugar, el margen en la parte superior e inferior, voy a usar 0.5rems, cero a la izquierda y a la derecha, y luego algún relleno dentro de nuestros divs. Ya tenemos algo de espaciado en la parte superior e inferior así que vamos a añadir un poco de espaciado a la izquierda y a la derecha. Cero y luego 1rem. Esta es ahora la mayoría del estilo para nuestra aplicación. Solo necesitamos apuntar a la sección abajo más adelante cuando añadamos el círculo de progreso. Pero por ahora sin embargo, pasemos al siguiente video y añadamos algo de JavaScript a nuestro proyecto, que podamos actualizar nuestras entradas. 5. Añadir entradas nuevas: El estilo para nuestro proyecto ya está prácticamente en su lugar, solo hay un poco para volver más adelante. Cuando sumamos esta sección hacia abajo en la parte inferior. Bueno, por ahora sin embargo, vamos a pasar a añadir en nuestro archivo de script para introducir algo de JavaScript. En particular, en este video, capturaremos la entrada del usuario y luego actualizaremos nuestros últimos siete días. El primero que tenemos que hacer dentro de nuestro proyecto es crear un nuevo archivo, que va a ser este script.js. El primero que hay que hacer es enlazar esto hacia abajo en la parte inferior, justo encima de nuestra sección de cierre y cuerpo. Podemos vincular esto con los elementos de guión. Esto también está en el proyecto [inaudible] junto a nuestro índice. Podemos simplemente referirnos a esto con script.js. Tomemos un momento rápido para pensar exactamente qué queremos hacer aquí. Tenemos una entrada de formulario justo aquí donde el usuario agregará el valor. Queremos escuchar cualquier envío de formulario. Una vez que esto sucede, no queremos ejecutar una función. Empecemos con esto de en este script.js. El primero que hay que hacer es agarrar una referencia a nuestra forma. Para esta sección de formulario, ahora necesitamos escuchar el evento de envío. El evento de envío se llamará cada vez que el usuario toque entrar dentro de esta entrada o haga clic en nuestro botón de envío. En el guión, vamos a crear una referencia a esta forma. Forma Const. Todo formulario de referencia siempre va a permanecer igual. Esto puede ser utilizado como una constante dentro de un objetivo, el documento completo. Entonces podemos usar el selector de consultas. Selector de consultas es una forma de capturar elementos HTML, y podemos capturar cualquiera de los elementos en nuestro HTML. El modo en que hacemos esto es exactamente lo mismo que nuestras hojas de estilo. Si apuntamos a algún elemento, hacemos referencia a los elementos por el nombre. Si se trata de una clase, usamos el punto seguido del nombre de la clase. Si fuera un ID, usaríamos el prefijo hash. Desde nuestra forma, es simplemente un elemento de forma. Podemos apuntar a esto. Entonces queremos agregar un oyente de eventos. El evento en el que se quiere escuchar es el evento de presentación. Entonces queremos ejecutar una función. Agregamos el nombre de nuestra función como el segundo valor separado por una coma. El nombre de la función va a ser un handle submit. Todavía no hemos creado esta función de envío de mango. Justo por encima de nuestro oyente de eventos, podemos crear esto ahora. Handlesubmit va a tomar en el evento la información que se pasa a la función cada vez que se ha presentado la forma. El primero que queremos hacer es agarrar la información de este evento y luego llamar a prevenir default. valores predeterminados evitará el comportamiento predeterminado del envío del formulario que es volver a cargar el navegador. Para este caso de uso, no queremos actualizar el navegador ya que toda nuestra información se perderá. En cambio, lo que queremos hacer es capturar realmente las entradas del usuario de este campo aquí. De nuevo, usemos QuerySelector. Esto va a agarrar nuestra entrada de formulario. Podríamos agarrar esto usando el nombre de entrada o también comprar el ID de entrada. Por lo que document.QuerySelector. Al igual que con CSS, apuntamos esto con el hash y luego el nombre de ID. Podemos entonces agarrar el valor y también almacenar esto dentro de una variable o una constante. Si recuerdas desde temprano cuando creamos la calculadora de Tip, uno de los problemas que tuvimos cuando agarramos la información enviada por el usuario fue el valor vino en forma de cadena. Ya que trabajamos con números, queremos convertir esto para que sea un tipo de número. Eso podría ser esto, voy a convertir este valor de cadena para ser número, sin pasar esto en la función de número de JavaScript. Antes de seguir adelante, hagamos un registro de consola con el valor de entrada y comprobemos que todo está funcionando bien. Haga clic derecho Inspeccionar y podemos entrar a la consola. Haga clic en la pestaña de la consola. Añadamos algunos números aleatorios dentro de aquí. Entonces 1.2, 6.4, lo que significa que ahora escuchamos con éxito un evento de envío y también capturamos la entrada del usuario. También hay un par de formas en las que podemos mejorar en esto si pasamos a nuestra entrada y tecleamos el valor de cero, todavía vemos que el valor de cero sigue registrado. Esto podría causar un problema si el usuario fue golpeado enter por accidente antes de ingresar su valor. También cada vez que se agrega un valor, también queremos borrar este formulario para que esté disponible para la siguiente entrada. De vuelta a nuestra función, podemos usar una declaración if para comprobar si no se ha hecho ninguna entrada. Utilice el signo de exclamación. Esto significa que si no hay entrada presente o el valor es falso. Entonces podemos usar la palabra clave return para salir de nuestra función ya que no se ha ingresado ningún valor. El siguiente paso a hacer es borrar la entrada de formulario cada vez que se ha presentado un valor. En primer lugar, vamos a agarrar toda forma. Por lo que document.QuerySelector. Podemos agarrar nuestro formulario. Entonces podemos llamar al método reset, que va a borrar todas nuestras entradas de formulario. Introduce el valor. Ahora cuando ingresemos un valor y golpeemos Enter, formaré entrada se borra. Con esto cuidado, lo siguiente que queremos hacer es realmente almacenar todos los valores de usuario dentro de una matriz. Voy a inicializar nuestra matriz llamada entradas y establecer esto igual a una matriz vacía. Observe aquí utilizamos la palabra clave let en lugar const porque queremos actualizar los valores de las entradas. Si se decía que esto era const, no podremos obtener esta matriz empujando nuevos valores. Ahora la forma de agregar realmente un nuevo valor dentro de nuestra matriz vacía es apuntar primero a esto por el nombre de la variable de las entradas. Entonces una matriz tiene un método push que nos permite empujar un nuevo valor hasta el final de nuestra matriz. El valor que quieres empujar es nuestra entrada, la cual ha sido capturada a partir de nuestra entrada de usuario. Probemos esto con un registro de consola. Ahora podemos generar el valor de las entradas que es nuestra matriz. Recargar. Inserta aquí un par de valores dentro, veamos qué pasa. Esto ahora actualizará nuestro array con las entradas del usuario. Con todo esto ahora funcionando, eliminemos nuestro registro de consola y podríamos seguir agregando más código a este método HandleSubmit. Pero para mantener esto más limpio, voy a crear una nueva función la cual va a actualizar nuestra interfaz de usuario. Cada uno de estos elementos de matriz va a ser empujado al final de nuestra lista desordenada. Vamos a crear una nueva función sobre lo muy superior, y voy a llamar a esto AddNewEntry. También voy a llamar a esta función cada vez que el usuario ingrese una nueva entrada, también, analizando el valor de entrada. Este valor de entrada se recibirá entonces dentro de nuestra función, y voy a llamar a esta NewEntry, pero el valor será exactamente el mismo. En primer lugar, hagamos un registro de consola con el valor de la NewEntry solo para comprobar que estamos recibiendo esto correctamente en nuestra función. Añada un valor. Está bien. Bien. Ahora nuestra función tiene acceso a cada una de estas entradas de usuario. Una de las grandes cosas de usar JavaScript es que también podemos usarlo para crear nuevos elementos en nuestro DOM. Si vamos a nuestro index.html, hasta ahora hemos estado creando todos estos elementos dentro de nuestra página HTML. Pero también podemos usar JavaScript para crear estos también. El modo en que vamos a usar esto en esta función es que vamos a apuntar a esta lista desordenada, y luego por cada nuevo número que agrega el usuario, entonces vamos a crear un nuevo elemento de lista. El modo de hacerlo es mediante el uso de Document.CreateElement. Al crear un nuevo Elemento HTML, podemos usar el mismo nombre de elemento que la etiqueta de apertura. Podemos crear una lista desordenada, un elemento de lista, un encabezado de nivel 3, o incluso una sección. Vamos a estar usando un ítem de lista, para que podamos empujar esto hasta el final de nuestra lista. Empecemos esto dentro de una constante llamada ListItem, y luego, a continuación, también necesitamos un valor para entrar entre nuestros elementos. Por el momento, esto sólo va a crear un elemento de lista, que es justo así. Pero también necesitamos crear algún contenido de texto dentro. Hacemos esto en JavaScript con document.CreateTextNode. Podemos hacer análisis en cualquier cosa, como una cadena de texto. Pero en nuestro caso, queremos analizar en la nueva entrada, luego también almacenar esto en una constante también, y vamos a llamar a esto el valor de lista. Esto ahora nos deja con los elementos reales y los contenidos. Pero estos son dos nodos separados. Necesitamos realmente agregar nuestro valor de lista a nuestro elemento de lista. El modo en que podemos hacerlo es agarrando nuestro ListItem, y luego usamos AppendChild. Esto va a agregar un nodo NewChild. Bajo el nodo NewChild, uno que queremos agregar es el ListValue. Aquí, lo que básicamente estamos haciendo es crear un elemento de lista con esta primera línea. Después con la segunda línea, estamos creando un valor a partir de nuestra nueva entrada. Si el usuario ingresa 2.7, esto se almacenará en ListValue. A continuación, anexamos en este ListValue a nuestro ListItem. Esto va a agarrar nuestro valor y colocar esto dentro de nuestros elementos. Esto ahora nos deja con un elemento de lista totalmente construido. Este elemento de la lista ahora necesita empujar a nuestra lista desordenada. El modo en que podemos hacerlo es apuntando primero a nuestra lista desordenada, encuentra el ID de las entradas. Fuera de nuestra función voy a crear una constante, que se llama nuestra EnriesWrapper. Esto va a ser igual a document.QuerySelector, con el ID de entradas. Esta es nuestra lista desordenada, y ahora necesitamos empujar el ListItem, que tenemos aquí. El modo en que podemos hacerlo es muy similar a esta línea justo aquí. Vamos a agarrar nuestra lista desordenada. Nuevamente, usando AppendChild, agregando en nuestro ListItem completo. Esto ahora tomará nuestro ítem de lista agregar esto hasta el final de nuestra lista desordenada creando un nuevo valor al final. Acude al navegador y vuelve a cargar, y agrega algunos valores, 1.4, y estos ahora se agregan todos al final de nuestra lista. Todo esto está bien. Esto ahora significa que nuestras entradas en nuestro trabajo están siendo empujadas a nuestra matriz, y también estamos creando un nuevo elemento de lista y actualizando el DOM. Tan solo una cosita que tenemos que hacer antes de terminar este video. Estos tres nuevos valores que acabamos de sumar se sumarán a las siete entradas existentes. Nosotros sólo queremos mantener un registro de los últimos siete días. Cada vez que agregamos un valor al final de la matriz, también queremos eliminar el primer valor también. El modo en que hacemos esto en JavaScript es más o menos lo contrario de lo que acabamos de hacer aquí. Aquí estábamos agarrando la lista desordenada y anexando un elemento NewChild. En cambio, sin embargo, queremos hacer lo contrario, que es sacar a un niño. Hagámoslo al inicio de nuestra función AddNewEntry. Agarra el EnriesWrapper, que es nuestra lista desordenada, y luego podemos llamar a RemoveChild. Si simplemente llamamos a removeChild, JavaScript no sabrá exactamente qué elemento hijo queremos eliminar. Por elemento hijo, nos referimos a cada uno de estos elementos de la lista. Pero, afortunadamente, JavaScript nos proporciona una manera fácil y sencilla de apuntar a los primeros elementos hijos. Se trata de una propiedad llamada FirstChildElement. Si voy a nuestro guión, podemos apuntar al EnriesWrapper, que es toda nuestra lista desordenada, y luego seleccionar el FirstElementChild. Ahora guardemos este archivo y volvamos al navegador y comprobemos si esto está funcionando. Añadamos algunos valores, 4, 5, 6, 7. Ahora, por cada elemento que agregamos, vemos que aún tenemos siete días en total. Añadamos el número 8, y vemos que el valor de uno ahora ha sido eliminado del inicio de nuestra lista. Probemos una más. El valor de nueve. Esto elimina el valor de dos. Todo esto puede parecer bastante complejo si es algo que no has hecho antes, pero todo lo que estamos haciendo es agregar un nuevo elemento de lista al final aquí y luego quitar el primero. Esta es ahora una parte realmente importante de nuestra aplicación de camión en marcha ahora completa. A continuación, bajaremos a nuestra sección de inicio donde sumaremos el total y también la distancia promedio. 6. Calcular el total y el promedio: Pongamos a trabajar ahora en algunas de estas estadísticas abajo en la parte inferior. Este video, nos vamos a centrar en calcular el total y también la distancia promedio. Ahora para hacer esto, vamos a hacer uso de un método de matriz JavaScript llamado reducir. Echemos un vistazo rápido a cómo podemos usar esto. Si antes no has usado el método reducido, puede parecer bastante complejo, pero en realidad no es demasiado difícil de usar. El concepto principal detrás de un método de reducción, es que tomará todos los elementos, todos los valores que está dentro de una matriz, en nuestro caso, va a ser todas nuestras distancias, y luego lo vamos a reducir en una sola valor único. En nuestro caso, vamos a reducir a la baja todos nuestros valores sumando todos juntos. Esto nos va a dar nuestro total que necesitamos justo aquí, y entonces también podemos hacer uso de esto en la distancia media dividiendo este total por el número de entradas. De vuelta al reductor, vamos a crear una función igual a esta. El ejemplo que vemos aquí es más o menos exactamente cómo necesitamos usarlo. Vamos a sumar todos los valores en la matriz. Esto lo hacemos llamando a un método que agrega el valor actual al total anterior. Para el primer elemento dentro de la matriz que es uno, entonces llamará a este método, pero esta primera vez solo tenemos el valor actual, no tenemos el total, por lo que el reductor será igual a uno. Para el segundo valor que es dos, el valor actual de dos se sumará al total de uno, resultando en un valor de tres. Continuando, entonces se sumará el valor de tres al total actual, haciendo de este seis. El valor de cuatro luego completa el reductor, dando como resultado un valor total de 10. De vuelta a nuestro script.js, vamos a empezar por crear una función que va a tener el mismo comportamiento. Voy a hacer el mío justo por encima de nuestro handleSubmit. La función que voy a llamar el reductor toma en nuestros dos valores que es el total, y luego el valor actual. Simplemente llamaré a esto un total en lugar de acumulador ya que parece más claro. Todo lo que esta función va a hacer es devolver el nuevo valor, que es equivalente al total que se ha agregado al valor actual. Del mismo modo que una nota al margen aquí, estamos agregando el valor actual al total, pero podrías hacer otras cosas como quitártelo también. Toda la idea es exactamente la misma. El reductor está destinado a reducir nuestros valores de matriz en un solo valor. El siguiente cosa a hacer es que vamos a crear una nueva función justo debajo, y voy a llamar a esto CalTotal. Esta función va a agarrar todas nuestras entradas, usar un método de reducción, y luego actualizar nuestro valor justo aquí. Para ello, también necesita tomar todas nuestras entradas actuales, que está dentro de nuestro array. Entonces podemos agarrar nuestra matriz de entradas, que es sólo valores almacenados dentro de aquí. Podemos entonces llamar al método reducido, que acabamos de ver en el sitio web de Mozilla, y luego podemos pasar en nuestra función reductor. Esto nos dará entonces nuestro único valor total, y también podemos almacenar esto dentro de una constante. Ahora tengo este valor, vamos a actualizar el DOM. Los dos valores que queremos actualizar si echamos un vistazo a nuestro proyecto es la sección total justo aquí, y también tenemos un total el cual se actualiza para nuestros objetivos semanales. Agarramos los documentos, podemos agarrar un elemento por el id El primero que queremos agarrar es para el total justo aquí, desplázate hacia abajo hasta la sección de datos, y tenemos un lapso con el id de total. Entonces podemos establecer el contenido de InnerText para que sea igual a nuestro valor total. Duplicemos esta línea, y también podemos usar esto para actualizar los objetivos semanales. Ahora la parte inferior de nuestra página de índice, este es este ProgressTotal el cual actualmente tiene el valor de cero, podríamos quitar el marcador de posición, actualizar nuestro id Ahora tenemos nuestra función que calcula el total. De hecho, sólo debería ser CalcTotal. Ahora cada vez que manejamos bajando en la parte inferior, ahora queremos llamar a esta función. Cuando llamamos a esto, también podemos pasar en las entradas. Las entradas fue el valor de nuestra matriz en la parte superior de aquí, o podemos dejar esto vacío para este caso en particular, porque se trata de una variable global. Cuando declaramos una variable fuera de cualquiera de estas funciones, esto significa que ahora está en alcance global, lo que significa que podemos acceder al valor de las entradas en cualquier parte dentro de nuestro programa. Si nuestra variable fuera declarada dentro de alguna función en particular, sólo podríamos acceder a ella dentro de esa función. Entonces como esto es global, podemos acceder a esto dentro de esta función y también a ésta justo aquí también. Con esto en su lugar, ahora vamos a guardar esto y pasar al navegador. Añadamos algunos valores nuevos. Uno y dos, estos dos sumados nos dan el total de tres, y también a la baja en nuestro objetivo también. Añadamos uno más, y nuestros totales ya están actualizados. Con esto funcionando, ahora pasemos a la distancia promedio. El promedio de distancia va a ser bastante simple porque ya tenemos nuestra función reductora en su lugar. Todo lo que tenemos que hacer es crear una nueva función para cuidar esto. Voy a llamar a esto CalcaVerage. El modo en que podemos calcular el promedio es primero, agarrar todos los valores totales que has sumado. Sabemos hacer esto desde nuestra función justo arriba. Entonces podemos dividirlo por cuántas entradas tenemos actualmente dándonos el promedio. Empecemos esto dentro de una constante llamada promedio. Esta igual a nuestra matriz de entradas, podemos de nuevo, llamar a nuestro método de reducción, pasando en nuestra función reductor. Esto nos dará entonces el total, y lo siguiente que tenemos que hacer es dividir esto por el número de entradas. Podemos hacer esto agarrando nuestra matriz de entradas y luego llamando.length. El siguiente paso es actualizar el DOM con document.getElementById. El Id que quieres agarrar en el index.html, es este id promedio justo aquí. Al igual que lo anterior, también estableceremos el InnerText para que sea igual a nuestra variable promedio desde arriba. El último paso es llamar realmente a esta función, CalcaVerage. Esto tampoco necesita que se le pase nada ya que sólo está aprovechando la matriz de entradas, que tenemos en la parte superior. Guarda este archivo y apágalo en el navegador. Ahora si le sumamos dos valores diferentes, vemos el total de cuatro. El total de 4 dividido por 2 nos da un promedio de 2. Probemos en una más, vamos por 10. Nuestra media ya está actualizada. Tan solo un toque final más que podemos hacer a este proyecto para estos dos valores es redondear estos a un decimal. Por el momento, obtenemos un número redondeado de 14, pero si hacemos algo como 2.7, pero quiero mantener esto consistente y asegurarme de que todos los valores sean a un decimal. Al igual que antes, la forma de hacerlo es usar toFixed. Voy a establecer este para que sea un lugar decimal así que pasando el valor de uno. Esto va a ser para nuestro total, y podemos hacer lo mismo para nuestro promedio también. Tendríamos que envolver esto dentro de nuestros corchetes, y luego llamar a Fixed en el total. Si no envolviéramos esto entre paréntesis, toFixed se llamaría en las entrries.length en lugar de la suma total. Vamos a probar esto. Uno y cinco dándonos un total de seis, que tiene un valor de 6.0 ahora. El promedio, vamos a sumar algunos valores más. Ahora podemos decir que nuestro total y promedio se redondea a un decimal. También podemos hacer lo mismo por nuestras entradas justo aquí. Podemos hacer esto arriba donde creamos nuestras nuevas entradas, y también aquí donde agregamos la nueva entrada como nuestra nota de texto. Al igual que antes, también podemos llamar a Fixed pasando en el valor de uno y ahora si agregamos algunas entradas, vemos estas redondeadas a un decimal. Este es ahora nuestro total y el promedio ahora cuidado, y en el siguiente video, echaremos un vistazo al gol semanal, y también al máximo semanal. 7. Máximos semanales y objetivos: Ahora tenemos los valores totales y también la distancia promedio. Ahora queremos pasar a calcular el valor más alto de esa semana, y también actualizar nuestro objetivo a la baja también en la parte inferior. Entonces para hacer esto, volvamos a nuestro script.js y podemos crear una función para calcular esto. El nombre de esta función será WeeklyHigh, y todo lo que necesitamos hacer es calcular el valor más alto que se ha agregado a nuestra matriz de entradas. Almacenar esto en una constante llamada alta. El modo en que podemos hacerlo es mediante el uso de un mal funcionamiento que JavaScript proporciona el cual se llama Matemáticas. Dentro de aquí podemos pasar en diferentes valores como cuatro,12, y seis. Ahora si hacemos un registro de consola por el valor de alta, deberíamos ver que el valor de 12 es de salida. Llamemos a esto dentro del lado nuestra función HandleSubmit, y podemos comprobar que esto está funcionando en la consola. Podemos agregar cualquier valor dentro de aquí. Golpea Enter, y vemos el valor de 12. Pero en cambio queremos agarrar el valor más alto de nuestra matriz de entradas. Encontremos Sí, podemos pasar en nuestra matriz de entradas y comprobar que esto está funcionando. Entonces cinco, seis, y uno. Esto ahora nos da un problema dentro de la consola. Entonces la razón por la que esto está sucediendo es porque Math.Max esperará una serie de números. No obstante, estamos pasando una matriz de entradas. Por lo que efectivamente hacemos en algo como esto. En cambio, lo que queremos es extraer los valores reales del interior de nuestra matriz, para que se vea más así. El modo en que podemos hacerlo es usando el operador de spread JavaScript, que son los tres puntos. Esto luego extraerá todos los valores dentro de nuestra matriz de entradas y esto ahora debería funcionar dentro de la consola. Ahora tendrá el alto valor, ahora podemos actualizar el DOM. Entonces document.getElementById, el ID que queremos, si vamos a la página de índice, es el valor de alto. Vamos a establecer el texto interno, que va a ser igual a nuestra variable. Eso está fuera, así que el valor de uno, cinco, vemos el máximo semanal es un valor de cinco. Siete, esto se está actualizando. Si sumamos los valores más bajos que son tres, esto aún tiene el valor alto de siete. A continuación, también podemos hacer que nuestro objetivo semanal sea más dinámico también, controlando esto desde nuestros guiones. No necesitamos hacer esto por una función, solo podemos hacerlo en cuanto se cargue nuestro script. Entonces vamos a crear una variable en la parte superior o una constante. Voy a llamar a esto nuestro objetivo. Establezca esto en cualquier valor como 25. Después podemos usar un selector de consultas o getElementById para actualizar nuestro objetivo. El Id objetivo y luego necesitamos establecer el en un texto para que sea igual a nuestro objetivo. También podemos eliminar el valor de marcador de posición de 25 y también comprobar que esto está funcionando en el navegador. No tenemos nada para obtener este objetivo desde la interfaz de usuario. Acabo de codificar duro esto como un valor dentro del script. Pero claro, si sí quieres un pequeño reto, puedes seguir adelante y agregar esto al proyecto para que podamos ser actualizados por el usuario. La mayor parte de la funcionalidad ya está en su lugar. La parte final que vamos a hacer, si echamos un vistazo a la versión final, es crear este círculo de progreso hacia abajo en la parte inferior. 8. Círculo de progresos: Bienvenidos de nuevo y a este video final de este proyecto. Este video se trata de concentrarnos en nuestro ProgressCircle, que vamos a crear, igual que en la versión final, justo aquí. Cada vez que el usuario introduzca un valor en el campo numérico, como este, entonces se actualizará el objetivo semanal y éste se convertirá en un porcentaje para que podamos actualizar el ProgressCircle. Ahora, estoy consciente de que hay muchas maneras diferentes en las que podemos hacer esto. Podemos usar cosas como el Canvas, y hay muchas opciones más complejas que podemos usar. No obstante, he tratado de mantener esto lo más simple posible para este proyecto. El modo en que vamos a hacer esto es haciendo uso de una función CSS llamada el gradiente cónico. El modo en que esto funciona es crear un gradiente de color el cual se transita alrededor del punto central. Aquí podemos ver tenemos la primera sección, que es de color rojo, y esto es de 0-6 grados, la sección naranja luego continúa de 6-18 grados, después tenemos la sección amarilla hasta 45 grados y esta cosa continúa redonda. Si nos desplazamos hacia abajo, podemos ver la diferencia entre el gradiente cónico y el gradiente radial. El tipo cónico es más adecuado a nuestras necesidades ya que vamos a hacer uso de esta rotación para crear nuestro ProgressElement. El gradiente radial, por otro lado, proporciona la transición hacia afuera desde el centro, creando estos anillos que en realidad no son de mucho uso para nuestro círculo. Empecemos de nuevo en el index.html. Al principio agregamos un envoltorio para esta sección y luego creamos una sección de tareas pendientes. Dentro de aquí voy a crear dos nuevos divs. Este primero va a ser el div real para nuestro círculo. Entonces le voy a dar a este un DNI de ProgressCircle. Entonces siguiente dentro voy a añadir un segundo div. Esto tendrá el ID de ProgressCenter. El motivo de este apartado quedará más claro muy pronto. En primer lugar, vamos a apuntar a toda esta sección que está abajo en la parte inferior, empezando por nuestro texto. Esto se encuentra dentro de la sección de progreso. Guardemos esto y vayamos a nuestro styles.css. Justo en la parte inferior, podemos empezar apuntando a la sección de progreso. Podemos alinear el texto en el centro y también añadir algo de relleno en la parte inferior. A continuación el texto está contenido en el encabezamiento de nivel 3. Apuntemos el progreso h3, tamaño de fuente de 1.6 rems, y también este peso de fuente, vamos a establecer esto para que sea más ligero. A continuación podemos empezar a trabajar en nuestro ProgressCircle. Entonces tenemos el envoltorio exterior, que es ProgressCircleWrapper. Vamos a agarrar esto, poner el flexbox, y luego justificar que el contenido esté en el centro. Volver a nuestra hoja de estilo. Agrega esto en. Ellos pueden usar todo el flexbox, por lo que entonces podemos justificar nuestro contenido en el centro. Esto va a colocar el círculo una vez que lo creemos en el medio de nuestra sección. A continuación tenemos el propio ProgressCircle, que va a tener el gradiente cónico. Volver a nuestra hoja de estilo. Este fue un DNI. Para que esto sea igual podemos establecer el ancho. Quiero ir por 250 pixels y también una altura coincidente. El ejemplo que habíamos visto antes en el sitio web de Mozilla utilizó una sección cuadrada, tal como vemos aquí. Pero en cambio voy a convertir esto en un círculo añadiendo un radio fronterizo. Un valor del 50 por ciento hará circular este. Ahora podemos hacer uso de nuestro gradiente cónico estableciendo esto como una propiedad de fondo. Sí vimos muchos valores diferentes ingresados en el ejemplo anterior. Pero todo lo que necesitamos son dos valores diferentes. Sólo necesitamos los valores verdes, que es el número total de millas que el usuario ha corrido y luego la sección gris para el resto del círculo. Estos solo van a ser valores de marcador de posición por ahora, y los actualizaremos con JavaScript muy pronto. El color verde es 70db70. Agregar cualquier primer valor de 50 por ciento, significa que esto correrá de cero derecho a 50 por ciento. El segundo valor va a ser un valor hexadecimal de 2d3740. Para el segundo valor, si establecemos que este sea del 50 por ciento, si no agregamos un segundo valor como el 70, esto correrá directo hasta el 100 por ciento. Ahora vamos a guardar esto y pasemos a nuestro proyecto. Recargar. Esto ahora coloca nuestro gradiente cónico en el tamaño completo de nuestro círculo. Pero si echamos un vistazo a la versión final, tenemos el círculo central justo aquí, dado como la aparición de un anillo. Esta es la sección que has agregado a mitad de ProgressCenter. Vamos a agarrar esto. Todo lo que vamos a hacer es usar efectivamente esto como una máscara que cubre el centro del círculo. Esto va a ser similar a justo arriba, pero vamos a hacerlo un poco más pequeño ajustando el ancho a 220. Lo mismo para la altura. Esto también necesitará un radio de frontera, por lo que es un círculo. Para darle también a esto una apariencia de un anillo necesitamos hacer que el color de fondo sea el mismo que el resto de la app. El valor actual fue de 1c262f. Sobre nuestro proyecto y veamos cómo se ve esto. Tenemos el centro del círculo ahora en su lugar, pero sólo necesitamos asegurarnos de que esto esté centrado. Podemos hacer esto dentro de nuestro ProgressCircleWrapper. Vamos a configurar esto con el tipo de pantalla de flex. Recuerda que esto es para el envoltorio. Entonces podemos justificar el contenido a través de la página hacia el centro y también establecer la alineación vertical usando align-items. Bien. Esto ahora se ve exactamente como queremos que lo haga. Ahora pasemos a nuestro script.js y podemos crear una función que se va a actualizar esto. Llamemos a esto CalcGoal. El primero que tenemos que hacer dentro de esta función es acceder a nuestro valor total. Este es el valor justo aquí. Una vez que tengamos esto, podemos entonces dividir esto por nuestro objetivo. De la forma en que podemos agarrar esto, al igual que arriba, agarraremos el valor total. Vamos a copiar esto. Pegue esto en, y esto hace uso de nuestra función reductor para agarrar todos los elementos dentro de nuestra matriz y agregarlos todos juntos. El siguiente paso que debemos dar es calcular un porcentaje entre cero y 100. Entonces vamos a usar estos valores dentro de nuestro CSS para actualizar nuestros dos colores. Para convertir esto en un porcentaje, primero agarremos el valor total y luego para obtener esto como porcentaje, necesitamos dividir esto por nuestro objetivo dividido por 100. Podemos entonces almacenar esto dentro de una constante. Llamemos a esto CompletedPorciento. También podemos hacer un console.log antes de ir más allá y comprobar que todo esto está funcionando bien. Añadamos esto en nuestro registro. También podemos llamar a esta función desde handle submit. Guardemos esto. Abre las herramientas de desarrollador con el botón derecho e inspecciona en la consola. Añadamos un valor de 10. Esto dividido por nuestro objetivo nos va a dar un valor del 40 por ciento. Si hacemos 2.5, 10 más 2.5 es igual a la mitad de nuestro objetivo, lo que resulta en 50 por ciento. Ahora tengo este valor, ahora podemos usar esto para actualizar el estilo de nuestro ProgressCircle. Vamos a agarrar esto por el ID de en el guión. Volver a CalcGoal. Podemos quitar el console.log y luego llamar a document.QuerySelector. El selector era un ID, por lo que pasamos el valor hash en de ProgressCircle. Obvio dentro de una constante llamada ProgressCircle. Ahora en lugar de tener el cónico radiante codificado duro aquí, ahora podemos comentar esto y luego agregar esto dentro de JavaScript. El modo de hacerlo es acceder a nuestros elementos ProgressCircle. Podemos establecer cualquier propiedad de estilo como nuestro fondo. Podemos volver a establecer esto igual a nuestro gradiente cónico. Copiemos la sección, igual que está dentro del estilo, peguemos esto como una cadena dentro de las citas. Estos siguen siendo sólo valores codificados de forma dura. Vamos a probar esto. Cualquier valor que agreguemos dentro de aquí seguirá resultando en una división de 50-50. Significa que nuestro siguiente paso es hacer que estos dos valores sean más dinámicos. De la forma en que podemos hacerlo, si eliminamos las cotizaciones, puede sustituirlas por las backticks. Estos backticks nos van a permitir crear una cadena de plantilla, que es una forma de insertar variables en nuestro texto regular. Podemos quitar nuestro 50 por ciento. El modo en que insertamos una variable es usar el símbolo del dólar y luego las llaves. El primer valor va a ser el equivalente de nuestra variable por ciento completado. Añadamos esto en. También necesitamos el símbolo de porcentaje, y luego necesitamos actualizar nuestro segundo valor. Nuevamente, este va a ser nuestro CompletePorcentaje todo el camino hasta el 100 por ciento. Dado que este es nuestro primer valor, éste pasará de cero derecho a través de nuestro CompletedPorciento. Digamos que esto es 50 por ciento, pasará de cero a 50. El segundo valor pasará entonces de 50 a la derecha hasta el final de nuestro círculo, que es del 100 por ciento. Justo antes de actualizar nuestro ProgressCircle, podemos agregar una declaración condicional justo arriba. Podemos agregar un comunicado if para comprobar si el porcentaje completado es superior al 100. Si lo es, entonces sólo vamos a restablecer esto a 100. Por lo que nuestro ProgressCircle siempre va de 0-100. Podemos comprobar si el CompletedPorcentaje es mayor a 100. Si lo es, entonces restableceremos esto al 100 por ciento. Vamos a probar esto. 12.5, que es exactamente la mitad, nuestro ProgressCircle ahora es 50-50. Insertar un nuevo valor. Hagámoslo redondo al 100 por ciento. 22.5, sólo necesitamos agregar un valor de 2.5. Esto ahora completa nuestro círculo. Si tratamos de agregar un nuevo valor, vemos que el ProgressCircle no va más allá. Ya que recibimos el 100 por ciento de nuestro objetivo para esa semana, esta es ahora toda la funcionalidad ahora completa para nuestro rastreador en ejecución. Tan solo para terminar esto, vamos a agregar una consulta de medios solo para restringir el ancho máximo de algunos de estos elementos. Volver a nuestros estilos. Añadamos una consulta de medios que va a apuntar a nuestras pantallas, junto al ancho mínimo de pantalla de 800 píxeles. Hasta el momento, los dispositivos de 800 píxeles y superiores restringirán el ancho del cuerpo para ser igual al 60 por ciento. También podemos restringir el ancho de esta entrada numérica también. Todavía dentro de la consulta de medios, la entrada con el tipo de número, todo lo que necesitamos hacer de nuevo es establecer ancho y esta vez de 40 por ciento. Por último, también podemos reducir el tamaño de este svg en las pantallas más grandes. Vamos a apuntar al svg, estableciendo el ancho máximo para ser 50 por ciento. [ inaudible] seguirá viendo que hay mucho espacio por encima de la parte superior e inferior de este svg. El modo de arreglar esto, si vamos a nuestro index.html, es ir a nuestra etiqueta de apertura svg. Dentro de este tipo, podemos ver que aún tenemos el ancho y el conjunto de altura. Podemos quitarlos, permitiendo que el dimensionamiento sea controlado con nuestra hoja de estilo. Guarda esto y ahora svg ocupa menos espacio. Enhorabuena por ahora llegar al final de este proyecto, y nos vemos en el siguiente. 9. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo hayas disfrutado y obtuvieras algún conocimiento de ello. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare, y también sígueme para cualquier actualización y también para estar informado de cualquier clase nueva a medida que estén disponibles. Entonces gracias una vez más, buena suerte, y ojalá te vuelva a ver en una futura clase.