Le projet de calculatrice : pourquoi il était plus simple, mais semé d'embûches

Salut, c'est Blazej,

Travailler sur le projet Calculatrice était assez amusant et, je dirais, une expérience différente. Différent de Etch-a-Sketch qui semblait plus difficile. Comment est-ce possible alors ?

La réponse ne réside peut-être pas dans la difficulté de l’exercice mais dans autre chose, je suppose. Commençons depuis le début.

Démarrage du projet de calculatrice

J'ai commencé à travailler sur la Calculatrice le 2 mai 2024. La première session m'a pris trois heures, pendant lesquelles j'ai réussi à la configurer et à l'exécuter. Il était environ midi, alors j'ai décidé de prendre un dernier engagement, de dîner et de m'entraîner.

Je voulais coder un peu plus cet après-midi-là parce que je savais que mon amie viendrait me rendre visite le lendemain et qu'elle resterait trois nuits.

Comme d'autres Odinistes dévoués, je ne voulais pas faire de pause dans le codage, en particulier pour la Calculatrice, qui, je crois, est le projet le plus important de Foundations.

Inspirations inattendues

J'étais sur le point d'éteindre mon ordinateur lorsque la vidéo YouTube de ForrestKnight est apparue. J'ai regardé un peu et j'ai fait une pause juste après qu'il ait parlé d'aimer le codage.

J'y ai réfléchi, et voici mon point de vue en tant que débutant qui vient de terminer le codage et qui me pose encore fréquemment cette question.

La réponse n’est pas simple pour quelqu’un comme moi, qui a accès à un ordinateur depuis son enfance, qui joue à de nombreux jeux et qui possède une compréhension de base du fonctionnement des choses.

Cependant, je n’avais jamais codé auparavant !

Expérience de codage initiale

Cependant, j’ai remarqué que plus je code et le vois fonctionner, plus j’apprécie le processus. C'était particulièrement vrai avec la calculatrice, qui s'est globalement bien déroulée, et j'ai réussi à éviter de me retrouver SÉRIEUSEMENT BLOQUÉ, enfin, surtout. J'y reviendrai plus tard.

Ce projet m'a semblé beaucoup plus facile que le projet Etch-a-Sketch, dans lequel j'ai eu du mal à mettre en œuvre une logique de changement de couleur en dégradé pendant deux jours. Le codage n'est certainement pas facile, mais pour ce projet, j'ai consacré environ 1,5 à 2 heures par jour pendant quatre jours, et ce fut une expérience gérable et enrichissante.

Chaque fois que j'ouvrais VSCode, je me sentais très productif, ce qui m'a aidé à résoudre les tâches rapidement. La chose la plus fascinante en travaillant dessus, c'est que je pouvais imaginer d'autres options qui permettraient également de résoudre cet exercice.

Je me sentais comme un enfant construisant une voiture Lego Technic folle et imaginant quelles fonctionnalités ajouter à nouveau. Drôle de sensation.

Profiter du processus

Qu’est-ce que je veux dire exactement par là ? Je savais que j'aurais pu créer une fonction avec des événements pour tous les boutons numériques au lieu d'en créer neuf distincts.

Cependant, j'ai oublié comment le réaliser correctement et j'ai décidé de passer à 9 modèles différents, mais je me suis promis de revenir en arrière et de lire la documentation fournie avec quelques leçons sur la façon de résoudre ce problème. Comme je le pensais.

Je m'attendais à rester bloqué sur quelque chose pendant environ cinq heures, mais cela ne s'est jamais produit. Je l'ai fait fonctionner avec 244 lignes de code.

Défis avec CSS

Il était maintenant temps de commencer à jouer avec CSS et de styliser un peu ce projet. Eh bien, c'est à ce moment-là que je suis resté coincé. Cela semblait plus difficile que de créer du JavaScript.

Je ne pouvais pas y croire ! Je savais que je devais utiliser Flexbox pour ce projet, mais les boutons étaient un peu différents de ceux du Etch-a-Sketch que j'avais réalisé plus tôt. Dans Etch-a-Sketch, on m'a dit de créer une grille à l'aide de boucles :

Chaque fois que je suis coincé avec Flexbox, je me tourne toujours vers le blog de Josh. Il n'y a pas de meilleure explication de leur fonctionnement, à mon humble avis.

Cependant, je n'étais pas sûr que cela fonctionnerait pour une calculatrice, car tous les boutons ne sont pas égaux. Je voulais que 0 soit plus grand, par exemple.

J'ai fait défiler l'article car je me suis rappelé que CSS Grid y était mentionné. Il s’est avéré que j’aurais besoin de l’utiliser ici.

De plus, la calculatrice présentée en exemple par Odin a également été conçue en utilisant CSS Grid.

Découverte de la grille CSS

À ce moment-là, j’étais un peu perdu car, si je me souviens bien, nous n’avons pas du tout touché la grille.

J'ai commencé à le rechercher sur Google. Qu'ai-je trouvé ? Un gros article avec une explication assez avancée sur la façon de l’utiliser. J'ai pensé que ce n'était pas le moment et j'ai supposé que nous serions présentés au réseau plus tard.

En plus de cela, il n'y avait que Flexbox mentionné dans l'exercice, alors oui, j'espère que nous apprendrons aussi la grille. Sinon, j'y reviendrai moi-même à un moment donné.

PETITE MISE À JOUR - le lendemain, j'ai vu ce post sur Odin Discord :

Ajustements finaux et conception de l'interface utilisateur

J'ai décidé d'utiliser quelques divs et de simplement regrouper les boutons en HTML

Après une autre séance d’étude, la calculatrice semblait familière à un appareil normal.

Ajout de la prise en charge du clavier

La dernière étape pour moi a été de prendre en charge le clavier.

Bon sang ! Cela n'a pas été facile et j'ai dû revenir à la leçon de l'événement et lire plusieurs fois la documentation pour comprendre le fonctionnement de ces touches du clavier.

C’était assez difficile, car les événements bouillonnants me déroutaient. C'était le bon moment pour créer 1 fonction qui cliquerait sur des boutons et 2 appels pour celle-ci. Un pour un « clic » de souris et le second pour un « appui » sur le clavier.

J'ai réussi à trier tous les chiffres et les boutons égaux, mais j'ai décidé de ne pas utiliser d'opérateurs car je devrais changer ma logique avec l'objet de l'opérateur.

Cette configuration semble plus facile à comprendre si je dois la revoir plus tard.

Cependant, je peux me tromper, alors ne le prenez pas pour acquis.

Le projet terminé peut être vu ici :

CALCULATRICE

Réflexions et leçons apprises

Quelle a été la leçon ici ? J'ai apprécié le processus de création et de conception d'une application et j'ai appris BEAUCOUP sur les événements. Je vous recommande fortement de suivre le processus de crédit supplémentaire avec celui-ci !

Si vous avez apprécié cette histoire et trouvé les conseils utiles, suivez-moi sur Twitter pour plus de mises à jour et de conseils de codage. J'aimerais entendre parler de vos propres défis et réussites en matière de codage dans les commentaires ci-dessous !