Diversión con Javascript: ¡crea una calculadora de propina!

1. Te damos la bienvenida a la clase.: Hola, bienvenidos a esta clase. Si eres principiante en desarrollo web y quieres simplemente saltar y construir algunos proyectos divertidos, has llegado al lugar correcto. La idea detrás de esta serie es mostrarte lo que puedes hacer con HTML, CSS, y JavaScript regulares. No vamos a estar usando ningún frameworks, ningún boilerplate, ninguna librería, ni ninguna de las plantillas. En cambio, vamos a estar construyendo todo completamente desde cero, paso a paso, para mostrarte cómo funcionan todas estas tecnologías gratuitas. Este proyecto de clase' va a ser una aplicación calculadora de propinas. El usuario puede ingresar cualquier valor o la factura total en el campo de entrada superior. Podemos entonces seleccionar un porcentaje o la punta, que quieren sumar, y luego esto recalculará automáticamente todos los valores. Verás el valor total de la punta que se está calculando, y luego esto también se suma al total de la factura también. Si quisieran y quieren dividir la cuenta entre varias personas, también tendremos este deslizador de rango aquí. Entonces podemos dividir el proyecto de ley entre múltiples personas. Esto luego recalculará el total de la factura por persona, y también el valor de la propina por persona también. Este proyecto se construirá completamente desde cero. Crearemos la interfaz de usuario usando HTML. Pasaremos a agregar estilo con CSS. Junto con mirar cómo agregar estos rango totalmente personalizado [inaudible] también. Veremos la fuente, los prefijos del navegador, y luego pasaremos a hacer que nuestra aplicación sea totalmente interactiva usando JavaScript. Aprenderás sobre funciones, matemáticas, eventos, todos los valores monetarios [inaudibles], leer, y actualizar el DOM, y mucho más. Este proyecto ha sido diseñado para principiantes, y es ideal para alguien con solo un poco de conocimiento de HTML, CSS y JavaScript. Me emociona enseñarte esta clase, y te veré 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 bien de quitarse otra conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted 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 desviarte de la clase e incluso puedes dar un paso atrás después de haber terminado la clase, y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. También recuerda compartir tu proyecto también aquí en Skillshare y solo lo revisaré, pero también inspirará a otros estudiantes también. Para obtener 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 subes aquí en Skillshare. 3. Crear la interfaz de usuario: Esta sección se trata de crear nuestra Calculadora de Tip. Esta va a ser la versión final que vamos a estar construyendo en este apartado. El usuario puede ingresar una factura dentro del campo de entrada arriba en la parte superior. Entonces justo debajo podemos sumar el porcentaje de propina, que queremos sumar a este proyecto de ley. Por ejemplo, vamos por 20 por ciento y todo el resto de los valores se actualizan dinámicamente. Justo debajo, tenemos el valor de la propina y esto también se suma al total de la factura para darnos el total a pagar. Debajo de esto, también tenemos una sección separada que va a permitir al usuario dividir la factura entre varias personas. Por el momento, sólo tenemos esto como una persona, por lo que todos los valores son iguales. Si queremos que esto se divida entre dos personas, los valores se reducen a la mitad y vemos exactamente cuánto debe pagar cada usuario. Este primer video va a estar enfocado en crear la interfaz de usuario mediante el uso de HTML. En los próximos videos, vamos a agregar algo de estilo y diseño con CSS, y luego pasaremos a los trabajos y cálculos, y también haremos que la interfaz de usuario sea dinámica mediante el uso de JavaScript. Empecemos por crear una nueva carpeta. Voy a agregar el mío al escritorio y llamar a esto la calculadora de propinas. También puedes organizar esto dentro de una carpeta de proyecto si lo prefieres, pero solo voy a empezar arrastrando sobre esta carpeta del proyecto al Código de Visual Studio. El primero que necesitamos es una página de Índice que contendrá el HTML. Dentro del proyecto, crea un nuevo archivo. Voy a llamar a esto el index.html, y también podemos cerrar la barra lateral para más espacio. Visual Studio Code viene completo con un plugin llamado Emmet, que nos permitirá agregar atajos para crear nuestra estructura HTML. Por ejemplo, podemos agregar la columna 5 HTML, pulsar “Enter”, y esto nos dará un punto de partida para nuestro proyecto. Simplemente incluye todos los metadatos que comúnmente agregaremos, como la metaetiqueta de la ventana gráfica y también el conjunto de caracteres que estamos usando. El título arriba en la parte superior, voy a llamar al mío Quick Tip, y luego podemos llegar a trabajar creando nuestro contenido dentro de la sección de cuerpo. Podemos envolver todos estos Tip Calculator dentro de las etiquetas principales, seguido de un encabezado de nivel 1 el cual va a ser el título de nuestro proyecto. Guarda este archivo, y ahora si hacemos clic derecho, copiamos la ruta, pegamos esto en el navegador, este ahora es el enlace a nuestro proyecto. También puedes ingresar a la carpeta del proyecto y hacer doble clic en el “Index.html”, que también abrirá esto en el navegador predeterminado. Lo que vamos a hacer a continuación es pasar por todas las secciones disponibles de arriba a abajo. Vamos a crear esta sección blanca arriba en la parte superior que va a ser para las entradas del usuario como la factura y el monto de la propina, vamos a sumar ciertos divs que vas a envolver todos estos elementos, y luego vamos a sumar nuestro segundo sección hacia abajo en la parte inferior. Debajo del encabezado nivel 1 podemos agregar nuestra primera sección, dentro de aquí añadiremos nuestro primer div, que es para nuestra primera sección que incluye la etiqueta de factura y también la entrada numérica. Incluyamos esto. Ahora, tenemos nuestro div. Esto tendrá una etiqueta llamada Bill, nuestra entrada. Ahora, ya que esto va a ser una entrada numérica, podemos darle a esto un tipo de número. También podemos agregar el atributo marcador de posición, que va a ser el texto de tu factura. Este será el valor que se muestra dentro de las entradas si no se ha agregado ningún número, seguido de un ID único el cual va a ser tu factura. Esto nos permitirá apuntar esta entrada con JavaScript para que podamos agarrar el valor que el usuario ha ingresado. También podemos vincular esto a nuestra etiqueta agregando el mismo nombre para atributo. Esto significará que si guardamos esto y pasamos al navegador, cada vez que hacemos clic en la etiqueta, esto también activará nuestra entrada numérica. Al bajar, también tenemos un deslizador de rango que está justo aquí. Esto va a tener una sección que va a envolver tanto los insumos como también la etiqueta y también el porcentaje. Añadamos esto ahora como un div, y luego podemos agregar un nuevo div anidado dentro. Esto va a ser para la fila superior de la etiqueta y porcentaje. El rótulo tendrá los elementos de etiqueta y el valor de punta selecta. Justo después de esto, crearemos un elemento span y le daremos un ID para que podamos apuntar a esto desde nuestro JavaScript. Podemos llamar a esto el TipPercentent. Posteriormente, poblaremos los contenidos de esta usando JavaScript. Por ahora solo agregaremos esto como cero por ciento para que podamos ver cómo se ve esto en nuestra interfaz de usuario. Justo después del div circundante podemos entonces crear nuestra entrada, y este va a ser un tipo de rango. Esto nos dará este slider de rango el cual veremos en la versión final, aunque puede verse un poco diferente por el momento. Podemos establecer el valor inicial, queremos que esto comience en cero por ciento seguido de un ID de TipinPut. Nuevamente, podemos usar esto para la etiqueta. Esto también se usará con JavaScript más adelante para agarrar el valor de la punta. Guardemos esto y veamos cómo se ve esto en el navegador. Ahí está la estructura, tenemos la etiqueta, tenemos el porcentaje, y también el deslizador de rango. Esto obviamente se ve muy diferente a nuestra versión terminada pero lo arreglaremos con CSS muy pronto. Bajando si volvemos a la versión terminada siguiente necesitamos una sección de propinas. Esto va a ser bastante sencillo. Tenemos la etiqueta y también el valor en el lado derecho. Tendremos una regla horizontal, y luego una sección que va a ser para el total. Primero creemos esta sección de tips justo debajo de nuestro último div. Crea un nuevo div para esta sección, un span con el valor de punta, seguido de un lapso vacío con el ID que va a ser igual a TipValue. Esto nos permitirá posteriormente agarrar estos elementos por el ID, y luego colocar un valor dentro. Después de esto una regla horizontal para crear nuestra línea, y luego la sección final hacia abajo en la parte inferior. Agrega nuestro div como envoltorio, el lapso con el texto de total. Entonces al igual que arriba agregaremos un lapso vacío el cual se va a actualizar con JavaScript. El valor va a ser el total el cual incluye una propina. Llamaremos a esto TotalWithTip. Esto ahora son todos los elementos en su lugar para nuestra primera sección, si recargamos el navegador estos están todos ahora en su lugar. El siguiente paso a hacer es bajar a la sección final que es dividir el proyecto de ley. Justo debajo de nuestra etiqueta de cierre para esta sección, vamos a crear una nueva sección. El primer round en div va a ser para la entrada dividida. Esta sección justo aquí. Al igual que hicimos con el valor de punta arriba en la parte superior, crearemos un div que contendrá la etiqueta y también el número de personas. Después seguiremos esto con un deslizador de rango. El div para el texto, esto tendrá la etiqueta con el texto de split. A continuación agregaremos un lapso en línea con el ID de SplitValue. Esto se actualizará con el valor de una persona. A medida que esto aumente, serán dos personas, tres personas, y así sucesivamente. Justo debajo de esta sección div podemos entonces crear la entrada. Al igual que por encima de esto tendremos el tipo de rango. También podemos restringir los valores dentro de esta entrada de rango. Para empezar, queremos crear el valor mínimo de uno. Esto se debe a que siempre va a ser un mínimo de una persona la cual se va a dividir el proyecto de ley. Podemos establecer un valor máximo. Este puede ser cualquier valor que prefieras. Voy a ir por 10 y establecer el valor predeterminado inicial para que sea uno. Esto también necesita una identificación única. Voy a llamar a esto el SplitInput que también podemos emparejar con la etiqueta. Comprobemos si todo esto está funcionando, actualicemos el navegador, y tenemos una nueva entrada de rango. También puedes agregar un valor predeterminado aquí si lo prefieres. Entonces una persona y vamos a ver esto dentro del navegador. A continuación, tenemos dos secciones más simples en la parte inferior que es un div simple con la etiqueta y también los valores de la derecha. El primer div, esto va a tener un lapso con el valor de factura cada uno, seguido también de un lapso vacío con el ID de BilleAc. El tramo final en la parte inferior es la punta cada uno y también el valor. Crea un nuevo div, el span con el texto de punta cada uno, seguido de un lapso vacío con el ID que va a ser igual a TiPeach. Guarda nuestro archivo index.html y este es ahora todo el contenido HTML que necesitamos. Recarga el navegador y todo está ahora en su lugar. Obviamente, nuestra Calculadora de Tip no se parece en nada a la versión final por el momento, pero empezaremos a arreglarlo en el siguiente video donde aplicaremos algo de CSS. 4. Cómo aplicar estilo con CSS: Pasando de nuestro HTML, ahora vamos a hacer que nuestro proyecto se vea y se sienta mucho más agradable, y lo vamos a hacer aplicando algo de CSS. Lo primero que tenemos que hacer si abrimos sobre esta barra lateral es crear un nuevo archivo, nuestros estilos. Voy a llamar al mío el styles.css, y luego podemos enlazar esto en el index.html. Hacemos esto sobre la parte superior dentro de la sección de cabeza utilizando el elemento de enlace necesario. Esta es una relación con una hoja de estilo, por lo que esto está bien, y la href es la ubicación de este archivo. Este archivo está contenido junto a esta página de índice por lo que simplemente podemos hacer referencia a esto con el nombre de styles.css. Volver a nuestra hoja de estilo, podemos comenzar con el elemento HTML, que es la raíz de nuestro proyecto. Voy a empezar declarando el tamaño de fuente como un valor de 10 píxeles. Ahora bien, este valor es completamente opcional, igual que todos estos CSS que vamos a agregar. Puedes hacerlo tuyo, puedes cambiar valores para que se vea y sienta exactamente como queríamos. Ahora la razón por la que he seleccionado a 10 píxeles para el tamaño del proyecto raíz es porque es un buen número redondeado y podemos usar los valores rem. La báscula está arriba y abajo muy fácilmente. Por ejemplo, si creamos un valor de relleno como un rem, este será un valor de 10 píxeles. Si queremos que esto sea de 16 píxeles, esto será de 1.6 rems, por lo que el valor redondeado hace que las cosas sean agradables y fáciles al escalar hacia arriba y hacia abajo. A continuación, estableceremos el valor del color. Este va a ser el color de nuestro texto. El color que voy a seleccionar es 4e4d4d. Echemos un vistazo a esto y probemos si esto está funcionando. Guarda el archivo, vuelve a cargar el navegador, voy a ver que los estilos ya han entrado en vigor. Vamos a abrir la vista dividida dentro de Visual Studio Code, para que puedas ver tanto la página de índice como también los estilos al lado. El siguiente elemento que voy a estilizar es el contenedor principal. Si recuerdas del último video, rodeamos toda la calculadora de puntas en esta sección principal. Este va a ser nuestro envoltorio principal. Podemos establecer el ancho máximo de la calculadora de puntas para que sea de 50 rem. Recuerda que ya que hemos establecido el tamaño de fuente raíz en 10 píxeles, 50 veces 10 harán de este el equivalente a 500 píxeles. También podemos centrar esto mediante el uso del margen cero auto. Esto aplicará margen cero en la parte superior e inferior y dividirá el resto del espacio de izquierda y derecha por igual. Guardar y refrescar, y esto ahora ha colocado una cantidad igual de espacio en blanco a la izquierda como está a la derecha. Pero sólo para darle a esto algo de espaciado desde la parte superior de la página, podemos cambiar este valor para ser dos rems para darnos 20 píxeles de margen. A continuación, podemos establecer el color de fondo. Podemos establecer esto como un color de fondo sólido regular, o voy a establecer el mío para aprovechar los gradientes lineales. Este gradiente lineal nos permitirá transitar de un color a otro en línea recta. Hagamos algo de espacio, aplicamos el gradiente lineal, y luego podemos agregar dos valores entre los que quieres transitar. El primer valor que voy a agregar es un valor de 3dc0c0, separado por una coma nuestro segundo valor es 5bceae. Si guardamos esto, deberíamos ver la sección principal ahora tiene una transición de un tono a otro. Por defecto, estos colores transitarán verticalmente de arriba a abajo. También podemos cambiar el ángulo como primer valor. Yo quiero cambiar el mío para ser de 30 grados. Refresca, esto ahora cambia nuestro gradiente de vertical para atravesar la página en un ángulo de 30 grados. Después de nuestros antecedentes, también podemos agregar algunos valores de relleno, y dentro aquí voy a sumar cuatro valores diferentes. Entonces tres rem, 1.6 rem, seis, y luego finalmente, 1.6 rems. Estos cuatro valores de relleno aparecerán en la parte superior, derecha, inferior e izquierda. Guardemos y actualicemos el navegador, dejando esto con algo de espacio alrededor de los bordes. A continuación, el frontero-radio, y voy a sumar esto como un valor de cuatro rems. Esto va a ser bastante grande, y esto se aplicará a los cuatro lados de nuestra calculadora de propinas. Para darle a esta calculadora de punta la impresión de un poco de profundidad, también podemos agregar una caja-sombra. Voy a añadir una caja-sombra al fondo de nuestra sección principal circundante. Esta caja-sombra va a tomar cuatro valores diferentes. El primero es la posición x, tenemos la posición y, tenemos el valor del desenfoque, y luego también el color a aplicar. Si pasamos a la página web de Mozilla, éste tiene un generador de sombras de caja, para que podamos ver mejor qué está pasando. Por el momento, sólo tenemos un elemento sencillo con una frontera. Si agregamos una caja-sombra, entonces podremos jugar con los valores x e y. El eje x es el valor de izquierda a derecha o a través de la página. Sólo el valor y es arriba y abajo. Actualmente, el valor x es de cinco píxeles, por lo que esto significa que esto se empuja desde cinco píxeles. También podemos establecer que esto sea negativo cinco, y esto colocará estos cinco píxeles a la izquierda. En el eje y que está arriba y abajo, este es un valor de cinco negativos, cambiamos esto para que sea positivo, esto luego aparecerá hacia abajo en la parte inferior. También podemos cambiar los colores, podemos cambiar los valores de desenfoque y hacer esto realmente grande. Pero para nuestro ejemplo sólo vamos a hacer que esto sea bastante sutil, así que vamos a seguir con algunos valores pequeños. El primer valor que está en el eje x, voy a establecer esto como cero para que no empuje desde el lado izquierdo o derecho. El segundo valor es de dos píxeles, por lo que esto aparecerá en la parte inferior de nuestro elemento. A su lado tenemos el valor del desenfoque. Nuevamente, esto va a ser bastante pequeño, y luego también un bonito color claro y sutil de gris claro. Volver a nuestro proyecto, refresca el navegador y vemos una caja-sombra muy pequeña en la parte inferior de nuestra sección principal. Esto se encarga del peinado para nuestra sección principal, y ahora trabajamos en los elementos individuales dentro. A partir de lo muy alto, tenemos la punta rápida, que está rodeada en el rumbo nivel 1. Vamos a apuntar a la h1. Podemos configurar el text-align para que esté en el centro. También queremos que esto sea un poco más grande para que podamos establecer este font-size el valor de tres rem. Los encabezados de nivel 1 tienen un margen por defecto el cual es aplicado por el navegador, por lo que voy a eliminar esto configurando que sea un valor de cero. Justo por encima de este rumbo de nivel 1, veremos que hay mucho más espacio en la parte superior que en la inferior. Esto se debe a que el principal div circundante tiene este valor de relleno de tres rem en la parte superior. También podemos equilibrar esto hacia arriba dentro de nuestro encabezado nivel uno agregando algo de relleno en la parte inferior también de tres rems. Si echamos un vistazo a la versión final, veremos que cada una de nuestras secciones también tiene este color de fondo blanco. También podemos apuntar a esto dentro de nuestro CSS, así que vamos a agarrar el elemento de sección, y podemos comenzar con el color de fondo del blanco. El font-size, podemos establecer esto en 18 píxeles, que es el equivalente a 1.8 rems. Guardar y recargar. Actualmente no hay espacio entre nuestras dos secciones, por lo que podemos arreglar esto con algún margen en la parte inferior. Vamos por 1.6 rems. En el relleno, que nos dará el espaciado interior de nuestra sección blanca, al trabajar con margen de relleno si solo tuviéramos dos valores, el primer valor será el superior e inferior, que voy a establecer como cero, y el segundo valor será la izquierda y también la derecha. Si es consistente, también añadiremos esto como 1.6 rems para darnos algún espaciado a la izquierda y a la derecha de cada una de estas secciones. Un radio fronterizo de un rem, y luego también una caja-sombra a la sección 2. Para dar esto consistente, podemos igualar nuestros valores desde antes. Entonces cero, dos píxeles, dos píxeles se desdibujan, y también el color del gris claro. La única diferencia que vimos en esta sección es que queremos que esto aparezca como si estuviera inset dentro de la sección principal. Podemos agregar al valor de inset a nuestra caja-sombra, y esto reemplazará a la caja-sombra dentro en lugar de fuera del elemento. Si volvemos a la página web de Mozilla podemos ver esto con más claridad. Podemos hacer clic en “Inset”, y también reducir el desenfoque, y vemos que este desenfoque ahora está dentro del elemento en lugar de afuera como teníamos antes. Al entrar un nivel más profundo de todas las secciones, vemos que cada una de nuestras partes de nuestra calculadora de puntas está rodeada de un div. Ahora podemos apuntar a esto en el CSS. Queremos apuntar a todos los divs que sean un hijo directo de sección. Tenemos la sección y luego un nivel en, y tenemos este div, entonces tenemos este div. Todo el estilo se aplicará a estos primeros divs anidados dentro. Por ejemplo, este que vemos aquí está un nivel más allá. Por lo que esto no se aplicará al apartado. Si quisiéramos que el estilo se aplicara a todos nuestros divs dentro de la sección, haríamos el CSS así, pero solo queremos seleccionar los hijos directos. Todo lo que vamos a hacer aquí es agregar algunos valores de relleno de 1.6 rems en la parte superior e inferior, y cero en la izquierda y en la derecha. Esto nos va a dar el espaciado alrededor de cada una de estas secciones. A continuación, agreguemos un poco de estilo a nuestra sección de proyectos de ley en la parte superior de nuestra primera sección. Para ello, podemos agregar una clase a este envoltorio de factura, y luego podemos apuntar a esto en el CSS. Ya que es una clase, usamos el punto, so.bill, y vamos a hacer uso del flexbox CSS. Hacemos esto configurando primero el wrapper para tener el tipo de pantalla de flex, guardar y refrescar. Todavía no vemos ninguna diferencia, pero también ahora podemos usar esta pantalla de flex para aplicar estilo a estos niños anidados por dentro. Anidado dentro tendrá la etiqueta y también la entrada con el tipo y número. Empecemos con la etiqueta. so.Bill y la etiqueta. Esto apuntará a la etiqueta dentro de nuestra sección de proyectos de ley. Ya que estamos usando el flexbox, podemos establecer un valor flex de uno, y luego justo debajo de esto, podemos apuntar a la entrada de la factura, y darle a ésta un valor flex de tres. Guardar y recargar. Esto ahora significa que la entrada ocupará tres veces el espacio disponible como nuestra etiqueta. A continuación, agreguemos un poco de estilo a estas entradas con el tipo de número. Recuerda, dentro de nuestro HTML, tenemos diversas entradas diferentes. Tenemos éste aquí, tenemos nuestra gama, y también la gama abajo en la parte inferior también. ¿ Cómo somos más específicos con el tipo de entrada al que quieres aplicar estilo? Bueno, podemos hacer esto dentro de estos corchetes seleccionando el tipo. único tipo al que queremos apuntar es el número. Esto significará que el estilo que agregamos dentro estas llaves solo se aplicará a nuestras entradas numéricas, en lugar de nuestro rango justo debajo. En primer lugar, vamos a establecer el color de fondo. El valor que voy a usar es f4f4f5. El tamaño de fuente para hacer esto un poco más grande, 1.6 rems, que equivale a 16 píxeles. El borde, podemos establecer el grosor para que sea de un píxel, la línea sea sólida, y vamos a darle a esto un color gris claro. También podemos redondear las esquinas aplicando algún radio de borde de 0.5 rems, algún relleno, y de nuevo, quiero agregar cuatro valores diferentes, por lo que 0.8 rems en la parte superior, cero en la derecha, 0.8 también en el fondo, y 0.8 rem a la izquierda. Recarga el navegador, y esto nos dará igual espaciado en la parte superior, izquierda e inferior, y cero en el lado derecho. Ahora nuestro insumo es un poco más alto, ahora veremos un problema alineando esto con el proyecto de ley. Si miras la versión final, esto también se va a alinear en la línea central de nuestro insumo. Bueno, ya que configuramos la sección para que tenga el tipo de pantalla de flex, podemos solucionarlo fácilmente agregando una propiedad flex llamada align-self, establezca este para que sea el centro. Esto ahora se alinea con la línea central de nuestra entrada. A continuación, vamos a añadir una sombra de caja al igual que en la versión terminada. Para hacer coincidir con nuestra sección circundante, también vamos a configurar esto para que se inset. También haciendo uso de los mismos valores que antes. El cuadro de sombra va a ser inset. Los valores x e y van a ser cero y dos píxeles, un desenfoque de dos píxeles, seguido del color del gris claro. A continuación, si echamos un vistazo a nuestra versión final, vemos que cada una de nuestras secciones, como la punta y el valor, se basa en cada lado de nuestra calculadora. Esto también aplica para la sección total, la punta, y también el valor, y también estos valores hacia abajo también en la parte inferior. El modo en que podemos crear el espaciado es también aprovechando el flexbox. El flexbox tiene una propiedad llamada justify-content, donde podemos establecer el espacio para que esté entre ambos elementos. Para ello, necesitamos apuntar a múltiples secciones de nuestro HTML, para que podamos agregar una clase a cada una de estas. El primero va a ser la etiqueta de punta selecta y el valor. Echemos un vistazo a esto en nuestro HTML. Esta es la sección justo aquí. Añadamos una clase. Vamos por el espacio-medio. Copia esto y podemos reutilizar esto en múltiples lugares. También necesitamos agregar esto a la sección de punta, y también a la sección total donde tenemos dos valores en la misma línea. El envoltorio de puntas, el envoltorio para nuestra sección total, el split, y también el BilleAc, y las secciones TiPeach hacia abajo en la parte inferior. Ahora en el CSS, podemos apuntar a este espacio-intermedio, establecer el tipo de visualización para que sea flex. Ahora si seleccionamos justify-content, podemos aplicar todo este espacio para estar entre. Guardar y recargar. Ahora en lugar de tener el texto y los valores uno al lado del otro, estos ahora tienen nuestro espacio en el medio. Tan solo para redondear el CSS para este video, vamos a hacer que nuestra sección total sea un poco más audaz. Podemos hacerlo agregando una clase a nuestra sección total. Justo después del espacio-intermedio, podemos agregar una segunda clase, envolver esto en el CSS. Primero vamos a establecer el tamaño de la fuente para que sea dos rems, y también establecer el font-weight sea más audaz. Recargar, ahora tenemos este texto más audaz más grande. Esto ahora nos deja con el CSS principal hecho para este proyecto. No obstante, en el siguiente video, vamos a seguir adelante, y añadir algunos toques finales más bonitos. Por ejemplo, vamos a incluir una fuente diferente. También vamos a hacer nuestro propio slider de rango personalizado, en lugar de usar el predeterminado del navegador, que actualmente vemos aquí. 5. Fuentes, deslizadores personalizados y prefijos del navegador: Sigamos con nuestro estilo para este proyecto, pasando a crear un deslizador de rango personalizado. Por el momento, si echamos un vistazo al proyecto en el escenario, en qué estamos actualmente. Esto hace uso del rango predeterminado del navegador, y no se ve demasiado bien ni encaja con nuestro proyecto actual. Entonces hablemos de cómo podemos crear nuestro propio slider personalizado. En primer lugar, necesitamos establecer la apariencia de nuestros deslizadores de rango actual para que sean ninguno, para eliminar todo el estilo predeterminado. Entonces podemos seguir adelante y crear la nuestra propia con algún CSS personalizado. No obstante, el soporte del navegador no es perfecto para algunas de las técnicas que vamos a utilizar. Podemos evitarlo mediante el uso de prefijos de proveedor. Agregar un prefijo de proveedor a una propiedad CSS es una forma hacer uso de ciertas propiedades experimentales de CSS, y también propiedades que aún no son totalmente compatibles actualmente en navegadores particulares. Si nos desplazamos hacia abajo, vemos los prefijos principales que podemos usar. El primero es webkit, que se aplica a todos estos navegadores, como Chrome y Safari. Tenemos entonces el prefijo moz, que se aplica a los navegadores Firefox. También podemos apuntar a versiones anteriores de Opera y también a Internet Explorer. Pero para este proyecto en particular, me voy a centrar en estos dos primeros. Todo lo que necesitamos hacer es encontrar una determinada propiedad CSS, como la transición, y luego agregar la inferencia del prefijo moz o webkit. Usando estos, aprenderemos a decirle al navegador que estamos felices de usar estos, y probarlos antes de que se implementen por completo en el navegador. Por lo que para ello, necesitamos apuntar ambos de nuestros insumos con el tipo de rango. Entonces, en primer lugar, tenemos éste justo aquí. Añadamos una clase de rango. Yo también voy a hacer lo mismo para nuestro deslizador de segunda gama, que está justo por debajo. Esto significa que nuestro estilo se aplicará a ambos de nuestros insumos de gama. Entonces empecemos justo por debajo de nuestro total. Podemos seleccionar nuestra gama. El primero que tenemos que hacer es quitar el deslizador de rango predeterminado. Podemos hacer esto estableciendo que la apariencia sea ninguna. La propiedad appearance aún no es totalmente compatible en los navegadores webkit. Por lo que también necesitamos agregar el prefijo webkit delante de esto. Si ahora guardamos esto y vamos a nuestro proyecto, recarga. Vemos que esto ha quitado la barra de progreso de atrás. También pasaremos a peinar este slider de forma muy pronto. Por ahora, sólo nos vamos a concentrar en el deslizador real. Por lo que en primer lugar, podemos establecer el ancho para que sea del 100 por ciento. Por lo que este es el ancho completo de nuestro contenedor. El alto de ocho píxeles, y también podemos establecer el color de fondo de nuestro deslizador. Yo quiero hacer este gris claro, que es el valor de un eee. Podemos empezar a ver que nuestro deslizador está tomando forma ahora. Añadamos ahora algún margen a la parte superior para darnos algo de espaciado del texto, y también un radio de borde. Entonces, en primer lugar, el margen en la parte superior de 1.2 rem, y también un radio fronterizo de 0.3 rem. El siguiente objetivo que podemos apuntar cuando esto está activo o hace clic en es el color del borde que va alrededor del exterior. Podemos seleccionar esto con el color del contorno, y cambiar el valor predeterminado para que sea cualquier color que nos guste. Voy a ir por un valor de marcha que usamos en el gradiente lineal. Entonces 5bceae. Refrescar. Ahora, si hacemos clic en alguno de estos deslizadores, ahora vemos este color verde. El siguiente paso es apuntar a este pequeño círculo, que se llama película de deslizador. Podemos volver a hacer esto en el CSS. Entonces vamos a apuntar a nuestra sección de rango. Entonces si usamos los dobles puntos así como esto, este es un pseudo-elemento. Un pseudo-elemento nos permitirá apuntar a una parte particular de un elemento. Entonces, por ejemplo, si estuviéramos apuntando a un párrafo de texto, tendríamos pseudo-elementos disponibles para seleccionar la primera letra o incluso la primera línea. Pero como estamos trabajando con nuestra gama, vamos a apuntar a la película de deslizador. Específicamente, vamos a apuntar a las versiones de webkit. Por lo que esto sería para los navegadores Chrome y Safari. El único valor que necesitamos es la película de deslizador. También apuntaremos al navegador Firefox en tan solo un momento. Entonces como hicimos con el rango, vamos a establecer que la apariencia sea ninguna. Entonces necesitamos establecer el ancho y las alturas de nuestro pequeño deslizador de película. Entonces vamos por el ancho, 2.2 rem. El alto, que también va a ser el mismo. Si establecemos el radio fronterizo para que sea del 50 por ciento, esto lo convertirá en el círculo completo. Echemos un vistazo a esto. Todavía no lo vemos, porque necesitamos asignar también un color de fondo. Casi quiero establecer este para que sea un color que usamos antes en el gradiente. Ahora vemos nuestro slider de película. Otra cosa que vamos a hacer es cambiar el cursor para que sea un puntero. Ahí vamos. Siguiente. Veamos cómo se ve dentro de un navegador diferente. Voy a ir por Firefox. Pero claro que no necesitas seguir con este paso, si no quieres. Entonces dentro de la calculadora de puntas, abramos el index.html. Vemos que en la actualidad sólo tenemos el estilo predeterminado para el fondo. Todavía no vemos el estilo de la película. Entonces arreglemos esto creando una sección para la película de gama moz. Actualmente, sólo estamos apuntando a la versión de webkit. Entonces vamos a copiar esto y pegarlo abajo. Entonces dentro de aquí, en lugar de tener la versión webkit, que solía ser el prefijo más, y en lugar de película slider, esto se llama la película de rango. Guarda esto y vuelve a cargar el navegador Firefox. Veo que la película ha sido cambiada. Por lo que un par de cosas que tener en cuenta aquí. Vemos que hay una frontera alrededor de la película, dentro de este navegador. Por lo que podemos establecer que la frontera sea ninguna. Esto luego eliminará esto. Tampoco necesitamos incluir el aspecto webkit de ninguno para este navegador. Algo en lo que podemos mejorar cuando hacemos clic y hacemos esto activo, es esta línea punteada alrededor del exterior. El modo de hacerlo dentro de Firefox es apuntando al deslizador de rango. Nuevamente, se ven los dobles puntos para los pseudo-elementos, y los elementos a los que queremos apuntar van a ser moz. Utiliza el prefijo moz para el navegador Firefox. Entonces el nombre de los elementos llama en esto es el foco externo. Podemos establecer el borde para que sea un valor de 0, refrescar, y esto ya se ha eliminado. Por lo que estos prefijos de navegador son algo de lo que hay que tener cuidado cuando se trabaja con múltiples navegadores, y también cualquier cosa que aún no sea totalmente compatible. Por lo que este es nuestro slider de gama de clientes ahora completo. Solo una cosa a tener en cuenta rápidamente, cuando nos desplazamos de nuevo a la sección de rango, aquí, estamos enfocando la apariencia solo para los navegadores webkit. Quizás te estés preguntando por qué no hemos apuntado también a las versiones de Mozilla. Bueno, esto se debe a que, para esta propiedad de apariencia en particular, los navegadores Firefox también respetarán las versiones de webkit. Esto es por razones de compatibilidad. El último pedazo de estilo que voy a aplicar, vamos a cerrar este navegador Firefox, es aplicar algunas Fuentes de Google. Entonces hagamos una búsqueda de Google Fonts y vayamos a fonts.google.com. Voy a usar una fuente llamada roboto. Entonces hagamos una búsqueda de esto. Este es el que necesitábamos justo aquí. Para incluir esto en nuestro proyecto, podemos seleccionar el font-weight, y también si queremos una versión en cursiva también. Voy a ir por la versión ligera 300, el medio, y también una versión audaz también. Para incluir estos, tenemos que hacer click en el enlace embed. Copiar el enlace al estilo. Esto entra en nuestro index.html. Pegaré esto dentro de la sección del cabezal justo encima nuestras hojas de estilo personalizadas. Guarda este archivo. Lo siguiente que hay que hacer es también establecer la familia de fuentes dentro de nuestra hoja de estilo. Entonces copia la propiedad font-family. Abre nuestro styles.css, y podemos aplicar esto para todo nuestro proyecto, dentro de los elementos HTML raíz. Actualiza el navegador. Nuestra fuente ya ha entrado en vigor. También podemos establecer los pesos de fuente predeterminados. Yo quiero ir por 300. Ahora, nuestro estilo se parece mucho más a la versión terminada. Tan solo para terminar este proyecto estilizando fuera. Es bastante difícil de decir desde nuestra entrada justo aquí porque las fuentes no son demasiado disímiles, pero por defecto, una entrada no heredará la familia de fuentes. Para ello, necesitamos desplazarnos hacia abajo hasta nuestra entrada, el tipo de número. Incluso podemos establecer la familia de fuentes igual que una cabina. O podemos establecer que esto sea, heredar. Vuelva a cargar el navegador, y esto ahora surtirá efecto. Por lo que este es ahora el final de la sección de estilismo para nuestra calculadora de puntas. A continuación, vamos a pasar a hacer esta función mediante el uso de JavaScript. 6. Eventos y entradas del usuario: Pasemos a agregar algo de JavaScript a nuestro proyecto, donde realmente vamos a dar vida a nuestro proyecto. Para ello, vamos a crear una sección de guiones hacia abajo en la parte inferior. Entonces si nos desplazamos hasta el final de nuestro index.html, justo encima de la etiqueta de cuerpo de cierre, podemos insertar nuestro JavaScript dentro de los elementos del script. Esto tendrá una etiqueta de apertura y cierre, y todo nuestro código irá entre esta sección. Entonces pensemos en lo que queremos hacer aquí. Tenemos la sección de facturas arriba en la parte superior y el usuario va a agregar un valor aquí dentro. Entonces una vez hecho esto, queremos ejecutar algún código para actualizar todos los valores. Para ello, podemos crear una función que va a ser responsable de todos estos cambios. Esto lo hacemos con la palabra clave function seguida de un nombre que desea darle a esta función. También podríamos posiblemente insertar un aumento entre estos corchetes si quisiéramos. Voy a echar un vistazo a cómo hacer esto más adelante en este proyecto. Ahora sabemos que necesitamos entender que todo lo que agregamos en medio estas llaves se ejecutará cada vez que llamemos a esta función de actualización. Entonces, ¿cómo en realidad llamamos a esta función de actualización? Bueno, hay múltiples formas en las que podemos hacer esto. A modo de ejemplo, podemos hacer esto cuando se ha hecho clic en un elemento. Vamos a desplazarnos hasta nuestra sección de proyectos de ley. Si localizamos nuestra entrada como atributo, podemos escuchar un evento. Un evento es cuando ocurre algo, como se hace clic en un elemento o se actualiza una entrada. Esto nos permitirá entonces llamar a nuestra función. A modo de ejemplo, vamos a escuchar un click, para que podamos usar en click. Dentro de las cotizaciones, agregamos el código que queremos ejecutar. En nuestro caso, queremos llamar a la función de actualización seguida de los corchetes, así como esto. Si guardamos esto y recargamos el navegador, cuando hacemos clic en esta entrada, no vemos que pase nada por el momento. Esto se debe a que no tenemos ningún código entre estas llaves. Podemos comprobar que esto está funcionando haciendo un registro de consola, que va a enviar un mensaje a la consola que usted diga, función llamada, guardar nuestro archivo. Si recargamos el navegador, ahora podemos dirigirnos a las herramientas de desarrollador. Hacemos esto con el botón derecho e inspeccionamos. Haga clic en la pestaña de la consola. Ya que estamos escuchando un evento de click, ahora queremos hacer clic en esta entrada, justo aquí. Salida de escucha detectar las llamadas de función. Por lo que ahora se está llamando correctamente a nuestra función. También mantengamos esto abierto para más tarde y encogemos el navegador hacia abajo. No obstante, llamar a esta función cuando se hace clic en esto no es un buen caso de uso. En realidad queremos ejecutar esta función cada vez el usuario ingrese algo dentro de este campo de entrada. Podemos desplazarnos de nuevo a nuestra entrada y cambiar el tipo para estar en las entradas. Cambiemos esto. En lugar de hacer click, necesitamos de insumos. Vuelva a cargar el navegador. Ahora cada vez que escribimos un número dentro de este campo, vemos que ahora nuestra función ha sido llamada tres veces. No obstante, para esta función, queremos que sea un poco más útil en lugar de simplemente registrar algunos textos en la consola. En cambio, lo que queremos hacer es agarrar el valor de nuestra factura, el porcentaje para nuestro slider, y también el número de personas entre las que se está dividiendo la factura. Para ello, podemos acceder a los valores que han sido entradas en cualquiera de estos campos. En primer lugar, seleccionamos los documentos completos, que es la página web. Entonces podemos estrechar esto hacia abajo para seleccionar un solo elemento. Una de las formas en que podemos agarrar esto es seleccionarlo por el ID del elemento. Entonces el primero que queremos agarrar es el valor de este proyecto de ley. Si nos desplazamos hasta la factura, esto tiene el valor de su factura. Por lo que podemos hacer uso de esto. Nosotros decimos documentos. Entonces podemos agarrar un elemento por el DNI y sumar el valor de tu factura. Ahora tenemos acceso a estos elementos particulares. Ahora podemos resolver esto dentro de una variable. Podemos crear una variable con la palabra clave let y luego dar el mismo nombre, como factura. Esto almacenará ahora el valor de todo en el lado derecho, para este valor llamado factura. Si queremos comprobar que esto está funcionando, también podemos hacer un nuevo registro de consola pasando en el valor de factura. Esto se llamará cada vez que agreguemos algo a nuestra entrada. Si echamos un vistazo a la consola, vemos el valor de las entradas reales, elementos con el tipo de número. No obstante, lo que queremos para nuestra calculadora de Tip es realmente agarrar los contenidos que el usuario ingresa. Podemos hacer esto con.value. Probemos esto de nuevo recargando, ingresa un valor. Ahora el valor real ingresado por el usuario ahora se almacenará en esta variable de factura. Por lo que ahora sabemos hacer esto. También podemos agarrar la propina por ciento y también la división. Entonces vamos a copiar y pegar esto en más tiempos. El segundo es el TipPercentent. También tenemos que agarrar una identificación. Entonces echemos un vistazo a esto. El primer ingreso de rango tiene el ID de TipInPits. Entonces copia esto. Está en. El tercero va a ser para la división. Esto tiene un ID de entrada dividida. Justo antes de seguir adelante, registremos los tres de estos valores y comprobemos que sus están funcionando. El siguiente es el TipPercentent y también el split. Recarga el navegador, vamos por el valor de 67. Entonces vemos el valor de 67. Entonces tenemos el valor de la punta que actualmente es cero y luego la división que es del uno por ciento. Así como un consejo rápido para cuando la consola inicie sesión en múltiples valores, también podemos envolverlos en las llaves para convertirlos en un objeto y estos serán mucho más fáciles de leer. Añada un valor. Esto luego generará el nombre de la propiedad junto con el valor para que sea mucho más legible en la consola. Esto ahora significa que estamos capturando todas nuestras entradas de usuario y podemos trabajar con estos valores muy pronto. No obstante, notarás, si trabajamos con las entradas de rango, que ninguno de los valores se actualiza en la consola. Esto se debe a que sólo estamos llamando a esta función de actualización cada vez que el usuario introduce algo a este proyecto de ley. No obstante, para nuestro caso de uso, sería mucho más práctico si esta función se actualizara cuando el usuario hiciera clic en cualquiera de estas entradas. Entonces, para hacer esto, eliminemos el manejador de eventos de entrada. En cambio podemos colocar esto en el envoltorio principal. Esta sección principal está envolviendo todos nuestros insumos. Entonces ahora si guardamos esto, refrescamos el navegador, y ahora cada vez que se haya actualizado una de nuestras entradas, esto ahora llamará a nuestra función. Vemos que se incrementa el porcentaje de punta y también la división ahora es entre tres personas. Esto significa que ahora se está llamando a nuestra función de actualización para las tres entradas. Pero también podemos mejorar en esto eliminando nuestro JavaScript y también separando esto del HTML. De la forma en que podemos hacer esto si ponemos una identificación, vamos por un contenedor. Ahora podemos mantener esto como HTML puro y solo tener nuestro JavaScript en la sección de script a continuación. Entonces primero, vamos a crear una referencia a este envoltorio principal. Hacemos esto igual que arriba con document.getElementById. El nombre de ID en el que acabamos de colocar es contenedor y podemos almacenar esto en una variable llamada container. Por lo que ahora tenemos nuestro contenedor. Queremos volver a introducir nuestro manejador de eventos de entrada. Podemos hacer esto con AdDeventListener. Esto va a tomar dos valores. El primer valor es el tipo de evento que queremos escuchar. Al igual que antes, podemos usar cosas como click o entradas y luego separarlo por una coma, el nombre de la función a la que queremos llamar. En nuestro caso, esto es actualización. Guardemos este archivo y comprobemos que esto está funcionando bien. Cuando hacemos click en el proyecto de ley, esto se actualiza. Si aumentamos la propina, esto también se actualiza. Por último, el valor de división. Esto ahora deja nuestra función con acceso a toda la información que necesitamos. A continuación vamos a utilizar todos estos valores para crear nuestros cálculos de punta y luego mostrarlos en la interfaz de usuario. 7. Cómo calcular valores de visualización de porcentaje: Ahora tenemos una bonita, sencilla función de actualización que agarra todas nuestras entradas de usuario. Entonces ahora podemos usar estos valores para calcular nuestras salidas de punta. Vamos a usar estos para realizar algunos cálculos, luego actualizar la interfaz de usuario. Por ejemplo, necesitamos dar salida al valor de nuestra punta a la derecha. Tenemos que dar salida al total. También tenemos que asegurarnos de que cuando aumentemos este valor de punta, que también se muestre el porcentaje, y también lo mismo para esta división de valores. Empecemos. Deseo eliminar este registro de consola del último video, y luego podemos usar estos valores para realizar nuestros cálculos. El primero que voy a agarrar es por el valor de punta. ¿ Cómo vamos a ir por esto? Bueno, por ejemplo, si el usuario ingresa una factura como 100 y un valor de propina de 20 por ciento, queremos asegurarnos de que el valor de la propina en dinero sea de 20. Entonces tenemos un valor de factura de 100, y la forma en que podemos hacerlo es multiplicando este valor por el porcentaje de la punta como 20. Se puede ver devuelto en la línea de abajo, tenemos un valor de 2,000. Esto se debe a que necesitamos dividir el valor de la punta por 100. Esto ahora nos da el valor correcto justo aquí. Si esto fue del 15 por ciento, esto nos dará el valor del 15. Ahora podemos usar esto más en nuestra función de actualización, y podemos almacenar esto dentro de una variable. Podemos llamar a esto un Valor de Tip, y vamos a establecer esto igual a través del mismo cálculo que acabamos de realizar. Por lo que el equivalente 100 es el valor de la factura. Diremos factura multiplicada por nuestra propina por ciento dividido por 100, para asegurarnos de que el porcentaje de propina se divide primero por 100, y luego se multiplique por la factura. Podemos envolverlos dentro de los corchetes para asegurarnos de que el cálculo se realice correctamente. Hagamos un registro de consola y podemos comprobar que todo esto está funcionando bien. El porcentaje de propina. Actualiza el navegador. Vamos por el mismo cálculo. Por lo que 100, podemos seleccionar el valor de la punta. Se puede ver si movemos esto todo el camino hacia arriba, ahora se muestran los valores actualizados. Ahora tenemos el valor total de la punta. Ahora podemos fácilmente calcular cuánto es la punta por persona. Vamos a crear una nueva variable justo debajo, vamos a llamar a esto el Tip Each. Esto va a ser bastante sencillo. Todo lo que vamos a hacer es tomar el valor de punta, que tenemos justo arriba, luego dividirlo por el número de personas. Esto está disponible en la variable anterior llamada Split. Lo siguiente que podemos hacer bien en la parte inferior es averiguar cuánto es la factura total por persona. Esto de nuevo va a ser un cálculo bastante sencillo. Actualmente tenemos la factura total, que estamos agarrando dentro de esta variable, y todo lo que tenemos que hacer es dividirla por el número de personas. Una nueva variable, voy a llamar a esto el nuevo Bill Each. El primero que tenemos que hacer, es agregar la factura más el valor total de la propina. Esto nos va a dar el total de la factura cuando se pague, que incluye la propina, y luego podemos dividir esto por el número de personas que está disponible en la división. Al igual que arriba, los vamos a envolver dentro los corchetes para asegurarnos de que el cálculo se realice en el orden correcto. Sumaremos los valores juntos y luego multiplicaremos esto por el número de personas. Vamos a probar este. Copiaremos nueva factura cada uno, agregaremos esto a nuestro registro de consola y ahora podemos probar esto. Ahora si agregamos en el valor de 100, vemos un problema dentro de la consola. Estamos dando salida al valor de 1000, que es un cero extra agregado al final. Probemos una más. Si sumamos 50, el mismo problema está ocurriendo con el valor de 500. El motivo por el que esto está sucediendo, probablemente no sea demasiado claro por el momento. Esto se debe a que en realidad estamos recibiendo un tipo de datos de cadena en lugar de un número de esta entrada de factura. Podemos comprobar esto por consola registrando el tipo de, y luego el valor de nuestra factura. Agrega algo a la entrada, y esto se confirma con el tipo de cadena. No obstante, sin embargo, el valor de punta, lo hacemos, recargar. Este es un tipo de número. Antes cuando estamos poniendo el valor de nueva factura cada uno, estamos agregando una cadena con un número. Lo que realmente está sucediendo cuando agregamos la factura al valor de la propina, lugar de realizar un cálculo numérica, estamos recibiendo 50, y luego sumando el cero al final, dándonos el valor de 500, que hemos visto en la consola. El modo en que podemos redondear esto, es convertir el valor de la factura en un número. Entonces voy a citar la sección donde agarraremos el valor y luego haremos uso de la Función Número JavaScript, pasando de nuevo en el código, que agarra nuestro valor de factura. Ahora con esto en su lugar, ahora podemos hacer un nuevo registro de consola con el tipo de factura. Guarda y recarga el navegador, y agregamos aquí cualquier cosa que ahora se muestra como un número. Nuestro valor ahora se muestra como un número, así que intentemos una vez más el valor de la nueva factura cada uno. Comprueba todo esto está funcionando bien, y ahora vemos el valor de 50 en lugar de 500. Bien. Entonces ahora tenemos todos los datos con los que necesitamos trabajar, y el siguiente paso es realmente generar estos valores en nuestra interfaz de usuario. Esto lo vamos a hacer de manera similar justo arriba, donde agarramos los elementos particulares. Pero en lugar de agarrar el valor de los elementos, vamos a estar configurando el valor en su lugar. En la parte inferior de aquí, podemos agregar un document.getElementById. ¿ Qué ID queremos agarrar para este elemento en particular? Vamos a desplazarnos hacia arriba. Ahí está nuestro tenedor de lugar de cero por ciento, que ahora podemos quitar, y esto tiene la identificación de propina por ciento. De vuelta hacia abajo, podemos sumar esto en. Entonces para establecer el valor de nuestros elementos en lugar de nuestro marcador de posición, podemos usar innerHTML. Este innerHTML establecerá el valor dentro de nuestro elemento, y queremos que esto sea equivalente a nuestro porcentaje de propina. Guardar y recargar. Esto ahora está funcionando, y también podemos sumar al final el símbolo porcentual. Podemos agregar esto usando el símbolo más, y luego como queremos agregar un valor de cadena en lugar de un número, esto se va a agregar entre comillas. Ahora deberíamos ver un símbolo de porcentaje si recargamos el navegador y nos desplazamos por nuestro deslizador de rango. A continuación tenemos este valor de punta justo debajo. Volvamos a desplazarnos hacia arriba a nuestro código. Este es el elemento al que queremos apuntar justo aquí y éste tiene el ID de valor de punta. Al igual que aquí, también vamos a usar document.getElementById, pasar el ID del valor de punta, y de nuevo, estableceremos el innerHTML. Ya tenemos esto calculado justo arriba en el valor del valor de la punta. Probemos este, un proyecto de ley de 50. Voy a fijar la propina, y el 10 por ciento de 50 ahora es igual a cinco. Vamos a estar usando esto un par de veces más, así que voy a copiar esto, pegarlo en justo debajo. El tercero va a ser por el valor total, que es un cálculo de nuestra factura que se suma al valor de la punta. El ID de esta sección fue total con punta, que podemos ver desde nuestro HTML justo arriba, fue esta sección justo aquí. Entonces podemos agregar que el contenido HTML con innerHTML, enviar esto igual a nuestro proyecto de ley siendo agregado a nuestro valor de punta. Probemos esto, un proyecto de ley de 50. Estos dos valores sumados nos dan el total de 55. A continuación, tenemos la sección dividida justo debajo. El primero que vamos a buscar es el valor de la división, por lo que una persona, pero ahora sólo vamos a establecer el número de personas como 1, 2, 3, en lugar de dar salida a personas o persona justo después. Empecemos con este. Obtener elemento por ID. El ID que necesitamos para éste, si nos desplazamos hasta nuestra sección dividida, podemos ver a continuación donde colocaré todo el contenido. Si eliminamos esto, este es el valor dividido. Este es el valor de nuestra variable de split justo después de esto. El siguiente que vamos a agarrar, es el total de la factura por persona. El ID de este elemento en esta sección aquí se va a facturar cada uno. Nuevamente, también tenemos este valor almacenado dentro de la variable llamada nueva factura cada uno. El último apartado con el que necesitamos trabajar es la punta cada uno hacia abajo en la parte inferior. Volvamos a pegar en nuestro getElementById. El spam que estamos actualizando tiene el ID de propina cada uno. Estableceré el valor para que sea la punta de cada variable, cual has almacenado arriba. Guarda esto y vuelve a nuestro proyecto. ¿ Son de factura? Sabemos que todo esto está funcionando, así que vamos por 10 por ciento. Ya que sólo tenemos una persona, la factura cada una es de 55, y también pagan la propina completa de cinco. Intentemos abrir esto para ser dos personas. El valor se actualiza aquí y esto ahora actualiza nuestros valores justo debajo. Esto ahora deja la mayor parte de la funcionalidad para nuestra calculadora de puntas ahora en su lugar. A continuación, vamos a pasar a añadir algo de formato la moneda y también a los valores divididos. 8. Formato de moneda y división: Bienvenido al video final para este proyecto del curso. En este video, vamos a hacer algunos toques finales a nuestra calculadora de propinas, y en particular vamos a formatear nuestra moneda y también trabajar con la salida dividida. En primer lugar, vamos a crear algunas funciones que van a redondear nuestros valores de moneda a dos decimales, junto con poner un símbolo de moneda al frente también. Al lado de esto, donde tenemos nuestra división en la parte inferior, vamos a cambiar esto para producir ya sea una persona o dos personas, tres personas, y así sucesivamente. También esta función de moneda se puede utilizar para los valores divididos en la parte inferior también. Para ello, vamos a bajar a nuestro guión, y si echamos un vistazo donde estamos generando todos estos valores, en lugar de simplemente generar una variable, vamos a pasar esto a una función. Vamos a crear esta función justo en la parte superior. Empezaremos con la función que va a formatear nuestro dinero. Para que esto funcione también necesitamos el valor monetario real con el que trabajar, y pasaremos esto a esta función muy pronto. Ahora, hay un par de cosas que queremos hacer con este valor monetario real. Lo primero que hay que hacer es redondear esto a dos decimales, y luego vamos a agregar un símbolo de moneda al frente. Tomemos nuestro valor, y podemos reasignarlo a un nuevo valor. El nuevo valor va a ser igual al valor actual, y podemos establecer esto en dos decimales usando el método toFixed. Esta nueva función necesita entonces devolver nuestro nuevo valor. Entonces antes de seguir adelante y dar salida a este nuevo valor, también podemos agregar a este inicio una cadena que va a contener un símbolo de moneda, agregar un espacio, y luego podemos agregar esto al valor. Ya que es una función, ahora podemos reutilizar esto en todas partes que necesitemos para generar un valor monetario. Agarremos esto, y si nos desplazamos hacia abajo, el primero es el TipValue. En lugar de generar nuestro valor incluido en esta variable, ahora podemos llamar a esta función pasando en nuestro TipValue. Este TipValue será realmente recibido dentro de nuestra función justo arriba como este valor, y luego podemos hacer nuestros cambios y devolver el nuevo valor. El total con punta, también podemos agarrar esto, y sustituirlo por nuestra función. A continuación tenemos NewBilleach. Pasa esto a nuestra función, y finalmente el valor de punta para cada persona. Ahora guardemos esto y comprobemos que esto está funcionando en el navegador. Agrega un valor, y ahora si seleccionamos diferentes valores de punta y también nos dividimos, vemos que estos ahora se redondean a dos decimales junto a la salida del símbolo de moneda. Lo siguiente que vamos a hacer es crear una nueva función la cual va a formatear la salida dividida, por lo que esta función o bien dará salida a una persona, o dará salida a dos personas y así sucesivamente. Vuelve a nuestra sección de guiones, vamos a crear una nueva función, y llamemos a este FormatSplit. Esto también va a tomar un valor que será el número de personas entre las que se divide la factura. Primero comprobemos si este valor es igual a 1. Si lo es, entonces queremos devolver una cadena que simplemente dice, una persona. Entonces podemos devolver el valor más una cadena que es la palabra persona. Esta línea de código sólo se ejecutará si el valor de la división es igual a 1. De hecho, esto sólo quiere ser una cuerda. Si el valor es dos o superior, entonces vamos a devolver un nuevo valor, que es el valor actual, y esta vez más que persona, el valor será la gente. Ahora salida esto, vamos a utilizar nuestra función FormatSplit, pasando en nuestra división. Apagado al navegador, vamos a comprobar que esto está funcionando. Podemos agregar un valor, y vemos la salida de una persona. Cambiemos esto sea el número dos, dos personas, tres personas, y así sucesivamente. Esto ahora son algunas buenas mejoras para nuestra calculadora de puntas, sin embargo hay un caso de borde que necesitamos cuidar, y esto depende de los valores particulares que agregamos. Si hacemos algo como 47 y 15 por ciento de propina, divididos entre dos personas, puede que no sea inmediatamente obvio, pero aquí hay un pequeño problema. Ese problema es la factura cada uno, y también la punta cada uno no cubre los totales apenas sobre la parte superior. El tip cada uno es 3.52, lo que nos dará el valor de 7.04, y queremos hacer esto 7.05. Lo mismo con la factura real cada uno si cada persona pone en 27.02, esto será un poco corto del total. Ahora la forma en que podemos arreglar esto es yendo a nuestra función que creamos anteriormente, que es FormatMoney. En el momento en que llamamos al método toFixed, esto en realidad se redondea hacia arriba o hacia abajo dependiendo del número. Para solucionar este problema siempre queremos asegurarnos de que nuestro valor se redondea hacia arriba, y nunca se redondea hacia abajo. Hay algunos cálculos matemáticos complejos que podemos hacer para que esto suceda, sin embargo también hay una forma mucho más sencilla. Arriba en la cima, de nuevo vamos a agarrar nuestro valor y cambios. Podemos hacer uso de una función matemática llamada ceil, que siempre redondeará nuestros números. No obstante, por defecto Math.CEIL redondeará hasta el número entero más cercano. Por ejemplo 27.02, se redondeará hasta ser 28. Esto nos devolvería entonces algunos valores que son demasiado altos. En cambio queremos agarrar el segundo lugar decimal y en su lugar redondear esto hacia arriba. Para ello vamos a multiplicar nuestro valor original por 100. Hagamos algunos registros de consola y veamos cómo se ve esto en el navegador. Es así como registraremos en consola el valor original, por lo que el primer valor, y luego haremos el mismo registro de consola, pero después de que se haya cambiado este valor. Abramos las herramientas de desarrollador con el botón derecho e Inspeccionar. Entra a la Consola. Si echamos un vistazo a estos en parejas, particularmente hacia abajo en la parte inferior, 3.525 se ha redondeado ahora a 353, igual que 27.025, esto se ha redondeado hacia arriba. Ahora esto se ha redondeado hacia arriba, ahora podemos dividir esto por 100 para darnos los decimales originales. Tomemos este valor, divídalo por 100, y luego recarguemos el navegador. Vamos a sumar nuestros valores de nuevo en su lugar, y ahora estos valores multiplicados por dos personas no serán suficientes para cubrir el total de la factura y la propina. Esto es sólo un pequeño detalle, pero algo que podría ser realmente importante cuando se trabaja con dinero. Quitemos estos registros de consola, y limpiemos nuestra función. Esto es suficiente para nuestro proyecto de calculadora de propinas, espero que lo hayan disfrutado, y también hayan aprendido algo nuevo. Ahora puedes pasar al siguiente proyecto, tomar un descanso o agregar algunas personalizaciones adicionales a este proyecto ya sea a través de CSS para cambiar el aspecto y la sensación, o puedes agregar algunas funcionalidades de JavaScript diferentes. Espero que hayas disfrutado de este proyecto y te veré en el siguiente. 9. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. 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. Gracias una vez más. Buena suerte. Esperemos que te vuelva a ver en una futura clase.