El proyecto Calculadora: por qué era más fácil, pero estaba lleno de obstáculos

Hola, soy Blazej.

Trabajar en el Proyecto Calculadora fue bastante divertido y, diría yo, una experiencia diferente. Diferente a Etch-a-Sketch, que parecía ser más difícil. ¿Cómo es posible entonces?

La respuesta quizá no esté en la dificultad del ejercicio sino en algo más, supongo. Vamos a empezar desde el principio.

Comenzando el proyecto de calculadora

Comencé a trabajar en la Calculadora el 2 de mayo de 2024. La primera sesión me llevó tres horas, durante las cuales logré configurarla y ejecutarla. Era alrededor del mediodía, así que decidí hacer un compromiso final, cenar y hacer ejercicio.

Quería codificar un poco más esa tarde porque sabía que mi amiga vendría de visita al día siguiente y se quedaría tres noches.

Al igual que otros Odinistas dedicados, no quería tomar descansos de la codificación, especialmente de la Calculadora, que creo que es el proyecto más importante de Foundations.

Inspiraciones inesperadas

Estaba a punto de apagar mi computadora cuando apareció el video de YouTube de ForrestKnight . Lo miré un poco y me detuve justo después de que habló sobre disfrutar la codificación.

Pensé en esto y aquí está mi perspectiva como principiante que acaba de terminar de codificar y todavía me hago esta pregunta con frecuencia.

La respuesta no es sencilla para alguien como yo, que ha tenido acceso a una computadora desde la infancia, ha jugado muchos juegos y tiene un conocimiento básico de cómo funcionan las cosas.

Sin embargo, ¡nunca antes había codificado!

Experiencia inicial en codificación

Sin embargo, noté que cuanto más codifico y veo cómo funciona, más disfruto el proceso. Esto fue especialmente cierto con la calculadora, que en general funcionó sin problemas y logré evitar quedar SERIAMENTE ATASCADO, bueno, principalmente. Tocaré eso más tarde.

Este proyecto me pareció mucho más fácil que el proyecto Etch-a-Sketch, en el que tuve problemas para implementar la lógica de cambio de color degradado durante dos días. Ciertamente, codificar no es fácil, pero para este proyecto dediqué entre 1,5 y 2 horas cada día durante cuatro días, y fue una experiencia manejable y gratificante.

Cada vez que abrí VSCode, me sentí muy productivo, lo que me ayudó a resolver las tareas rápidamente. Lo más fascinante mientras trabajaba en ello fue que pude imaginar otras opciones que también resolverían este ejercicio.

Me sentí como un niño construyendo un loco auto Lego Technic e imaginando qué características agregar nuevamente. Sensación divertida.

Disfrutando el proceso

¿Qué quiero decir exactamente con eso? Sabía que podría haber creado una función con eventos para todos los botones de dígitos en lugar de crear nueve por separado.

Sin embargo, olvidé cómo hacerlo correctamente y decidí continuar con 9 diferentes, pero me prometí a mí mismo que volvería y leería la documentación que proporcionaba algunas lecciones sobre cómo resolver este problema. Como pensé que lo hice.

Esperaba quedarme atascado en algo durante unas cinco horas más, pero eso nunca sucedió. Lo hice funcionar con 244 líneas de código.

Desafíos con CSS

Ahora era el momento de empezar a jugar con CSS y darle un poco de estilo a este proyecto. Bueno, ahí fue cuando me quedé estancado. Parecía más difícil que crear JavaScript.

¡No lo podía creer! Sabía que necesitaba usar Flexbox para este proyecto, pero los botones se veían un poco diferentes al Etch-a-Sketch que hice anteriormente. En Etch-a-Sketch, me dijeron que hiciera una cuadrícula usando bucles:

Cada vez que me quedo atascado con Flexbox, siempre recurro a la publicación del blog de Josh. No hay mejor explicación de cómo funcionan, en mi humilde opinión.

Sin embargo, no estaba seguro de si funcionaría con una calculadora, ya que no todos los botones son iguales. Por ejemplo, quería que 0 fuera más grande.

Me desplacé hacia abajo en el artículo porque recordé que allí se mencionaba CSS Grid. Resultó que realmente necesitaría usarlo aquí.

Además, la calculadora que Odin ha mostrado como ejemplo también se diseñó utilizando CSS Grid.

Descubriendo la cuadrícula CSS

En ese momento estaba un poco perdido porque, según recuerdo, no tocamos la parrilla en absoluto.

Empecé a buscarlo en Google. ¿Qué encontré? Un artículo extenso con una explicación bastante avanzada de cómo usarlo. Pensé que no era el momento para eso y supuse que nos presentarían la parrilla más adelante.

Además de eso, solo se mencionó Flexbox en el ejercicio, así que sí, ESPERO que aprendamos sobre grillas también. Si no, volveré a ello en algún momento yo solo.

PEQUEÑA ACTUALIZACIÓN: al día siguiente, vi esta publicación en Odin Discord:

Ajustes finales y diseño de interfaz de usuario

Decidí usar un par de divs y simplemente reagrupar los botones en HTML.

Después de otra sesión de estudio, la calculadora me pareció algo familiar para un dispositivo normal.

Agregar compatibilidad con teclado

El último paso para mí fue hacer que el teclado sea compatible.

¡Infierno sangriento! Eso no fue fácil y tuve que volver a la lección del evento y leer la documentación varias veces para comprender cómo funcionan estas teclas del teclado.

Fue bastante difícil, ya que los eventos burbujeantes me confundían. Era el momento adecuado para crear 1 función que hiciera clic en botones y 2 llamadas para ello. Uno para un 'clic' del mouse y el segundo para una 'pulsación de tecla' del teclado.

Logré ordenar todos los dígitos y botones iguales, pero decidí no usar operadores porque tendría que cambiar mi lógica con el objeto del operador.

Esta configuración parece más fácil de entender si necesito revisarla más tarde.

Sin embargo, puede que me equivoque, así que no lo des por sentado.

El proyecto terminado se puede ver aquí:

CALCULADORA

Reflexiones y lecciones aprendidas

¿Cuál fue la lección aquí? Disfruté el proceso de crear una aplicación y diseñarla y aprendí MUCHO sobre eventos. ¡Te recomiendo encarecidamente que pases por el proceso de crédito adicional con este!

Si te gustó esta historia y los consejos te resultaron útiles, sígueme en Twitter para obtener más actualizaciones y consejos de codificación. ¡Me encantaría conocer sus propios desafíos y éxitos de codificación en los comentarios a continuación!