Tengo que hacer una calculadora básica para clase en HTML y JavaScript, pero muy importante, sin usar div.
¿Algún consejo por ahí? Pues que no utilices div y utilices buttons, que para eso están.
No necesitas ningún div. Al final, lo único que tienes que hacer...
No, o sea, al final...
A ver...
Vamos a hacer una calculadora rápidamente.
Te vamos a hacer la calculadora.
¿Cuántos botones debería tener una calculadora?
A ver...
3, 4, 8, 12 y 3.
O sea, 4, 8, 12, 15.
Pues ya está. Aquí tienes tu calculadora.
1, 2, 3.
Puedes poner aquí el asterisco.
4, 5, 6, más...
7, 8, 9, menos...
Y abajo ponemos el punto.
No sé si lo querrás.
Un punto y aquí el igual.
¿Vale?
Pues mira, ya tienes aquí tu calculadora.
Ahora lo que puedes hacer...
Como no puedes utilizar div, pues tienes un section.
Mismo.
No sé, section.
Y aquí ya lo único que tienes que hacer es utilizar section display grid.
¿Vale?
Y ahora lo que deberíamos hacer, pues de cada uno, es hacer un grid de 3.
Ya está, ¿no?
O sea...
Display grid.
Espérate que me he quedado...
Grid, template, columns, repeat.
4 veces por 100 píxeles.
50 píxeles.
De hecho, el botón podemos hacer que sea 50 por 50.
Para que queden así como cuadrados.
Lo que puedes hacer es que este ocupe el doble.
Y ya está.
Pero mira, ya tenemos...
¿Lo has visto?
1fr...
Bueno, también puede ser 1fr.
Ponemos así.
Pero claro, si ponemos 1fr...
1fr...
1fr...
1fr...
Al final, lo que podemos hacer es que ocupe un espacio en concreto el section.
Yo la verdad es que pondría algo así.
Y ya lo tendrías bastante bien.
¿No?
Esto es cuadrado, ¿no?
Sí.
Y cada botón lo estilas un poco como te dé la gana.
Yo lo haría sin nada.
Que queda bastante chulo, ¿no?
Queda muy IOS.
No me acuerdo cómo es el de IOS.
Y sin Eval.
Vaya que las operaciones al pulsar igual no sean con un Eval.
¿Cómo ha puesto esa ligadura en el igual?
¿Qué ligadura?
¿Esta?
Sí, sí, está bonito.
Pero esto es poquito CSS y está.
Pues ya está.
Pues es súper poquito CSS.
Casi no hemos puesto CSS.
De hecho, le puedes poner arriba un...
Le puedes poner el span arriba para enseñar los cálculos y tal.
Y ya está.
¿Cómo hago una división ahí?
Joder.
Bueno, perdón.
Bueno, es verdad.
No he puesto el de A división.
Bueno, pues vamos a ver.
Vamos a ponerle A división.
Le puedes poner la división al final.
¡Hostia!
Es verdad.
Súper rara la ligadura esta que me ha puesto aquí esto.
Bueno, pues pones aquí la división y aquí pones...
A ver, podrías ponerle más botones.
Le podrías poner los botones de borrar y todo esto.
Los que te guste más.
Le puedes poner los de borrar.
Le puedes poner cosas así, ¿no?
Y ya está, ¿no?
Bueno, le podemos poner cursor pointer.
Puedes poner los que sean operaciones.
Vamos a poner...
Background.
Joder.
Bueno, no sé si lo habéis notado, pero...
Este azul es mi color favorito.
Lo utilizo para todo.
Vale.
El op.
Op.
Op.
Op.
Y en el punto...
Bueno, yo creo que ya está.
Bueno, ya va pillando forma, ¿no?
¿Cómo que es 789?
¿Qué dice?
¿Cómo que es 789?
A ver.
Me está estimando.
¿Cómo que eso es 789?
Que es una calculadora.
No es un teléfono.
Hostia, es verdad.
Hostia, es verdad.
Aquí se la sigue.
Es verdad.
Tienes razón.
789, 456, 1, 3.
Tienes razón.
Pues nada.
Pues dale la vuelta.
Que está al revés.
Coño, yo...
Recordaba que...
Esto es lo que se nota, lo que utilizan las calculadoras.
Bueno, a ver.
Da igual, ¿no?
A ver, calculadora.
Vamos a ampliar calculadora.
Hostia, cuánto hace...
Es verdad.
Es verdad.
Joder, es verdad.
Es verdad.
Claro, como no tengo el teclado de números...
Coño.
Sí, sí, sí.
Me ha jodido la mente esto, ¿eh?
Ahora.
Yo estaba aquí convencido que era 1, 2, 3, 4, 5...
Pues nada.
Venga.
Para tener contenta a la gente.
7, 8, 9...
No, no, no, voy a liar.
7, 8, 9, 4, 5, 6, 1, 2, 3.
4, 5, 6, 1, 2, 3.
Vale, ya está.
Ala.
Hostia, de verdad, me ha pasado ahí la vida por delante en este momento, ¿eh?
Vamos a poner lo del border box.
Todo el mundo contento, ¿no?
Ahora.
Border box.
Y vamos a ponerla...
Ajá.
Ajá.
Ajá.
Ajá.
Bueno, pues nada, ya tienes tu calculadora estilada.
¿Qué te parece?
Podemos poner esto.
Casi no se nota.
¿Cómo podemos hacer esto?
¿Cómo podemos hacer esto?
Es que pensaba que había uno que era Darken.
Darken.
¿Y ahora?
Darken.
Está a contrast.
A ver cuáles son.
Grayscale, hover, opacity, saturate, brightness.
Si ponemos menos 20%, por ejemplo.
Coño de la madre.
Pues no es el que...
Eso.
Eso es lo mismo, ¿no?
Más o menos.
Solo tiene que enviar el enlace de Codilink.
¿Va a sumar con CSS?
No, hombre.
Con CSS no va a sumar con CSS, claro.
A ver.
¿Cómo se podría hacer con CSS?
Es que me da mucho palo.
Me da mucho palo.
A ver, con Eval sería bastante fácil.
Con Eval.
Si no...
No...
Qué palazo.
Estoy pensando.
Podríamos hacer un...
Los botones circulares como en Eos, sí, hombre.
Sería con number en lugar de Eval, me han dicho.
Pero eso te lo han dicho a ti porque es tu...
O sea, te lo han dicho.
Tiene que ser con...
Con Eval está bien si estás mostrando las cosillas, ¿eh?
Se puede sumar con CSS, hombre.
Sí, se puede sumar con CSS.
A ver.
Lo primero que necesitaríamos.
Vamos a hacer una cosa.
Ahora me acorda.
Mira, vamos a hacer una cosa.
Vamos a hacer una cosa.
Ahí está.
Qué buena idea he tenido.
Como me da mucho palo...
Vamos a hacer una cosa.
Esto...
Dieguchu.
Esto no lo cuentes en clase, ¿vale?
Esto será nuestro secreto.
Vamos a hacer un proyecto.
Vamos a hacer un proyecto.
Que le vamos a llamar...
Dieguchu.
Calculadora.
Dieguchu.
Calculadora.
Ya no acuerdo.
¿Vale?
Vamos a hacer una cosa.
Es que lo malo de Codilink es que no tiene...
No tiene lo que voy a hacer.
Vamos a probar.
A crear aquí nuestro index HTML.
Y vamos...
¡Ay!
No, no, no, no, no.
Discord fuera.
Joder, qué pesado.
Fuera de aquí.
Pesado.
Vamos a hacer esto.
Vamos a poner esto.
Vamos a poner los styles.
I wish, I wish.
Venga.
Tendríamos esto por aquí.
A ver, voy a mover esto por acá.
Esto lo voy a cerrar.
Esto cerrar.
Vale.
A ver, una cosa que...
Para darle un poquito de contexto a Gijaco Pilot.
Muy bien, muy bien.
Me parece muy bien esto que ya me está enseñando.
Vale.
Display.
Venga, sí.
Me parece bien que haya un display también.
De hecho, eso sí que lo vamos...
Lo podríamos hacer.
Eso sí que lo podemos hacer en Codilink un momento.
Para que se vea bien.
En lugar de header...
Vamos a ponerle header.
Vamos a ponerle main.
Que al final...
Bueno, es que main...
Igual es un poco raro a la calculadora ponerle main.
Section.
Section.
Section.
Vamos a ponerle...
Porque es raro que a los números sí que le pone esa fuente.
Y a todo lo demás le pone la fuente que sale a los cojones.
System.ioi.
Vale.
El span.
Bueno, he puesto header, pero es que...
Igual.
Bueno, va.
Vamos a dejarle el header.
Section.
Section.
Es que aquí yo le pondría un div.
Pero...
Vamos a poner main.
A esto.
A todo lo que es...
Main.
Main.
Main.
A mí no hace falta que le hagamos nada.
Alex al header.
Bueno, más o menos.
Un input type text.
Para...
Input type text.
Efectivamente.
Tienes toda la razón.
Input type.
Podríamos ponerle number y todo.
Aunque al final...
Hostia.
Pues...
Entonces...
Lo vejo.
Hoy.
Lo vejo.
Hostia, no me acuerdo cómo se quitaba eso.
Vamos a ponerle el text
porque da lo mismo.
Bueno, pues ya está.
Me puede decir si está usando
JSVainilla, estábamos utilizando vainilla
y no estábamos haciendo nada todavía, ¿no?
No estábamos haciendo nada.
Appearance non.
Ah, pues la había intentado poner.
Pensaba que...
Vale. A ver, lo que quería
hacer por aquí.
Vamos a copiarnos todo lo que he hecho
aquí.
Todos los estilos.
Vamos a cerrar esto.
Vamos a hacer esto así.
y vamos a abrir
servor.
Punto.
Vale.
Pues lo que quería probar,
ahora que ya he hecho con esto,
¿no hay división otra vez?
Si la he dejado aquí, ¿no?
Bueno, a ver,
he puesto esta barra,
es verdad.
Quería poner esta barra.
Es que la división
tiene un símbolo especial,
este símbolo.
Es un poco jodido.
De hecho,
igual lo podemos utilizar ese para...
Hostia.
Ah, que nos guarda los cambios.
Aquí, cabrón,
no aparece el símbolo ese.
Bueno, pues este.
Ya está.
Vale.
Vale.
Pues como os iba diciendo,
esto en lugar de display...
Bueno, vamos a ponerle esto,
esta idea.
Display.
Vamos a ver,
vamos a ver
si...
Claro,
es que no he puesto
lo del meta-charset
y todo esto.
Vamos a moverlo arriba alto.
Es que por poner
no he puesto el lot type,
no he puesto una mierda,
pero...
Venga.
Title.
Midu calculadora.
Vamos a probar una cosa.
Vamos a ver
si Gijac Copilot
nos quita el trabajo
o no.
¿Vale?
De hecho,
esto lo vamos a dejar
todo en el mismo.
Venga,
Gijac Copilot.
Hazme una calculadora.
que esto tiene buena pinta.
Display value.
Hostia,
que tiene buena pinta.
Que tiene buena pinta.
Vamos.
Oye,
oye,
oye.
A ver
si he utilizado
los botones.
Ahí está.
Ahí tiene
estado
toda la calculadora.
Bueno,
guardar cambios.
Siete.
Uy,
no.
Ah,
pues pensaba
que lo había hecho.
A ver,
key.
Si la key es C.
Ah,
porque no he añadido un C.
¿Vale?
Está aquí.
Si es un igual,
si es un más,
un menos,
no sé qué.
Hostia,
ni un function.
La madre.
¡Uy,
uy,
esto es casi un eval!
Si key no sé qué.
Y si la key,
si no,
o sea,
debería haber entrado aquí.
Y luego entrar al update display.
Es súper interesante
cómo piensa la cosa esta.
Está utilizando esto
como si fuese un estado.
Display value,
¿vale?
Update display
al principio.
Sí,
entiendo que si esto
lo hacemos así,
hacemos así.
Ya está.
Ya está hecho.
Ya está hecho.
Ya está.
Ya está.
Ya,
ya he escrito
en menos de un minuto.
Mira,
siete.
Ay,
mira,
eso es un error,
¿eh?
Ahí hay un error.
Porque si el cero,
aquí debería tener
algún tipo de lógica
de que si es cero,
pues entonces,
¿no?
Tendría que mirar
si no es el primer operando
y es cero.
Display value,
display value,
display value,
cero.
Claro,
claro,
porque al cero
se le puede poner
esto.
Pero lo que se tendría
que hacer,
¿pone el display value
inicial a vacío
aunque no se vea?
No,
no,
no,
eso no puede ser.
Bueno,
a ver,
podemos poner,
podemos poner
que el default,
vale,
podemos poner esto,
pero,
ah,
bueno,
hostia,
a ver,
habría que mejorar
la lógica,
la verdad es que la lógica
está de aquella manera,
porque tiene bichillos,
¿no?
Por ejemplo,
a ver,
¿cómo se ve una calculadora
nada más entrar?
¿Tiene número?
¿Sabes?
O sea,
no,
no tiene número,
en verdad.
Podríamos ponerle
autofocus a esto,
autofocus,
y al menos
está por ahí.
A ver,
tiene bichillos,
hay aquí cosas que,
bueno,
tiene su cosa,
tiene su cosa.
Esta,
me ha parecido muy interesante
esta idea
de tener aquí un objeto
y lo va mutando,
¿sabes?
Como para utilizarlo
como estado.
Esto me ha parecido
muy buena idea,
esto me ha parecido
muy buena idea.
Total,
para utilizar una,
una calculadora,
tampoco,
o sea,
está bien.
Para,
bueno,
update el display,
lo saca del calculator,
display value
y hace el update display.
Esto está chulo
y esto es que cada vez
que haces un cálculo,
pues lo haces
y ya está.
Esto está bastante,
la verdad es que me ha sorprendido,
me parece chulo.
Al parse float,
entiendo que esto
si haces 1.2
más 0.3,
mira,
lo hace bien,
¿eh?
No está mal.
Si el primero operando
es null,
joder,
es null,
cálculo,
si no,
si tiene un operador,
entonces el resultado
es calculator.operator
y para hacerlo
de la operación
lo está haciendo,
joder,
qué bestia,
qué fuerte.
Lo de la operación
lo está haciendo
como un eval,
está haciendo
aquí una magia negra,
voy a hacer esto
más grande
para que se vea bien,
aquí.
Esto es bastante heavy,
¿eh?
Esto es bastante heavy,
a ver,
yo no lo haría así,
esto tiene bastantes bichos.
Al final lo que podrías hacer
también,
aparte de tener calculator,
podrías tener
calculations,
calculations,
podrías tener
un objeto
también por aquí
y aunque es verdad
que es un poco más rollo,
es un poco más rollo
porque aquí
te lo hace como
por arte de magia
y esto lo hace
utilizando
el mismo,
o sea,
el texto,
es un poco creepy,
¿vale?
Lo que hace
es un poco creepy.
La verdad es que
es un poco creepy.
Pero bueno,
está bien
porque es una buena idea,
podrías tenerlo
con data attributes
y todo esto
y la verdad es que
es un poco
chungo.
Pero bueno,
si lo quieres hacer así,
pues al final
lo que podrías tener aquí
es un enum de estos
que,
mira,
que es que básicamente
es esto,
en lugar de first operam,
puedo poner a,
o sea,
podrías poner
esto,
yo creo que esto
es una mejor forma
que bueno,
total,
también lo ha hecho
Gihap Copilot,
esto no tiene mucho sentido,
este,
haría esto,
calculations,
que tengas aquí
todos tus cálculos
y en lugar de hacer
new function este
que yo creo que esto
incluso hasta es
peligroso
porque este
perform calculation
esto lo que hace
es que le pasa
al operador
pero
si tiene
calculator.operator
calculator.operator
o sea,
si ya tiene un operator
operator
que es null
aquí
he pasado operator
cálculo.operator
entonces
ejecuta
la función
claro,
yo aquí
en lugar de ejecutar
la función así
pues básicamente
si
calculator.operator
pues lo que haría
sería
calculations,
calculator,
calculator,
operator
y le pasaría
el first operam
y el value
porque es que
si no
es un poco
de aquella manera
pero bueno
a ver
me parece
curioso
la verdad
es que
hacerlo
ha hecho
y aquí
pues le pasaría
directamente
la
aquí
y ya está
calculator.operator
calculo.operator
bueno
pues ahí
tenemos
Gijacopilot
que nos ha hecho
una calculadora
en un momento
que os parece
ahí la tienes
ahí la tienes
es un eval
pero con scope local
ya te digo
que difícil
esa calculadora
bueno a ver
la verdad es que
la calculadora
es un poco difícil
pero a ver
tampoco
tampoco tanto
o sea
es verdad
que puede ser
un poco rara
pero se ha evitado
escribir mucho código
o sea
me vuelve a hacer
un Gijacopilot
en mitad
del Gijacopilot
o sea
lo ha hecho
con un estado
lo cual está
bastante genial
que haya hecho
un estado
al final
tienes aquí
unos cálculos
esta
funciona
faltaría
el de
limpiar
todo
pero bueno
5
mira
puedes hacer
encima
de darle
otra vez
a la cosa
y que te siga
haciendo la operación
funciona
mejor
de lo que parece
no está mal
ah bueno
ahí ha hecho
algo raro
a ver
tiene sus pichillos
tiene sus pichillos
pero al menos
todavía no he visto
un nan
bueno
la verdad es que
no he calculado
al hacerla
bien bien bien
es un rollo
porque es un ratillo
lo bueno de hacer
el eval
es que tú
aquí puedes
ponerte a escribir
cosas así
y con el eval
puedes evaluar esto
y ya la tienes
y eso está
súper genial
con el eval
haces esto
y queda muy bien
porque te queda
como una
como una
si no puedes
utilizar regex
porque es un poco
más rollo
pero con esto
haces eval
y le sacas esto
y con esto
ya tienes la operación
y ya ves
te quedas a gustísimo
entonces tú vas
concatenando
todo lo que vas haciendo
lo vas poniendo aquí
como funcionan
algunas calculadoras
haces el eval
de esa operación
y cuando das igual
evalúas
lo que has puesto
ahí dentro
y ya está
lo único que tienes
que tener cuidado
es de no permitir
hacer como 3
más más 4
sino que
solo puede haber
un operador
lo tendrías que calcular
y ya está
pero bueno
más o menos el estilo
más o menos el CSS
y además que no tenemos
dips
que es lo que habías pedido
así que eso es lo que hay
eso es lo que hay
muchísimas pensamos
en un sprint
azo
hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta even hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta das hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta hasta