Pour mon quatrième projet, j'ai développé une application Calculatrice en utilisant Vue.js. Ce fut une expérience précieuse pour comprendre comment gérer les entrées des utilisateurs, afficher des résultats dynamiques et effectuer des calculs avec JavaScript. Voici un aperçu des principales leçons que j'ai apprises lors de la création de cette application.

1. Gestion des entrées utilisateur et mise à jour de l'affichage

La calculatrice doit accepter les entrées de l'utilisateur (nombres et opérateurs) et mettre à jour l'affichage de manière dynamique. J'ai utilisé les propriétés réactives de Vue pour suivre l'entrée et le résultat actuels. La fonction ref dans Vue a facilité le stockage et la modification de ces valeurs :

const result = ref('');
const calculated = ref(false);

Chaque fois qu'un utilisateur clique sur un nombre ou un opérateur, la propriété de résultat est mise à jour, garantissant que l'affichage affiche l'entrée la plus récente. La fonction handleClick est utilisée pour ajouter des valeurs au résultat :

const handleClick = (value) => {
    if (calculated.value) {
        result.value = value; // Reset the result if a calculation was just completed
        calculated.value = false;
    } else {
        result.value  = value;
    }
}

Il s'agissait d'une leçon essentielle sur la la gestion des interactions utilisateur et la mise à jour de l'interface en fonction des propriétés réactives.

2. Gestion des opérateurs : éviter les entrées redondantes

L'un des principaux défis de la création d'une calculatrice est de garantir que plusieurs opérateurs ne sont pas ajoutés consécutivement (par exemple, en évitant des entrées telles que 3 4). Pour résoudre ce problème, j'ai ajouté une coche pour remplacer un opérateur si le dernier caractère est déjà un opérateur :

const handleOperatorClick = (operator) => {
    if (/[ */-]$/.test(result.value)) {
        result.value = result.value.slice(0, -1)   operator; // Replace the last operator
    } else {
        result.value  = operator; // Add the new operator
    }
    calculated.value = false; // Reset flag
};

Cette méthode garantit qu'un seul opérateur est présent à la fin de la chaîne d'entrée, améliorant ainsi la robustesse de la calculatrice.

3. Effacer et supprimer une entrée

La calculatrice doit fournir une fonctionnalité permettant d'effacer toutes les entrées (à l'aide du bouton AC) ou de supprimer le dernier caractère saisi (à l'aide du bouton DEL). J'ai implémenté ces deux actions avec les méthodes clearAll et clear :

• Effacer tout (AC) : réinitialise l'intégralité de l'entrée.

const clearAll = () => {
    result.value = '';
    calculated.value = false;
};

• Supprimer le dernier caractère (DEL) : supprime le dernier caractère de la chaîne d'entrée.

const clear = () => {
    if (result.value && result.value.length > 0) {
        result.value = result.value.slice(0, -1); // Remove the last character
        if (result.value.length === 0) {
            clearAll(); // If the input is empty, reset everything
        }
    } else {
        clearAll();
    }
};

C'était un exercice utile pour gérer la manipulation de chaînes et offrir une expérience utilisateur fluide.

4. Effectuer des calculs

L'une des fonctionnalités principales d'une calculatrice est d'évaluer les expressions saisies par l'utilisateur. J'ai utilisé la fonction eval() intégrée de JavaScript pour calculer le résultat de l'expression d'entrée :

const calculate = () => {
    let stringifiedResult = new String(result.value);
    result.value = eval(String(stringifiedResult)); // Evaluate the expression
    calculated.value = true; // Set flag to indicate the calculation is done
};

Bien que eval() soit simple et efficace pour cette calculatrice de base, j'ai découvert les risques de sécurité potentiels qu'elle pose lors de la gestion d'entrées utilisateur arbitraires. Dans de futurs projets, je pourrai explorer l'écriture d'un analyseur personnalisé pour améliorer la sécurité et la flexibilité.

5. Interface utilisateur avec Vue et Bootstrap

Pour créer l'interface de la calculatrice, j'ai utilisé Bootstrap pour une conception rapide et réactive. Les boutons sont disposés dans une grille avec un code couleur approprié pour les chiffres et les opérateurs :

    
7
    
8
    
9
    
-

J'ai appris à combiner la gestion des événements de Vue avec les classes de Bootstrap pour créer une interface de calculatrice visuellement attrayante et réactive.

6. Gestion des cas Edge et amélioration de l'UX

J'ai rencontré plusieurs cas extrêmes lors de la construction de la calculatrice. Par exemple, après avoir effectué un calcul, si un utilisateur saisit un nouveau nombre, la calculatrice doit réinitialiser le résultat précédent. Cela a été géré en vérifiant l'indicateur calculé :

if (calculated.value) {
    result.value = value; // Replace the result with the new value
    calculated.value = false; // Reset the calculated flag
}

Une autre fonctionnalité utile consistait à formater l'affichage pour le rendre plus intuitif, comme le remplacement automatique du dernier opérateur si l'utilisateur change d'avis, améliorant ainsi l'expérience utilisateur.

Réflexions finales : ce que j'ai gagné en créant une calculatrice

Ce projet a permis d'approfondir la gestion des entrées dynamiques, la gestion de l'état et la création d'une interface utilisateur claire à l'aide de Vue.js. J'ai acquis des connaissances pratiques dans les domaines suivants :

• Gestion de l'état : comment suivre et mettre à jour les entrées et les résultats de l'utilisateur de manière dynamique.
• Gestion des événements : réponse aux actions de l'utilisateur (nombre de clics, clics de l'opérateur et calcul des résultats).
• Considérations UI/UX : s'assurer que la calculatrice gère les cas extrêmes avec élégance et fournit une interface utilisateur claire et intuitive.
• Manipulation de chaînes : analyse et manipulation de chaînes d'entrée pour créer des expressions mathématiques valides.

Construire cette calculatrice a été une expérience enrichissante qui a renforcé ma capacité à gérer les entrées des utilisateurs et à créer des applications Web dynamiques et interactives à l'aide de Vue.js. Au plaisir d'appliquer ces compétences à des projets plus complexes !