Crear una calculadora hecha a mano con HTML, CSS y JavaScript

1. Introducción al curso: hola y bienvenidos a crear una calculadora a mano Aquí en habilidad share dot com. En este curso, vamos a crear una nueva calculadora desde cero usando HTML, CSS y JavaScript. Vamos a estar escribiendo HTML moderno, CSS y JavaScript, y tu proyecto a lo largo de este curso es básicamente crear una calculadora totalmente nueva, igual que lo que ves aquí. Pero, ya sabes, haz que el tuyo se vea un poco diferente, poco más bonito, probablemente. Y agrega la interactividad aquí para que puedas hacer clic en cualquiera de estos números y haces todo tipo de matemáticas si quieres. Este curso es perfecto para Front y desarrolladores que están aprendiendo html, CSS y JavaScript y quieres un poco más manos sobre la práctica, creando algo un poco más realmente vida que solo una aplicación hola mundo o una lista de cosas que hacer . Si esto te parece muy interesante, siéntete libre de unirte a este curso y empezaremos de inmediato 2. Configurar el proyecto: hola y bienvenidos a la primera lección sobre crear una calculadora desde cero o a mano . En este curso, vamos a estar usando HTML CSS junto con algún JavaScript. Ahora, nada se va a complicar demasiado, Pero ya debes conocer los conceptos básicos de HTML. CSS. Y si no sabes cuál es la parte javascript, eso está bien, te puedo guiar por esa parte cuando lleguemos también. Ahora, primero lo primero. He creado un archivo llamado index dot html y estoy usando V s Codas, mi editor. Entonces voy a escribir html Colón cinco y luego golpear tab, y esto solo llena automáticamente un montón de cosas mágicas para mí. Esto es lo que necesitas para configurar tu página web html regular de todos modos, Así que solo voy a lanzar un título aquí llamado Calculadora en un HTML. Si quieres cambiar el título de la pestaña, solo cambias el texto aquí. Ahora voy a voltear a Firefox, y puedo subir a archivo abierto, y puedo seleccionar este archivo HTML donde quiera que guardes eso. Entonces si está en tu escritorio, vas a querer ir a tu escritorio en abrir este archivo HTML. Siempre lo llamo index dot html porque esa es una buena convención de nomenclatura para sitios web todos modos. Entonces sigamos adelante y abramos esto y deberíamos ver casi nada que podamos ver aquí arriba. Dice Calculadora. Eso es todo lo que hemos agregado ahora para demostrar que esta página está funcionando. No podemos decir dentro de nuestro cuerpo donde se supone que podemos escribir texto y agregar HTML y todo tipo de cosas ahí dentro. Podemos tener una etiqueta H one, y esta H one tag es una cabecera uno. Entonces es texto grande. Y si solo guardo ese archivo y volteo para despedir a Fox y luego refresco esta página, se puede ver que dice texto grande aquí. Y el texto de tamaño normal es como en un párrafo con la etiqueta P. Y pude sentir eso con algún texto de Laura Ipsum ahí dentro. Entonces volveré a decir eso. Da la vuelta a Firefox y vamos a tocar Refresh. Y así se trata de un texano de tamaño regular. Se trata de texto grande. Nada de esto es fantástico. Esta es la versión más básica de un sitio web. Posiblemente podrías crear, pero es realmente importante tener configurada esta base. Entonces lo que estamos diciendo aquí es usar el tipo DOC HTML. Esta es la etiqueta HTML cinco. Entonces tenemos un elemento HTML, y el Lang predeterminado es el inglés. Técnicamente, en realidad no necesitas eso. Entrenadores V s llenaron eso automáticamente para mí. Dijimos el personaje dijo su utf ocho. Entonces podemos tener personajes japoneses, caracteres coreanos, caracteres árabes, caracteres ingleses, todo tipo de cosas aquí. Y nuestra página no va a parecer divertida. Todos los personajes van a renderizar como lo harían regularmente. Entonces dijimos, Vieux port, esto básicamente va a hacer que nuestro sitio web sea receptivo. Entonces, si fueras a cargar esta página, digamos que tu dispositivo móvil, esto realmente funcionará de la manera en que se supone que funciona y puedes escribir consultas de medios CSS. Después agregamos un título. Ese título es el título de tabulador apretado aquí arriba, y eso es una especie de todo lo que va en la cabeza y en el cuerpo es donde ponemos todo nuestro contenido real. Y luego ponemos todo eso dentro de nuestros elementos HTML y básicamente lo que estamos diciendo, Aquí está todo desde aquí para escuchar todas esas cosas en el interior es ht no avanzar. Vamos a estar poniendo todo nuestro contenido real dentro de esta sección aquí, y vamos a estar escribiendo algo de CSS aquí mismo con el CSS interno físico. Entonces vamos a escribir CSS justo dentro de este documento y al final de este curso limpiaremos y nos aseguraremos de que entre en su archivo adecuado para que estemos siguiendo las mejores prácticas. Entonces lo primero es lo primero, necesitábamos conseguir este tipo de archivo resuelto. Tenemos que estructurarlo. Necesitábamos sacarlo como se ve ahora, una vez que tengas algo como esto, en realidad puedes empezar a crear tu página Web. Pero no es hasta que realmente tengamos algo de esto configurado que podemos crear una página Web adecuada . Entonces lo siguiente último que vamos a hacer es que vamos a escribir un html y se va a ver totalmente asqueroso. Pero luego vamos a añadir algo de CSS y se va a quedar realmente, muy bonito 3. Elimina el HTML: todo bien. Primero lo primero. Tenemos que parar algún HTML. Ahora, esta parte honestamente no es la más emocionante. Pero html es el esqueleto detrás de cada sitio web, cada aplicación web. Es la clave para decirle a Javascript y CSS cómo debilitar el estilo e interactuar con nuestra página. Ahora vamos a crear una calculadora, y sólo vamos a usar HTML para empezar, así que esto va a parecer bastante asqueroso. Pero lo que podemos hacer es crear un div donde pueda vivir todo nuestro contenido de calculadora. Y si quisiéramos, también podríamos dar esta clase de calculadora. Ahora, una vez que nos metamos en algunos de los CSS, describiré qué clases y qué ideas son y cosas así s o A div es solo un elemento divisor estándar. Realmente no hace nada. Es sólo un elemento ficticio. Es solo por una especie de crear cosas de propósito general. Pero dentro de aquí, también queremos otro div. Y aquí es donde van a ir nuestros resultados. Entonces aquí es donde está la parte superior de la calculadora. Donde pones uno más dos es igual a tres. Ahí es donde eso va a ir entonces vamos a crear y una lista de Nordling con todos los elementos de nuestra lista aquí. Y así solo echemos un vistazo a lo que tenemos actualmente. Alguien va a escribir ahí la prueba. Guardan este archivo y vamos a pasar a Firefox y golpear, Refresh, y podemos ver esto. Yo sólo estoy haciendo aquí para que puedas ver aquí arriba. Met 300%. No se ve muy bien, ¿verdad? Bueno, tenemos que añadir claro multiplicar, dividir los números uno a 10 o cero a nueve, más bien y signo igual en todo tipo de cosas. Entonces sigamos adelante y añadamos eso aquí. Y luego en el siguiente video, podemos hacer que el CSS realmente retoque esto de la manera que queremos que se vea. Pero ahora mismo necesitamos crear una calculadora con algunos botones. Ahora bien, no tienes que usar una lista ordenada de la ONU, que es lo que estoy usando aquí en lista ordenada. Con un elemento de lista dentro de él, también puedes usar botones. Puedes usar enlaces, puedes usar cualquier cosa que quieras. Simplemente voy a usar un A nordle ist porque una especie de mantener el HTML realmente, realmente simple. Entonces voy a copiar esto un par de veces y no estoy seguro de si es suficiente, pero lo averiguaremos cerca del final. Por lo que el 1er 1 va a ser C para claro. Entonces agreguemos un asterisco. Ese es el símbolo de multiplicación y el símbolo de división deja salir un decimal ahí dentro. Es do siete, 89 y así básicamente, cómo en planear esto es esto va a ser el top cuatro y entonces tenemos un conjunto de tres números aquí dentro. Entonces tendremos otro conjunto de tres números y otro conjunto de tres números, y la forma en que organice esto puede o no ser totalmente correcta. Podríamos tener que cambiar algunas de estas, pero está bien. El modo en que vamos a crear esto va a ser completamente flexible. Fue en un signo más ahí adentro y luego vamos a hacer 45 y seis Jones a un menos, firmar 12 y tres y esto va a parecer realmente extraño justo hasta que tengamos este tipo de todo solucionado, luego un signo igual. Pongamos un cero ahí también y otra vez. Si necesitamos abordar esto, podemos ajustarlo más adelante. Posteriormente. Eso está totalmente bien. Por lo que nuestro HTML se ve algo así. Y por último, no solo creemos una calculadora regular, sino también asegurémonos de que esto sea algo que puedas usar en tu portafolio. Entonces vamos a crear otro DIV aquí con una clase y yo muevo eso hacia abajo. Llamémoslo firma, y aquí es donde puedes poner tu firma cuando termines tu proyecto. Y solo llamaré a esto una bonita calculadora por tu nombre. Y por último pero no menos importante, sigamos adelante. Refresca y nada de fantasía, literalmente la página más aburrida que podamos pensar. Pero en la siguiente lección, vamos a empezar a aplicar algo de CSS, y esto va a quedar increíble de inmediato. 4. Estirar la página: bien, Hasta ahora, tenemos esta página realmente fea. Esta no es forma de vivir tu vida. Esto ya no es 1995. Podemos hacer que esto se vea realmente, realmente bonito. Y en realidad no tenemos que hacer tanto trabajo. Entonces aquí es donde entramos en CSS, y vamos a escribir nuestro CSS aquí solo por el momento encendido. Y entonces podemos sacarnos a su propio archivo un poco más tarde. Entonces primero lo primero. Creo que necesitamos poner algunos detalles sobre nuestro cuerpo, nuestro fondo, todo este buscapersonas donde está todo este blanco. Adelante y cambiemos algo de eso para que podamos cambiar todo el cuerpo. Ese es el elemento corporal completo aquí simplemente escribiendo cuerpo. Y eso coincide aquí. Entonces es el nombre exacto del elemento. Después tenemos estos tirantes rizados de apertura y cierre. Y aquí dentro solo podemos decir color de fondo, y luego podemos darle color hexadecimal. Podríamos darle un nombre para que le pudiéramos dar un nombre como aqua, y esto va a quedar terrible. Pero oye, mira, ahora tenemos aqua, así que sabes que ya no somos 1995. Ahora tenemos una página web de 1997. Adelante y agreguemos un color hexadecimal, aunque de 999 Y esto es sólo un tono de gris. Y mi código V s piensa que estoy usando una plantilla de Django, pero no lo estoy. Estoy usando una plantilla HTML. Y si paso el rato sobre esto el tiempo suficiente, en realidad puedes ver que el código V s es lo suficientemente bonito como para darme un selector de color y puedes elegir cualquier color que te guste. Entonces de ninguna manera tienes que terminar usando los mismos colores que uso. Sólo voy a usar algo tipo de genérico. Ah, y puedes personalizarlo de la manera que quieras. Sigamos adelante y guardemos eso y actualicemos más nuestras páginas. Y OK, ya sabes, no se ve tan pegajoso como 1997. Entonces tal vez estamos en 1999 en este momento. Hagamos un salto cuántico aquí. Sigamos adelante y sumamos un int Grady aquí atrás. Por lo que Grady INTs en CSS podría ser un poco complicado. Y lo que me gusta hacer es usar un servicio llamado Color Zilla y quiero usar el generador int definitivo de Grady aquí y lo que voy a hacer es solo agarrar estos y arrastrarlos hacia abajo. Y luego usemos una radio y cambiemos estos colores. Entonces, ¿cuál debería ser el color interior ahora podemos meter por aquí. Podemos usar especie de cualquier color que queramos. Yo ya tengo uno en mente, sin embargo. 70 77 c Así que es gris. Y otra vez mi calculadora va a ser bastante genial. El tuyo podría ser súper colorido y el color exterior aquí. ¿ Qué quiero que sea este color? Negro, tal vez? Sí, eso me gusta. Y entonces todo lo que tenemos que hacer es hacer click copy. Y así este es nuestro pequeño adelanto. Y otra vez, sólo lo haré más grande aquí. Y este es nuestro pequeño adelanto aquí, y este es todo el código que genera para nosotros. Este es CSS regular. No tenemos que preocuparnos de qué es esto. Sabemos que esto va a funcionar, así que solo hago clic en copiar, volver a nuestro código aquí, y literalmente voy a pegarlo aquí y voy a arreglar algunos de los inventores. Sigamos adelante y guardemos eso. Volvamos a nuestra calculadora y refresquemos. Está bien, no está mal, no está mal. En realidad pudimos ver que el Grady en especie de repetirse un poco. Entonces tenemos que ajustar algo así si queremos que esto se estire todo el camino de arriba a abajo. Ahora, en CSS, tenemos este pequeño y fresco hackeo de vida que no es realmente un acto de vida. Ni siquiera es realmente hackear todo. Todo lo que vamos a decir es el HTML y el cuerpo. Todo el elemento HTML, junto con todo el cuerpo, debe ocupar el 100% de la altura de tu navegador. Y así vamos a seleccionar el elemento HTML y los elementos del cuerpo separados por una coma, y simplemente vamos a decir altura 100%. Y cuando actualice la página aquí, vamos a ver que esto realmente se arregla por sí mismo Así que no vemos un poco repitiendo Grady int en la parte inferior de ahí. Así como así, realmente no podemos ver su texto, pero está bien. Realmente no necesitamos hacer eso ahora mismo. A continuación, sigamos adelante y hagamos que esta calculadora de cálculo se vea un poco, ya sabes, vamos a bloquear y más como Woo. Por lo que necesitamos crear una clase cercana llamada Calculadora Calcular Puta, y estoy seleccionando este elemento por su nombre de clase usando el selector DOT. Entonces punto significa clase y luego solo emparejamos este nombre con este nombre aquí y luego debilitamos estilo. Vamos a seguir adelante y darle a esto un trasfondo. Uh, supongo que podríamos hacer un color de fondo, pero hagamos un fondo regular de 353535 Y eso es sólo un gris más oscuro. Vamos a darle a esto un con de algo así como 300 píxeles. Y tal vez vamos a darle a esto algo de relleno también, palmaditas de como 15 píxeles. Veamos cómo se ve esto hasta ahora. De acuerdo, al menos podemos leerlo. Entonces sabes que eso es un paso en la dirección correcta. Adelante y centrémonos también esto. Entonces es hacer posición. Top absoluto 50% izquierda 50%. Ahora bien, esto en realidad no va a ir correctamente, uh, centro. Esto va a tomar esta esquina aquí arriba, y lo va a colocar justo en el centro. ¿ Verdad? Palabras, más ligeras así como así. Entonces eso no es del todo centro, pero podemos compensarlo por la mitad del con y la mitad de la altura, lo que podemos especie de realmente chocar contra el centro con una declaración llamada Transform y decimos traducir el acceso X en menos 50%. 50% de los elementos con y el acceso de los EAU también chocó eso al alza en un 50% de la altura. No guardes eso y refrescas aquí y ahora en realidad está centrado, y cuando hago zoom propio, siempre se mantendrá centrado. Es ahora que estamos llegando a algún lugar. último pero no menos importante, sigamos adelante y nos demos un poco de redondeo, tal vez una sombra de caja. Y vamos a enviarle todo nuestro texto para ser Vamos a alinear todo nuestro texto para ser centrado s Así que sólo vamos a hacer algunos toques finales en nuestra calculadora en esta lección, y luego en la siguiente vamos a hacer que la calculadora parezca una calculadora con botones y todo. Entonces alinear el texto, centrar y todo lo que va a hacer es asegurarnos de que todo nuestro texto esté en. El centro ajustará eso más adelante. Podemos sobrescribir eso más adelante. Vamos a darnos ah radio de frontera de algo así como cinco píxeles alguien que volvemos aquí y refrescamos que puedes ver en realidad se redondea aquí como una calculadora real en la vida real. Y vamos a seguir adelante y darle a esto una sombra de caja. Entonces vamos a decir que la sombra de caja en el acceso X no debe ser nada sobre el por qué Acceso arriba y abajo debe ser de seis píxeles. No debe haber desenfoque. Y el color debe ser. Voy a decir uno. A uno a uno. ¿ Esa mirada está bien? Sí. Se trata de dónde vas? Esto se trata del color que quiero aquí arriba. Entonces esa es la primera caja destrozada la segunda sombra de caja. Voy a añadir. Yo hago eso con una coma aquí. El 2do 1 va a ser ex acceso cero. ¿ Por qué acceder a ocho píxeles? El desenfoque va a ser de 10 píxeles iban a darle a este un RGB un valor. Entonces ese es un valor Alfa rojo verde azul. Y eso va a ser 00 nuevos 000 Así que ese es el color negro en RGB. Es la ausencia de color, por lo que no tiene ningún valor en absoluto. Por eso le damos ceros. Entonces digamos que tiene que ser 0.75%. Paga ciudad y veamos cómo se ve esto. Y ahora sólo tenemos este pequeño Sí, parece una frontera en la parte inferior. Es redondeado y tiene sombra, por lo que en realidad parece que está saliendo de la pantalla un poco. La siguiente lección. Adelante y estilo, los resultados y los botones y quizá tu firma también si tenemos tiempo suficiente. 5. Estirar los botones: Hola. Bienvenido de nuevo en esta lección. Vamos a seguir adelante y darle estilo a la sección de resultados que le dan estilo a todos los botones, básicamente todos a la vez. Y entonces vamos si tenemos tiempo suficiente en esta lección. Si no nos debilitamos, empuja esto a la siguiente lección. Pero si tenemos tiempo, también vamos a darle estilo a la firma. Entonces lo primero es lo primero, hagamos la sección de resultados y necesitamos poder apuntar a este Div. Ahora si apuntamos a un Div como nos dirigimos, nuestro cuerpo va a seleccionar cada inmersión. Tenemos uno aquí, y tenemos uno aquí y uno en nuestra firma, así que no queremos hacer eso. Queremos darle estilo justo a este en particular. Entonces ahora puedo darle a esto una clase de solo llamarlo resultado y por defecto va a tener cero ahí ahora. Esto no va a hacer nada en realidad hasta que escribamos algo de CSS para que pueda escribir resultados y recordar que DOT significa clase y luego abrir y cerrar llaves. Y hagámoslo realmente feo. Vamos a darnos un color de fondo de rojo. Vamos a darle a esto un color de azul. Ese va a ser nuestro color de texto. El ancho va a estar en algún lugar alrededor del 90% ish de nuevo. Puedes ajustar esto tanto como necesites. Cuando estás creando tu propia calculadora también. Danos un margen. Entonces este va a ser el relleno alrededor del elemento. Entonces el relleno por aquí y vamos a decir en los ocho primeros píxeles de la derecha es cero píxeles en la parte inferior, 20 píxeles y en la izquierda, 10 píxeles. Y vamos a ver con qué estamos trabajando ahora mismo. ¿ De acuerdo? Por lo que en realidad parece un bar. Entonces, ya sabes, no está mal. Adelante y cambiemos ese texto. Alinear aunque la línea textil va a estar a la derecha. A lo mejor vamos a darnos una altura de, como, 50 no 50% 50 pixels ish. A lo mejor danos una altura de línea de algún lugar alrededor de 50 píxeles también, solo para que nuestro texto se mantenga centrado. Sí. Está bien. Se está uniendo. , necesitamos que ese fondo sea más grande Sin embargo, necesitamos que ese fondo sea más grande, así que hagamos que el fondo sea más grande. Y luego cambiaremos el color de fondo y cosas así también. Entonces ese aficionado sólo voy a adivinar con éste a, uh, no sé, 36 píxeles en algún lugar por ahí. Veamos qué hace esto. Oye, no está mal. A lo mejor 35. Sí, apenas hizo la diferencia. Nuestro número está abrazando esa frontera de extrema derecha donde ese tipo rojo se encuentra con el grande. Vamos a darle un palmadazo a eso, así que va a haber algún espaciado a la derecha. 10 píxeles. Ahí vamos. Eso se ve un poco mejor ahora. Creo que necesitamos tres cosas más en tu Y si este número se pone realmente, muy largo. Si este número es realmente, realmente, realmente, realmente, realmente, realmente, realmente, realmente, muy largo, va a una especie de solo caerse, no queremos eso. Así que vamos a darnos un desbordamiento de Oculto y eso Solo asegúrate de que nuestro número siempre, ya sabes, se quede dentro de los límites físicos de una calculadora del mundo real. Y tal vez, vamos, ah, ah, cambiar el color de fondo. Deshaznos del rojo y hagamos como C E C F A C En algún lugar de ahí. ¿ Cómo se va a ver eso? Sí, eso parece una vieja calculadora verde pegajosa y el color del texto. Hagamos esto en algún lugar alrededor. Tres B tres b los tres b 32 de algo así. Y otra vez, ese color es sólo este color pardo oscuro, grisáceo. Eso es refrescante. Esto va a empezar a verse un poco mejor. OK, bien, no está mal. A lo mejor. Cambiemos la fuente y cambiemos la sombra de caja están en una sombras de Bach. Entonces la familia de fuentes. Digamos que esta familia de teléfonos tiene que ser digital. También puedes cambiar este fondo si quisieras. Si tienes el fondo digital, se lo va a cargar. Aparentemente no lo hago para que no lo vaya a cargar, así que en realidad voy a deshacerme de eso. Pero puedes cambiar ese teléfono a lo que quieras. Ariel Times New Roman Something custom en realidad agregará un frente personalizado un poco más tarde . Por el camino en Last Thing estaba en una caja sombría caja sombra. Y digamos que esta sombra de caja tiene que estar en el interior. Vamos a decir que es un insecto. 00 y ocho píxeles va a ser el desenfoque y va a ser RGB un Alfa 000 tan rojo verde azul que va a ser negro y un 0.5 es 50% como decimal. También ha tenido uno más aquí y en set zero picks, esos dos pixeles cero y entonces tal vez vamos sólo a registrarnos. Podemos echar un vistazo a lo que estamos construyendo aquí. A ver cómo se ve esto. Ah, sí. De acuerdo, entonces tenemos eso dentro de la sombra ahí. Simplemente Es muy débil, pero se ve bastante bien en. Entonces. Tenemos el rojo arriba y no necesariamente queremos que se lea eso. Queremos que ese sea un color que va a parecer que le damos algo de profundidad. Y realmente sólo necesitamos un color más oscuro para esto, ¿como uno a uno a uno? No, eso no está mal. Adelante y sumamos algunos números aquí. Vamos a seguir adelante y darle estilo a esto, entonces. Sí, no vamos a tener tiempo para este en este video, pero la firma que podemos hacer en el siguiente video. Entonces lo bonito de todos estos es debilitar el estilo, todos estos todos a la vez. Entonces sigamos adelante y seleccionemos este elemento ordenado por sus elementos. Nombre ul. Vamos a darle un relleno de cero y un margen de cero. Y vamos a ver qué hace eso. De acuerdo, ese tipo de aprieta las cosas juntas. Eso es bueno. Eso es lo que queremos. Siguiente. Queremos seleccionar esa misma UL y luego todos los elementos de elemento de lista debajo de ella. Entonces este es nuestro elemento padre. Ese es este tipo de aquí. Y luego todos los elementos Niños llamados Al. Iba a agarrar ese y ese y ese todo el camino hacia abajo. Entonces primero lo primero. Deshaznos de este estilo de lista. Queremos asegurarnos de que esto realmente no se vea como una lista. Ahí vamos, no más puntos de bala. A continuación, vamos a darle a esto un color de fondo de Digamos que regístrese para que sepamos con qué estamos trabajando Eso es simplemente odioso. Pero cada botón también debe tener un poco de relleno. Podemos decir que el ancho de cada uno va a estar en algún lugar alrededor del 15%. Podemos ajustarlos por el camino si alguno de estos es incorrecto, por cierto, y también vamos a usar esta cosa llamada Float ahora en Modern nos ve, puedes usar flex box, y también puedes usar grid. Nos vamos a pegar con float y float es sólo una forma más fácil de tratar con estos botones porque queremos que todo tipo de abrazos uno al lado del otro. Y no necesariamente queremos meternos en las complejidades del flex box o grid porque es solo una calculadora. Simplemente queremos que esto sea sencillo. Entonces vamos a refrescar nuestra página. Y mirarías eso de inmediato? Esto toma forma como calculadora, y en realidad, creo que tengo todos estos en el orden correcto para tan clara división de multiplicación. Ese es nuestro periodo 789 más 456 menos 123 igual. Y entonces cero probablemente terminará haciendo que el cero tome lugar por debajo de uno por debajo de dos y debajo de tres. Y entonces el signo igual va a bajar también. Entonces casi estamos ahí con los botones. Cambiemos el color a como un blanco. Entonces ese es el símbolo hexagonal para Blanco. Es el número firmado F f f o simplemente podrías escribir blanco. Todos estos deberían tener un margen, y la razón por la que queremos eso es porque no queremos que todos estén tan al lado del otro que en realidad parece un botón grande. Nosotros queremos que estos sean separados. Entonces si guardo esto y refresco, verás que estos botones en realidad se separan en botones. Y eso es por nuestro margen aquí. Ahora necesitamos añadir un cursor porque actualmente, si solo pones el ratón encima, no parece un botón. Tu boca no cambia. Pero si nos refrescamos con el cursor, lo más realmente cambió. Parece que puedes hacer clic en él. Eso es bueno para la experiencia del usuario. Vamos a darnos, como un tamaño divertido de tal vez 20 píxeles. Algo así como esa línea textil va a ser centro. No creo que en realidad establezcamos esa línea de texto. No, no lo hacemos eso ya está establecido. También démosles un radio de borde para que los botones no sean súper duros y puntiagudos en las esquinas. Vamos a darnos a bordo un radio de voy a adivinar que cuatro píxeles tal vez no sean suficientes. Eso son cuatro píxeles. De acuerdo, ¿qué tal cinco píxeles? Sé como avanza con cinco píxeles. Por ahora, también necesitamos cambiar la fuente, cual no vamos a tener tiempo. En este video. Eso lo haremos en otro video. Ah, y vamos a sólo un montón de otras cosas aquí también. ¿ Qué nos falta ahora mismo? Por lo que el color de fondo es rojo. A lo mejor cambiemos el color de fondo o algo que se parezca más a un botón. Por lo que no es tan odioso y en tu cara alto encendido. Añadamos también una sombra de caja para que debajo de aquí, igual que lo que tenemos aquí abajo, en realidad parece que tenemos algún tipo de sombra o algún tipo de elevación fuera de la calculadora. Entonces, antes que nada, ese color de fondo realmente necesita irse Eso ya no se puede leer. 45 por cinco por cinco. No está mal. Y si hiciéramos 40. 44 e. sí, vamos con ese poco más ligero. Un poco más fácil trabajar con, en mi opinión, Pero de nuevo, eso depende totalmente de ti. Por último, sigamos adelante y añadamos a esta caja una sombra que vamos a sumar a las sombras aquí dentro, por lo que el 1er 1 va a estar en el eje X. No te muevas a ninguna parte del por qué el acceso se mueve hacia abajo cinco píxeles y el azul va a ser cero. Y luego vamos a decir que esto debería ser un cinco. A 585 Y eso nos da este bonito bache allá abajo, así que esto en realidad empieza a parecer una calculadora. También está en una secundaria, pero en tu y en el botón set, no un botón de seguir diciendo. Quise decir, Sombra de caja. Vamos a tener una sombra de cuadro interior y vamos a añadir una segunda sombra con una coma ahí en el eje X, moviendo cero en el acceso Y bajando dos píxeles. El desenfoque debe ser de cero píxeles. Y vamos a darle a esto un color algo más oscuro. Supongo que eso no es realmente oscuro. ¿ No es no? Eso es un gris bastante estándar y lleva refrescarse. De acuerdo, de acuerdo, puedo vivir con eso. Creo que eso es bueno para esta lección en particular en la siguiente lección. Vamos, um bueno, dije, vamos a hacer esto. Eso Vamos a darle estilo a eso un poco. De hecho podríamos volver a eso una segunda vez en adelante, y luego haremos un poco más con los botones 6. Tu firma: en el último video, dije, Vamos a trabajar en la firma. Probablemente no debí haber hecho esa promesa, pero vamos a seguir con ella de todos modos porque eso es lo que dije. Lo vamos a hacer en nuestra firma. Sigamos adelante y solo copiemos esta clase. El nombre de la clase, firma y debilitar objetivo que por ser una clase podemos usar el punto por lo que la firma de punto y podemos darle a esto algún tipo de color. Entonces tal vez blanco. Podríamos ajustar esto un poco más tarde también. Ah, la familia de fuentes podría ser algo totalmente diferente. A lo mejor. Vamos a comentar eso fuera por el momento. Y eso es solo un comentario de CSS aquí. El tamaño de la fuente. A ver, usar píxeles no. Usemos reinos. Entonces 0.75 relativo Mm dice que sí, en realidad podría decirme qué es eso. Eso sería genial si lo hace. Para bosque escalable, el tamaño de fuente es un factor de escala aplicado a la E. M. Unidad de frente. Y básicamente esta es una relativa e M unidades. Entonces uno es tu tamaño de fuente normal y 0.75 es aproximadamente 3/4 de tu tamaño de fuente normal. Sea lo que sea que va a ser de nuevo. Podemos cambiar eso por el camino. Si decidimos que quizá las habitaciones no sean de la manera que queremos ir. Digamos que el texto una línea va a estar a la derecha. Y sólo para que sepamos dónde estamos trabajando, Una frontera marítima, un píxel rojo sólido porque estamos usando muchas carrozas aquí. Esto podría no ser en realidad solo un div escribiendo aquí. Esto podría estar ocupando algo de espacio extra, y lo suficientemente seguro, en realidad se puede ver que esta es toda la firma. No queremos eso para nada. Entonces lo que tenemos que hacer aquí es posición relativa, y esto nos va a permitir establecer un índice SET. Y zed Index es como, ya sabes, cuando estás pintando sobre un lienzo y pintas capa encima de capa encima de capa, eso es lo que es esto ya que los índices diciendo que podríamos ponerlo frente a otras capas estaban detrás otras capas y horas. Ese índice, en este caso va a ser menos uno. Queremos ponerlo detrás de otras capas, y ahora ya parece que está haciendo eso, pero sólo queremos asegurarnos. Ahora vamos a desechar esa frontera roja. Y por el momento, creo que esto va a estar bien. En realidad necesitamos mover esto un poco, y ahí arriba está un poco apretado. Entonces espero que eso podría ser un pequeño problema. Entonces solo estaba hablando de este rincón aquí y de cómo el Texas básicamente tocando uno de los botones superiores. Entonces porque ya estamos usando posición relativa, podemos decir Muévete eso desde arriba. Es decir, supongo, y algo así como cuatro píxeles pueden debilitarse. Ajusta eso más tarde, y vamos a moverlo de la derecha de la pared derecha por cinco píxeles. Y así esto sólo va a chocar esto hacia abajo a la izquierda sólo un poquito. Oye, eso no está mal, pero quizá tengamos que volver a eso un poco más tarde en la próxima última. Adelante y agreguemos una costumbre. Forints o botones en realidad se ven un poco más bonitos, y tal vez vamos a aplicar eso para ese mismo fondo a nuestra firma aquí dentro antes de seguir trabajando en el estilo de los botones. Porque ahora mismo, si hacemos clic en él literalmente, no pasa nada. No se mueve arriba, no mira hacia abajo, no hace nada 7. Fuentes personalizadas: Está bien, Doke. Vamos a buscar una diversión personalizada, así que vamos a ir demasiado lejos. Es dot google dot com porque nos pueden dar acceso a casi todos los fondos que conozco de forma gratuita. O si quisiéramos, podríamos pagar por uno. No voy a pagar por uno. Yo sólo voy a usar uno gratis ahora. ¿ Tienes uno en mente ya llamado share? No, esa es la cuota de redacción personalizada, y va a verse así. Solo agreguemos un montón de números aquí. ¿ Ese tipo de aspecto se parece a lo que queremos? Yo creo que sí. Ya sabes, si no, siempre podemos cambiar eso también. Eso es lo bonito del desarrollo web es que si no nos gusta esto, podemos cambiar eso por cualquier otro fondo. Entonces me va a gustar este estilo y hacer clic en la cama aquí arriba, y hay dos maneras en que podemos hacer esto. Podemos agregar una hoja de estilo usando link, o podemos usar el comando at import, y vamos a utilizar el comando at Importar aquí. Tiene que copiar esto. Vayamos a la cima de nuestro estilo aquí y peguemos. Ahora bien, esto no va a hacer nada justo fuera del bate. Nosotros en realidad para agregar una familia de fuentes de compartir, y luego maldecir de raro, eso cae de nuevo a cursiva, Pero Ok, así que voy a copiar eso. ¿ Y dónde quería cambiar eso? Quería cambiarme en todos mis botones, y quería cambiarlo en la firma. Entonces voy a guardar esa página, volver a nuestra calculadora y refrescante. Está bien. A mí me gusta. Yo puedo vivir con eso. ¿ Se puede vivir con eso? Yo puedo vivir con eso. Si no, si eso no te gusta, siempre puedes usar un fondo diferente. 8. Movimientos de botones: bien, Tenemos estos botones. Ellos lo harán. Parecen botones. Sabemos que en realidad son elementos de lista. Por lo que hemos engañado un poco al usuario ahí. Eso está bien, pero cuando hacemos clic en él, no pasa nada. Entonces necesitamos agregar algún tipo de estilo aquí Eso sucedió que básicamente, cuando hacemos clic en esto, parece que se está moviendo hacia abajo. Por lo que todos nuestros botones, nuestros aliados y estamos seleccionando la lista ordenada de la ONU y luego los ítems de la lista. Entonces, trabajemos también justo fuera de eso. Vamos a crear una U L L I iba a seleccionar todas las listas ordenadas y luego todos los elementos aliados debajo de ella. Vamos a decir cuando está activo, y eso significa cuando lo estás haciendo clic y sosteniéndolo, ¿qué va a dio? Nos vamos a dar una posición de familiar Voy a decir Bump it down por cinco pixels. También vamos a cambiar esa sombra de caja también. Y luego box shadow cómo nos deshacemos de eso del último video. Esa sombra de caja. Acabo de comentarlo, y nos ocuparemos de eso en tan solo un segundo. Yo sólo quiero echar un vistazo aquí. Está bien, se está moviendo, ¿verdad? Si en realidad sólo esa sombra de caja la sombra de caja se mueve hacia arriba o básicamente nos deshacemos de ella en su mayor parte. Ahora cuanto más miro esto, más no me gusta esa sombra superior en esos eso. Vamos a seguir adelante y editar eso, porque eso me va a enloquecer cuanto más lo miro, más simplemente no parece del todo correcto. Por lo que tenemos. Sí, tenemos su botón aquí. Ese es nuestro aliado Box Shadow X cero. ¿ Por qué? Bajando cinco píxeles. Cero desenfoque A 58585 OK, tal vez no usemos exactamente el mismo que estábamos usando aquí arriba. Intentemos cambiar esto. Intentemos hacer cero píxeles en el eje X que queda. Y ahora mismo, vamos a hacer tal vez dos píxeles hacia abajo. Eso es arriba y abajo. Veamos por qué Access y un desenfoque de cinco píxeles con un RGB un rojo verde azul alfa de Yeah, ese es el que queremos ahí mismo. Y vamos a ver cómo resulta eso. Oye, eso se ve mucho mejor. ¿ De acuerdo? Todavía tenemos todo el asunto moviéndose hacia abajo, que es el problema actual, pero arreglamos esa rareza que originalmente teníamos. Estoy mucho más feliz con eso ahora mismo. Entonces ahora volvamos a nuestro aliado. Y cuando estás presionando y sosteniendo uno de esos botones, ¿a qué va la sombra a dio? Vamos a darle a esto un insecto Así las sombras van a estar en el interior. Probemos X x cero. Por qué acceder a un pixel a pixel desenfoque y rgb un rojo verde azul Alfa en esto va a ser negro así como tu 0.4 otra vez. Si estás viendo esto nuevo como, Hey, Caleb, esto es genial. Pero, ya sabes, solo quiero que sepas que esta es una calculadora realmente gris y aburrida. Siéntase libre de picar esto hacia arriba en una imagen de fondo en lugar de una radiante. Puedes cambiarnos para parecernos más a madera o plástico o algo así. ¿ Y tú? Es eso lo que quiero? Sí, eso es lo que quiero porque eso parece bastante aplanado. Ahora tenemos Oh, está bien. Tenemos que cambiar esto porque aquí tenemos demasiados botones. Entonces hagamos que este cero se extienda hasta aquí y aquí. Y hagamos que este signo igual se estire hasta el fondo. ¿ Cómo apuntamos a este signo igual? Este signo igual va a ser un complicado cuando yo lo creo. Este es el segundo último. Vamos a usar a un décimo niño. Selectores, este es un poco más avanzado CSS. Básicamente, lo que vamos a decir es cero uno, 23456789 10 11 12 Todo el camino hasta éste. Y vamos a seleccionar ese específico usando sólo CSS. Y lo podemos hacer con UL Ally y niño Número de niño 16. Y vamos a darle a esto un borde dos picos un blanco sólido. Y vamos a asegurarnos de que estamos apuntando al correcto aquí. Y sin embargo estamos hablando de la correcta. Entonces sólo vamos a ignorar esto porque esto sólo va a una especie de movimiento donde queramos porque todo lo demás está flotando. Queremos asegurarnos de que los elementos flotantes estén con unos con los que trabajamos. Eso es lo que queremos. Entonces esa fue una buena conjetura. Entonces hagámoslo el doble de altura. Por lo general lo es. Entonces si te estás preguntando, Oye, ¿cuál es la altura. Volvamos aquí. Haga clic en este. Inspeccionar elemento. Y si hago clic en alguno de estos o pasar el cursor sobre ellos, se puede ver eso en mi modelo de objetos de documento. Es aquí arriba, la representación visual de la misma. Cada uno de estos es de 65 por 43. Y si arrastramos a este pequeñito de diseño allá, en realidad podemos ver. Pero en el interior, 45 píxeles por 22 píxeles. los hombres le sacan 10 arriba top 10. En la parte inferior están esto es de casi 23 píxeles para un total de 42. Ahora bien, eso puede que no sea del todo preciso porque estamos haciendo algunas cosas extra. Entonces quiero decir, honestamente sólo voy a adivinar, eh, vamos a ver 37 píxeles. Vamos a cambiar su altura y a ver qué pasa. Yo lo hice bastante grande. Y si echamos un vistazo a esto, sólo ese signo igual ese es el que estamos viendo aquí. Apenas el signo igual de que la altura es No. 37 más 10 en la parte superior e inferior. Entonces yo sólo voy a echar un vistazo a este. Voy a decir 75 píxeles y vamos a seguir adelante y deshacernos de la frontera porque eso va a una especie de lío también y pensar que puedo vivir con eso. Voy a vivir con eso. Voy a hacer que esto funcione, y luego tenemos que mover este de aquí. Ahora bien, esto ya está flotando. Entonces este es interesante porque tenemos que seleccionar este botón en particular y volarlo hacia arriba y luego estirarlo hacia la derecha. Adelante y agarremos ese elemento. Por lo que Ul Ally. ¿ Y cuál es ése? Creo que fue el último elemento. ¿ Lluvia? Sí. Este es uno fácil de agarrar con CSS, solo podemos decir último hijo, y eso es al margen superior de como menos 45 píxeles. De nuevo, sólo estoy mirándonos y un ancho de como 70% Y creo que en realidad necesitamos mover ese margen un poco hacia arriba porque estos no se alinean y que con esto un poco demasiado eso lo que podemos hacer en lugar de escribir, ahorrando, refrescante. En realidad podemos simplemente cambiar eso aquí. Entonces lo que hice fue correcto. Haga clic en inspeccionar Elemento y seleccioné el que quiero editar. Entonces estoy en el cero y aquí dentro. Ahí está. Menos 48 es el que queríamos, y sólo estoy cambiando este valor aquí mismo. Y el ancho. Hagamos eso más pequeño. Menos 65 no son menos 65 sólo 65%. Entonces la altura No hay uno equivocado. El top emergente es de menos 48 píxeles, y el ancho era, creo que dije 65%. Entonces sigamos adelante y refresquemos esto y se queda como se supone que debe hacerlo. Perfecto. Eso se ve bastante bien. Y entonces sabes qué? Vamos a retocar este signo de igualdad. Hagamos ese signo igual. Estar justo en el medio Ahí. Queremos hacer una altura de línea, no el último niño corre una altura de línea de 75 píxeles. Veamos qué hace eso, y este es solo nuestro signo igual. Esa es la que le damos altura extra, también. Sí, se ve bastante bien, Bastante bien. Yo estoy contento con eso. Entonces, por el momento, creo que podemos dejar esto donde está, y podemos empezar a trabajar con algunos de los JavaScript. Ahora va a haber todo tipo de casos de borde extraño con JavaScript porque eso es matemáticas humanas , donde sabes que no puedes dividir un número por cero. ¿ Qué pasa cuando hacemos eso? Vamos a lidiar con todo tipo de esas cosas ahí dentro. Entonces la siguiente lección vamos a saltar al mundo de JavaScript. 9. Acciones de botón: De acuerdo, estamos haciendo tanto progreso aquí. Actualmente, sin embargo, al hacer clic en uno de estos botones quiero decir, parece que está haciendo algo, pero en realidad no lo hace. Entonces cuando hacemos clic en el número cinco, número cinco debería aparecer aquí arriba Al hacer clic en Dividir, debería guardar cinco dividido por. Entonces sigamos adelante y hagamos que eso realmente funcione. Lo primero es lo primero. Tenemos que deshacernos de estos números aleatorios. ¿ En qué número suele empezar la calculadora? O nada o cero. Sí, empecemos con cero Ahora. Podríamos hacer esto a través de varios videos aquí, y lo primero que queremos hacer es que queremos seleccionar todos estos y luego agregar un oyente de eventos . Entonces cada vez que hagas clic en nueve o uno o claro, va a hacer algo. Por lo que escribimos esto en nuestro JavaScript en la parte inferior de su página. Escribimos etiqueta de apertura y cierre de guión, y luego podemos agarrar una lista de todos nuestros aliados. Entonces estamos diciendo constante porque esta lista no va a cambiar aliados de ese solo portal para Ally es igual al selector de consulta de puntos de documento. Uh, y vamos a conseguir todos los elementos aliados de UL. Ahora bien, si alguna vez te estás preguntando, ¿cómo sabemos lo que estoy haciendo? Porque parece que estoy codificando en la oscuridad. Lo que puedes hacer es correcto. Haga clic, inspeccione en su página, Vaya a su consola y podrá escribir esto. Acabo de copiar y pegar eso ahí dentro. Y cuando escribo aliados y golpeo enter, obtienes esta cosa llamada una nota una lista y tengo 17 ítems en tu y puedes ver eso cuando pase el cursor sobre cada uno. En realidad me dice cuál es cuál, que es bastante guay. Entonces esencialmente, esta es una matriz o una lista de cada l I que tengo en esta página. Ahora que tengo que puedo recorrer cada uno y añadir un oyente de eventos. Entonces voy a recorrer cada uno con los aliados punto para cada uno. Y este también es javascript moderno, cuando vamos a usar una función aero gordo aquí. Entonces en lugar de escribir función como normalmente lo haríamos con nuestra antigua forma de escribir javascript , no vamos a hacer eso. Simplemente vamos a decir que no uses funcional acaba de pasar por lo que sea que sea la nota. Y ese nodo, cada uno de estos se llama nodo. Así que pasa por esa nota y luego con ese nodo, podemos decir que no hay punto add event listener. ¿ Y qué pasa cuando haces algo? Entonces vamos a decir más abajo y luego este, en realidad vamos a dar una función adecuada y no lo llamemos e porque eso no es intuitivo. Si eres algo nuevo en JavaScript, vamos a pasar en un evento a esta función en particular. Y primero lo primero, vamos a decir event dot, prevenir default, y al siguiente vamos a obtener el valor de lo que esté dentro de este aliado. Entonces es un valor constante es igual a, y luego lo que sea esta nota en particular, Así que vamos a agarrar esta de aquí. Ese es el asterisco. Y si nos desplazamos hacia abajo al inter texto interno, interno, podemos obtener este valor ahí mismo. Eso lo hacemos con cualquiera de los otros, también, porque todos son exactamente iguales. Simplemente tienen un número o letra diferente ahí dentro. Entonces éste es No, No hagamos eso. Hagamos el número nueve Así que es el seis elemento de nuestra lista. No obstante, es el número nueve aquí arriba, y si miramos hacia abajo, miramos hacia abajo. El texto interior es nueve. Eso es lo que queremos. Por lo que tenemos un nodo valor de punto texto interno y luego por si acaso hay espacios a su alrededor. Entonces tal vez escribiste tu HTML como este recorte solo va a deshacerte de ese espacio extra para ti, y entonces podemos consola dot log ese valor ahora. Esto todavía no va realmente a hacer nada útil o valioso. Vamos a refrescar nuestra página. Y cuando hago clic en siete, dice siete y en realidad se puede ver que cada vez que hago clic en un botón, aparece aquí abajo ahora. Una cosa a tener en cuenta aquí es cuando estás usando event dot prevent default, se va a tratar de evitar que todo haga lo que normalmente hace. Ahora, si estás usando enlaces en lugar de un elemento de lista, probablemente vas a necesitar eso, lo que significa que tus animaciones no van a funcionar. Cuanto más haga clic en esto, no pasa nada. Mi botón ya no se mueve hacia abajo. Entonces si elimino esto, guarde ese archivo, vuelve aquí. Refresca ahora dice cinco. Ahora dice ocho. Y ahora los botones realmente se están moviendo hacia abajo también. Por lo que sólo ten en cuenta eso. Si estás usando estos artículos como yo, no tienes de qué preocuparte. Se puede ignorar prácticamente el último minuto de lo que estaba hablando. A continuación, queremos realmente obtener el resultado aquí arriba. Eso es demasiado grande. Nosotros queremos conseguir este resultado, y queremos poner ese número ahí dentro. Entonces sigamos adelante y agarremos ese resultado también. Entonces los callos resultan, y estoy usando un signo de dólar aquí justo como ejemplo. No tienes que hacerlo, pero como ejemplo, el signo de dólar normalmente significa que estás agarrando algo del modelo de objetos de documento, lo que significa que deberíamos usar uno aquí y aquí también. El resultado va a ser selector de consulta de punto de documento, y luego solo queremos agarrar ese resultado. Y creo que lo llamamos resultados de clase. Resultados de clase correctos. Sí. Y lo que podemos hacer es simplemente sobrescribir ese texto de resultado. Es ahora podemos decir que el texto interno de punto de resultado es igual al valor. Salgamos de ese registro de consola y actualicemos su página, y esto dirá siete y luego cinco y luego nueve y luego cero, y luego así sucesivamente y así sucesivamente. Podemos seguir haciendo esto todo lo que nos guste. No, creo que eso es suficiente para este video en particular en el siguiente. Sigamos adelante y en realidad sumamos alguna lógica donde podemos decir ocho, divididos por nueve o cero más cuatro en lugar de solo tener un personaje a la vez aparecer. 10. Calculadora operativa: todo bien. Donde lo dejamos fue Cada vez que presionamos un botón, quita cualquier valor que haya ahí dentro y muestra el nuevo valor ahí arriba, que es una especie de lo que queremos. Pero en realidad nos metemos en un colgante. Entonces si golpeo uno y luego al número 12 no debería dibujar uno y luego dos, también queremos averiguar cómo usar el signo igual y todas estas otras cosas y asegurarnos de que si alguien golpea el mar, que simplemente despeje la respuesta. Entonces vamos a sumar todo eso en este video en particular. Ahora, en el último video, dijimos que el punto de resultado inter impuesto va a ser el valor. Deshaznos de eso porque eso sólo va a cambiar el número una y otra vez. En realidad va dedo del pie anularlo cada vez. No queremos eso. Lo que queremos en cambio es agarrar el texto del resultado. Entonces lo que sea que esté aquí, necesitamos agarrar eso ahora. No sabemos si va a haber espacios o no, así que vamos a tener que recortar eso también. Entonces es const El texto de resultado es igual al resultado de punto interior de texto punto recorte y todo que va a hacer es agarrar este resultado aquí ese selector de consultas. Se va a agarrar esto y va a agarrar el valor ahí dentro. Entonces si fuera espacio Espacio cinco, ese todavía aparecería como solo el número cinco para nosotros, eso es lo que queremos. Ahora empecemos agregando alguna lógica simple siempre que tengamos algo que pueda suceder a través de numerosos caminos. Si dijera que podías ir a la izquierda recta o a la derecha, podrías tomar tres acciones en tu vida. Si conducías por un camino o caminabas por un camino calculadoras no diferentes. Podrían quedar claros los hechos. Podrías tener algún tipo de aplicación matemática real aquí. Podrías estar diciendo lo que sea que ponga ahí, convertido a respuestas reales o una solución. O tal vez solo estás agregando un número al texto resultante aquí. Entonces eres un pendiente ese número. Empecemos con la forma más simple. Empiezo con claro, claro cada vez que tocamos el botón claro. Todo lo que se supone que debe hacer es hacer que la pantalla quede en blanco. Entonces ahora podemos decir si el texto del resultado es igual a ver y yo estoy obteniendo esa vista desde aquí, que también está justo aquí. Si es igual ver ¿qué vamos a dio? Vamos a cambiar ese texto interno de punto resultante a Estoy despejado porque es una calculadora odiosa, Al parecer, Al parecer, y luego vamos a devolver Verdadero. Y todo lo que hace el retorno es porque esta es una función. Siempre que se ejecute la función, el código va a ir de arriba a abajo. Y cuando llegue a este retorno, palabra clave va a decir: Oye, Oye, si hay algo debajo de él así, no ejecutes nada de eso. Está diciendo Te presionas la palabra clave de retorno dejar de ejecutar todo lo que se encuentra a continuación. Es sólo salida sobre lo funcional juntos. Eso es lo que queremos. Entonces este va a ser un ejemplo muy extraño. Acabo de golpear refresco, Así que si doy ocho, vemos que no pasa nada porque nos deshicimos de esa parte donde dice creo que como un botón pone el número aquí dentro. Pero si hacemos clic en claro, no va a pasar nada. Y en realidad no repasemos esto de verdad rápido. Cometí un error lógico. Texto de resultado de verano. Eso es lo que busco lo que queremos, en realidad, es el valor del botón. Este es el botón que estaban presionando, por lo que se supone que tiene que ser de valor en. Asegurémonos de que siempre lo estamos comparando. Entonces si escribes un Casey inferior o un Casey superior, esto seguirá funcionando para ti. Punto de valor a minúscula Asegurémonos de que se trata de una minúscula, por lo que va a tomar la letra C mayúscula haciendo una minúscula. Y si es igual a una minúscula, entonces cambiará el resultado en su texto. Aquí vamos. Aquí hay un mejor ejemplo. Entonces cada vez que me refresco y claro dice que estoy despejado ahora eso es odioso. Sólo queremos aclararlo, claro que valor Maldita refresque Bam, bam! Justo así. Ahora ese es el botón claro. Pero si hacemos ocho divididos por cinco, nada está apareciendo aquí. Por lo que necesitamos asegurarnos de que eso se presente. Entonces lo que podemos hacer es agarrar este resultado y sólo un recordatorio de que esto aquí mismo podemos agarrar ese resultado existente y podemos alzarle algo. Podemos subir el valor. Entonces lo que estamos diciendo aquí es una pluma, el valor. A menos que sea una letra C. Así que voy a ir de arriba a abajo. Si es una letra C va a devolver verdad, no va a hacer nada. Si es otra cosa, entonces va a tomar ese resultado y le va a agregar el valor. Ocho Divididos por cinco va a ser un dividido por cinco en nuestras áreas de resultados. Sigamos adelante y guardemos eso y demostremos este ocho dividido por cinco. Ahora se puede ver que tenemos un cero inicial ahí dentro, así que eso fue un poco problemático. Pero se puede ver que todos nuestros números están apareciendo uno al lado del otro ahora. Y esta es una buena noticia. Esto es lo que queremos. Queremos algo así aquí dentro. Esto significa que en realidad podemos empezar a hacer algunas matemáticas. Entonces si despejamos eso e hicimos siete veces siete y eventualmente golpeamos igual ¿qué va a pasar? De acuerdo, bueno, ahora tenemos otro caso de ventaja. Tenemos otro camino por recorrer cuando cada hit es igual. Iguales no deben aparecer ahí dentro. En realidad debería hacer las matemáticas por ti. Adelante y agreguemos eso ahí dentro. Entonces ahora podemos decir si ese mismo valor es igual a un signo igual. Ahora podemos decir que el texto interno punto resultado es igual a una solución de algunos, algún tipo de solución. No sabemos qué es eso todavía. Sigamos adelante y creemos esa solución, sin embargo. Entonces es dejar solución porque eventualmente podríamos cambiar tal vez. Por lo que hemos estado usando a Const hasta ahora. Recuentos significa que no se puede cambiar ese valor en la variable. Deja significa que puedes. Entonces eso es cambiarlo. Y esa solución va a ser malvada. Cualquiera que sea el resultado punto de texto interno punto ningún html inter text dot trim va a ser, por lo que va a agarrar ese resultado. Lo que sea que esté actualmente en la sección de resultados justo aquí arriba, se va a agarrar ese texto interno. Se lo va a recortar. Ahora aquí está la cosa es que en realidad se puede ver que hemos escrito este ya. Simplemente escribimos texto de resultado. Ese es el poder de las variables. No tenemos que escribir lo mismo dos o tres veces. Podemos escribirlo una vez y volverlo a usar. Por último, tenemos que volver verdadero y la razón de Eso es porque si no lo hacemos, vamos a tener el signo igual que va a hacer siete veces. Siete. Se mostrará. Muéstranos 49 en, entonces se va a anexar ese signo igual. No queremos eso. Queremos que nunca muestre el signo igual. Basta con hacer las matemáticas. Entonces ahora si lo hacemos siete veces siete Bueno, tenemos un 07 ahí dentro, pero está bien podemos ocuparnos de eso más tarde. Es igual a 49 es igual a ahora. Estamos súper cerca, pero sí tenemos un problema. Siempre que empezamos de nuevo en lugar de cero, dice 07 Y cada vez que nos multiplicamos, tenemos signo desigual al al final, dice Tackle esos, Y eso será suficiente para esta lección en particular. Entonces sigamos adelante y deshagamos de ese cero. Entonces podemos decir si el texto del resultado es igual a cero. Cambiar los resultados punto inter texto a nada. Ahora no vamos a decir volver aquí porque simplemente queremos anularlo y dejar todo lo demás suceda. Guardemos eso y refresquemos, y ahora porque va a empezar con cero, voy a golpear siete. Te va a pasar por aquí, digamos, Oh, le pegas 70 ese número que actualmente está ahí es cero. Así que borrarlo y luego se va a tratar de hacer estas condiciones ALS. No van a ser un partido, y luego va a agregar cualquier número que yo quisiera que se anexen aquí atrás. Entonces cuando golpeé siete, ya no dice 07, lo cual es realmente, muy bonito. Entonces ese es un tema resuelto. El siguiente es que si hice siete veces ocho, teníamos ese trabajo de signo igual. No obstante, esto pudo haberse resuelto ya por sí mismo porque estábamos limpiando nuestro código. Y debido a que ahora estamos haciendo matemáticas adecuadas, esto va a empezar a funcionar de la manera que la queremos. Teoh. Entonces en la siguiente lección, sigamos adelante y añadamos algo más de lógica aquí, porque ¿qué pasa si aclaro esto? Y yo hice 10 dividido por cero? ¿ Qué crees que va a aparecer? Vamos a necesitar manejar ese escenario 11. La calculadora terminada: está bien, dejando fuera de la última lección. Te dejé en un cliffhanger, y dije: ¿Qué pasa cuando haces 10 Dividido por cero. En la vida real, no se puede hacer 10 dividido por cero. De lo que pasa, se obtiene el infinito. Eso en realidad está en JavaScript. Ese es un tipo de datos, pero también eso no está mal. Ahora el problema es que si escribo cinco u ocho o algo así, sigue diciendo infinito, No queremos eso. ¿ Y si despejamos esto y golpeamos iguales? También nos quedamos indefinidos. Tampoco queremos eso, porque nuestra lógica no lo está buscando. No está buscando la palabra indefinida o infinito. Entonces lo que tenemos que hacer es comprobar para ver si el resultado grava cero. Si es indefinido o si es infinito, simplemente restablecerlo para que quede en blanco. Por lo que podemos decir eso muy fácilmente dando un o condicional aquí así o así. El resultado. Impuestos iguales a cero, o esas son las dos pipas. El texto de resultado es igual a indefinido, o esas son las dos tuberías o el texto de resultado es igual a infinito y que tenía un I. mayúscula Se va a tomar lo que sea ese resultado en su texto, y sólo lo va a restablecer a nada. Eso es lo que queremos. Vamos a seguir adelante y darle una oportunidad a esto ahora. Y si solo golpeo igual a nada pasa si golpeo, Clear me da indefinido. ¿ Y qué hay de Hey, mira eso. Se va ahora. También puedo hacer 10. Dividido por cero es igual al infinito. Y si hago click, no sé cinco. Bueno, eso aún aparece Infinito. Eso probablemente significa que hice un tipo de algún lugar infinito lo clavó. Conócete a ti mismo. Sé que cuando hago tipográficos, los hago todo el tiempo. Intentemos eso otra vez. 10 dividido por cero es igual al infinito y luego golpeó cinco. Ahí vamos. Ahora tenemos una calculadora en funcionamiento. También podemos usar puntos decimales. Todavía no hemos explorado esto, así que podríamos hacer 12.5 más 15.5 es igual a 28 Así que los puntos decimales funcionan automáticamente para nosotros también. Está bien. Y así es como se crea una calculadora para que ahora podamos manejar todo tipo de situaciones que podamos manejar. Despejar, multiplicar, dividir los números decimales más iguales y restar. Hacemos todas esas cosas dentro. ¿ O es que 19 a 1 45? Entonces en algún lugar alrededor de 25 ish líneas de código, hicimos una calculadora en JavaScript, y lo último que realmente necesitamos hacer es mover estos a sus propios archivos porque ahora mismo sabes que en realidad no hay nada de malo en lo que estamos haciendo. Pero como mejor práctica, deberíamos mover el JavaScript CSS NZ a sus propios archivos. Entonces en el siguiente video, sigamos adelante y hagamos eso. 12. Limpieza de código: Está bien, Dokey. Tenemos un montón de código aquí. Tenemos HTML CSS y JavaScript, y la forma en que lo estamos escribiendo no está mal. Pero podemos hacer esto de una mejor manera. Entonces todo nuestro CSS, lo que voy a hacer es agarrar eso de la línea ocho hasta el final de la línea 88 voy a cortar eso justo aquí. Y vamos a deshacernos de esas cosas vivienda de nuevo adentro para que podamos ver esto. Y necesitamos crear un nuevo elemento aquí llamado Link. Y la relación va a ser una hoja de estilo. Y vamos a vincular esto usando H ref a un archivo llamado style dot CSS. Y eso rimaba un archivo llamado Estilo. Eso fue no intencional. Pero quédese con ello porque me gusta. Ahora necesitamos crear un archivo llamado style dot CSS. Lo primero es lo primero. Esto engaña a mucha gente. Entonces esto no existe en mi computadora ahora mismo, Así que si vuelvo aquí, refresco, en realidad se puede ver que todo el CSS se fue. De acuerdo, entonces si solo abro en mi navegador, solo lo refresqué ahí y puedes ver que mis estilos ya no se aplican. Eso está bien. Y si entras a tu cónsul aquí y ves, uh, veces va a entrar dependiendo del navegador, por supuesto. Pero a veces verás como un 404 Dirá ese estilo que CSS no existe si ese es el caso, pero sí existe. Es posible que tu estilo de que CSS simplemente no esté en la misma carpeta que tu índice dot html. Ahora, en mi caso, no aparece nada. Y si voy a la red y solo golpeo refresco, absolutamente no pasa nada. Aquí no hay nada en absoluto de carga del dedo. Y eso en sí mismo es en realidad un problema. Es decir que no hay estilo que ella intente cargar en absoluto. Entonces lo que voy a hacer aquí es solo crear un nuevo archivo y pegar lo que tenía ahí dentro, y voy a guardar esto como estilo en dot CSS y tengo estos dos archivos uno al lado del otro. Entonces en la misma carpeta, tengo index dot html. Tengo estilo dot CSS. Ahora, si vuelvo aquí y refresco tu página debería ser peinada de la forma en que esperabas ser peinada, Pero también, deberías ver algunas cosas aquí con dentro de tu pestaña de red y en realidad puedes ver que esperaba sabía que eras l o función de filtro pero encontrado pro Gee, yo d Eso está realmente bien. Eso se debe a que estamos apoyando a Microsoft Radiance para I E 69 del que en realidad podríamos deshacernos porque bastante conocido en el mundo por apoyar a Internet Explorer 69 ya. Entonces ese es básicamente nuestro CSS y un archivo externo. Ahora necesitamos entrar en nuestro índice dot html y agarrar este guión todo esto. Vayamos de la línea 37 a la 62 y cortemos. Y esta puede ser fuentes de script iguales a, y llamamos a este script dot Js y pongamos estos en la misma línea. Ahora cuando refresque esto, no va a pasar nada. Es porque sacamos todo nuestro javascript, y cuando refrescamos nuestra página aquí, en realidad podemos ver. Dice Firefox. Falló la carga para script con fuente de y luego script dot Js. Entonces si alguna vez ves algo como esto con tu jazz o tu CSS, significa que simplemente no puede encontrar el camino correcto. Y así solo queremos asegurarnos de que Script Js esté en la misma carpeta que nuestra como nuestro índice dot html. Entonces es crear un nuevo archivo. Paguemos código estrella aquí y podemos guardar esto como script dot Js. Y cuando volvamos aquí, Firefox dejará de quejarse porque se está cargando perfectamente. Y yo estaba calculadora continúa trabajo del dedo del pie. Y con todo eso, ahora hemos hecho una calculadora con HTML en menos de 40 líneas de código 39 líneas de código. Excluyendo esto y esto así 37 líneas de código HTML. Tenemos una calculadora en menos de vamos a deshacernos de esa red y eso y eso y eso fue como cinco espacios ahí dentro y como, 22 ish líneas de código reales. Tenemos una calculadora JavaScript funcional y en cerca de 80 líneas de CSS, tenemos una calculadora de aspecto realmente, muy agradable. Entonces al final del día, esto en realidad no es mucho código, y hemos hecho algo realmente, realmente bonito 13. Resumen: mi querido desarrollador front-end. En primer lugar, gracias por tomar este curso sobre la participación de habilidades. Sí tienes un proyecto y cada proyecto de participación de habilidad. Cada curso de share de habilidad tiene una pequeña sección de proyecto en la que realmente se puede crear un proyecto adecuado. Puedes compartir capturas de pantalla, o puedes poner todo este código en un código pen dot io y puedes compartir ese link embed. De cualquier manera, solo asegúrate de agregar tu proyecto de participación de habilidades. Ah, pero no quiero que solo uses el código fuente que tengo. No hagas una gran calculadora aburrida como esta. Intenta usar algo que sea un poco más interesante. Entonces en lugar de como un fondo radial gris, tal vez ponerlo en un escritorio en lugar de una calculadora de aspecto gris. A lo mejor se parece más al plástico o utiliza una imagen de fondo que parece repetir plástico o algo así. Puedes cambiar la forma en que tus botones actúan y cómo se ven un oleaje duran pero no menos importante, Hagas lo que hagas para modificar tu calculadora, asegúrate de firmar tu nombre en ella porque ese será tu trabajo. Una vez que tengas tu proyecto final, no olvides compartirlo en tu habilidad share especie de sección en, y puedo echarle un vistazo y te puedo dar retroalimentación y todo tipo de cosas. Y por último pero no menos importante, si te gusta mi estilo de enseñanza, no olvides que siempre puedes seguirme en la cuota de habilidad. Echa un vistazo a algunos de mis otros cursos. Si quieres conocer más sobre HTML o CSS o JavaScript o cualquier cosa que hayas visto en este curso en particular, también puedes ir a mi perfil. Tengo una masterclass HTML o, uh, se llama el último Desarrollador HTML tener una masterclass CSS llamada la masterclass CSS y JavaScript para principiantes y JavaScript, desde cursos novatos hasta ninja. Entonces si alguna vez te estás preguntando sobre JavaScript moderno, si algo de esto no tenía sentido y quieres aprender al respecto, tengo las espaldas. Si no sabes nada digamos InTs radiales Grady o box shadows box, esa fue una buena, porque esa es ah, declaración CSS realmente rara para trabajar. Si te interesa algo así, puedes consultar los cursos de clase magistral de CSS. Pero tengo varios otros cursos sobre otras materias también, como Python. Pero claro, y como siempre, no hay presión para ir y aprender todas esas cosas de inmediato. Html. CSS y JavaScript Llevan más de 20 años por ahí, y no van a desaparecer en ningún momento pronto. Por lo tanto, no olvides crear tu proyecto de participación de habilidades. Adelante, lanza eso en tu proyecto de compartir habilidad para que pueda echarle un vistazo. Ah, y también puedes compartirlo con la comunidad y mirar los proyectos de otras personas y obtener alguna inspiración para ver lo que te gusta y lo que no te gusta. Gracias de nuevo por tomar este curso, y nos vemos en otro.