Cómo crear una calculadora web sin JavaScript

## 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]

Acerca del autor

¡Hola! Todos me conocen como Lasfito. Soy desarrollador front-end y escribo artículos y tutoriales sobre JavaScript, desarrollo web y diseño.

¿Dudas o comentarios?

Únete al Discord oficial

¿Alguna errata?

Si encuentras alguna errata en este artículo, por favor, no dudes en levantar un pull request en el repositorio de GitHub.