## Transcripción automática
hola chicos que tal bienvenidos el día
de hoy vamos a aprender cómo hacer una
calculadora enteramente con html y css
aquí no hay ya escribe involucrado no
hay ningún archivo no hay ningún de
taksim en game y no hay nada de sustos
completa y enteramente html y css como
pueden ver aquí entonces si están
interesados en hacer una calculadora
como la que pueden ver bastante bonita
pues quédense en este vídeo y vamos a
darle
[Música]
y
y
y para comenzar vamos a requerir dos
documentos que yo aquí tengo ya los míos
entonces lo que voy a hacer es borrar
todo esto vamos a borrar todo esto de
aquí y lo primero es claramente un
archivo html aquí aplicamos el boiler
play de emmett vamos a ponerle un
pequeño título algo como calculadora
y también necesitamos enlazarlo con
nuestro css vale entonces esto es lo
tradicional ahora con respecto a la
calculadora lo que voy a hacer es tener
un 10 que se llame
con tenedor y en este 10 va a estar la
calculadora y la calculadora no es nada
más que
una forma
que entonces para opción le ponemos nada
vamos a ponerle en clase calculadora en
nombre de la de la forma vamos a ponerle
cálculo
y lo primero es un input un input estilo
texto el predeterminado en este impulse
van a estar los resultados donde se ven
los números y por ello vamos a ponerle
que sea solo de lectura no queremos que
el usuario lo modifique queremos que
solamente pueda ver el valor que vaya
apareciendo ahí lo primero lo segundo es
que este input va a tener una clase
llamada resultado
y necesitamos ponerle un nombre por un
hombre va a ser res de resulta
aunque entonces aquí vamos a guardar nos
vamos a
a nuestro
a nuestro navegador en su navegador y
aquí está el input como pueden ver no
puedo escribir no no no me deja porque
le pusimos el ratón y sólo lectura
ahora las teclas no van a ser inputs y
van a ser elementos tipo spam entonces
vamos a ponerle un spam con la clase de
techland
y vamos a comenzar con el pse que es
para crear o borrar aquí está ahora cómo
funciona cómo vamos a convertir este
spam en una tecla muy sencillo vamos a
decir aquí en el html
un clic queremos que se modifique algo
queremos modificar queremos modificar el
valor de éste
entonces para eso lo primero es agarrar
o encontrar este elemento dentro del dow
jones ese documento bueno aquí me en
punto luego tenemos que irnos a la forma
la forma tiene el nombre de cargo
luego tenemos que irnos al input limpio
tiene el nombre de res y luego queremos
señalar que vamos a modificar de res
obviamente su valía y vamos a decir que
un clic este elemento que ya
seleccionamos queremos que
queremos que
cambie su decir que en clic su valor va
a ser vacío
aquí está
eso es lo primero ahora lo segundo es
continuar con las demás teclas entonces
aquí vamos a
a tomar este de aquí lo vamos a duplicar
bueno antes de duplicarlo vamos a
modificarlo después de la se sigue la
tecla de dividir entonces aquí en lugar
de ser podemos dividir y para dividir va
a ser algo más o menos igual con la
diferencia de que aquí vamos a decir
toma el valor que ya estaba antes en el
input del resultado y sumarle
diagonal y es esto lo que estaremos
haciendo con cada una de nuestras teclas
y si volvemos aquí a esta parte y yo
clic en el dividir pueden ver que ya me
lo está modificándose hago clic en él se
declare la loua entonces con esto en
mente luego que necesitaríamos hacer
entonces es tomar esto de acá
e ir lo duplican
yo les recomiendo que le echen un
vistazo a alguna calculadora que tengan
cerca yo aquí tengo anotado mi orden
vamos con el dividir y multiplicar 78 y
más para dividir
multiplicar
7
8
y 9
y aquí lo mismo voy a adelantar esta
parte para que no sea muy tedioso normal
es mucho tiempo una vez que hayamos
llegado al igual aquí no vamos a añadir
el igual al
a la calculadora porque si hiciéramos
eso vean aquí todos funcionan lo que
pasaría es que simplemente se agregaría
y no hace cálculo para poder hacer el
cálculo lo que haremos es lo siguiente
vamos a borrar el más de modo que
digamos que
el valor de aquí va a ser igual
vamos a escribir el val que significaría
evaluar y aquí tomamos nuestro elemento
que sería régimen punto calcule punto
res punto fácil vamos guardar
regresamos aquí y podemos decir 95 es
igual a 14 14 menos 9 es igual a 5 muy
bien y esto es lo básico para la lógica
de la calculadora como pueden ver ya
está ya terminamos sin embargo vamos a
darle un poquito de estilo y para ello
vamos a irnos a nuestro documento
nuestro documento nuestro css
y en el segundo el cuerpo vamos a decir
que el tranco lo que sea vamos a ponerle
un negro vamos a decir es perfecto
vamos a poner una vez
aquí está nuestra apertura está centrada
durante no sé de nada a esto es para el
bol
lo que sigue es modificar el contenedor
hay contenido vamos a ponerle display
reed y vamos a decir que el color sea
blanco vamos a meterle bailan color me
recibe vamos a actuar con un efecto
medio
medio cristal
más
nuestra clase una forma
spain green
y vamos a tomar el primero el 20
sultados que requiere una mayor
asistencia clase de resultados habrá
resultado si vamos ahora mismo a nuestra
calculadora se ve así
ok porque está en modo gritos hemos
establecido columnas hemos establecido
filas nos responde por defecto del
también tocamos primera comenzar con el
resultado concesiones que tenemos rich
comentaremos que a través de cuatro
columnas que aunque tiene un ancho de
bastante la 400 píxeles un acto grave
tienes
160 píxeles más meterle el tangram
transparente y vamos a meter la
aparición de efecto más o menos
más o menos guapo vamos a meterle un gol
de barón mostrar un píxel sol y el mismo
color de fondo
lo que le decimos que lo hicieron
también por supuesto
y eres
fíjense que el número no se ve nos falta
meterla aquí de color blanco
y vamos a mentales
2
por eso se ve un poquito el país a la
derecha
encuentra píxeles picamos ebright
seré
vamos a hacer
hoy esto es para el resultado lo que sí
ahora es de un poco de estilos a las
teclas y para eso vamos a hacer vamos a
decir que tengan un ancho de si el
resultado tiene 400 y pobre 4 entonces
éste la tenemos bien bien
el color blanco
y también lo mismo esta es donde está
vamos a copiar las partes al borde del
hábito y en font-size un lugar que tenga
dos reis vamos a meterle 1.5 el
resultado sea mayor ok a lo que sigue es
decir
vamos a centrar los los números con el
centrado
es que me falta el green mick ahora sí
entradito y hace falta alguien que
contengamos el curso por encima nos lo
pone en modo puntear nuestra salsa
pointer listo ahora vamos a meterle un
efecto al momento de las el joven por
eso cerramos tecla poder y vamos a decir
que jugué tan gran color
igual aquí ya está por defecto entonces
más que aquí en estos vamos a meterle un
poquito más de ancho casi no se ve los
píxeles
mucho
y click
entonces vamos a decir que la tecla
activa nos referimos a que está siendo
aplicada cuando tiene un color citó
vamos a probar con éste
ok sí y también que esta elección al
hacer clic en ellos el tamaño de la
letra se reduzca en varios puntos
siempre se a 1.35
963 así que nuestras teclas no nos
sobran dos espacios y lo que sucedió
promedio y es más pero a veces es
ciertamente la que suele marcar dos
columnas entonces para eso vamos a hacer
con con nueve tantos en dos y para eso
tenemos aquí buscamos la se la ponemos
aquí en la clase de que también
usualmente la tecla de igual suele tener
el otro color y silva puede resultar en
consonancia y que la tecla igual
tenga por color destacan
y que también cuando sea en jugar no lo
pierda entonces tenemos nuestra
calculadora
nos venimos igual
guardamos y
y aquí viene que tenemos que cobrados
pero está limitado por su ancho y la
altura para ello venimos aquí le decimos
que tenga por altura y por ancho en
lugar de 100 200
este año
de esta fiesta faltaría que el símbolo
demás sean dos de alto en lo que
solamente sea de más calculadores y con
dos estaríamos terminando con teníamos
hicimos brick road hasta aquí cubre dos
por favor le agregamos la clase a la que
aclare más justo y con esto venimos para
acá hay falta por supuesto quitarle al
límite de altura en personas ahí se
altura 200 mix es estatista y es así
como estaríamos haciendo nuestra
calculadora 1 + 3 es igual a 4
4x4 igual a 16
16.55 punto 3 es igual a 11 puntos y así
como funciona una calculadora que se ve
bastante bien y funciona nos metimos
muchísimo con javascript
aunque ciertamente el esta parte de kiel
un clic
esta está relacionado que no nos vimos
con problema de crear el archivo estar
jalando los documentos con el ghetto que
me vaya a curar y se ve cosas así pero
lo importante es que funcione y soy
bastante bien y bueno ahí lo tienen ese
es el tutorial de cómo crear una
calculadora con html y css
[Música]
[Música]
e
[Música]