Construire une calculatrice en utilisant JavaScript, HTML et CSS en 2022

Publié: 2021-01-02

Que vous appreniez un nouveau langage de programmation ou un cadre de développement, il arrive un moment où vous devez travailler sur des projets réels. Au fur et à mesure que vous progressez dans le sujet, vous devez tester vos compétences et votre compréhension de la langue. Construire un projet en utilisant une technologie ou un cadre nouvellement appris est une bonne idée. Il existe de nombreuses idées disponibles en ligne sur ce que vous devriez créer avec vos connaissances.

Les suggestions les plus courantes incluent une calculatrice en JavaScript et une liste de tâches. Bien qu'ils semblent faciles, cela peut être une tâche ardue lorsque vous commencez à travailler sur ces projets. Ici, nous allons le rendre facile et logique ainsi que mouvementé pour vous.

Allons-nous commencer?

Table des matières

La logique avant tout le reste

Lorsque vous commencez à travailler sur un projet, qu'il s'agisse d'une calculatrice ou d'une liste de tâches, la première chose que vous devez identifier est la logique.

Comment fonctionne la calculatrice ?

Vous additionnez deux nombres ou plus (n'importe quel nombre de chiffres) à l'aide des touches numériques fournies sur la calculatrice.
Vous effectuez ensuite des fonctions arithmétiques fondamentales, c'est-à-dire l'addition, la soustraction, la multiplication et la division sur ces nombres.
La calculatrice doit être capable de calculer et de donner les bonnes solutions.

C'est le principe de votre outil de calcul. Vous avez donc besoin d'un clavier, d'un afficheur et d'éléments fonctionnels.

Le bouton "égal à" évaluera la réponse tandis que le bouton "effacer" assurera la suppression de toutes les entrées sur l'affichage de la calculatrice.

Apprenez des cours de développement de logiciels en ligne dans les meilleures universités du monde. Gagnez des programmes Executive PG, des programmes de certificat avancés ou des programmes de maîtrise pour accélérer votre carrière.

Aborder le projet : la clé de la construction du code

Au lieu de vous diriger tout de suite vers le code, vous devez apprendre à aborder un nouveau projet. Vous avez deux choses prêtes pour vous : la logique et une compréhension de base des technologies frontales, c'est-à-dire JavaScript, HTML et CSS.

Avant de commencer à créer votre calculatrice à l'aide de JavaScript , vous avez besoin des éléments suivants :

Un environnement de développement intégré qui vous aidera à construire votre projet en utilisant les trois technologies.
Un serveur local qui vous aidera à tester vos codes et à supprimer les bogues. De ce fait, vous pourrez lancer l'application plus rapidement et avec une plus grande agilité.

#1 Premiers pas avec HTML

La première étape consiste à vous salir un peu les mains avec HTML afin d'avoir construit le plan de votre calculatrice.

Il y a dix boutons sur la calculatrice, allant de 0 à 9. HTML est responsable de la construction des clés pour chaque chiffre.

En dehors de cela, vous devrez également utiliser HTML pour créer des clés distinctes pour les différentes fonctions arithmétiques lors de la construction d'une calculatrice à l'aide de JavaScript .

Vous pouvez utiliser HTML pour ajouter le bouton pour afficher les chiffres saisis ou les résultats ainsi que pour effacer l'affichage.

L'unité visuelle de votre calculatrice dépend entièrement du HTML et du CSS, dont les boutons et leurs identifiants doivent être créés en HTML.

Le code standard

<!DOCTYPE html>

<tête>

<title>Calculatrice</title>

</head>

<corps>

Le code réel pour créer le plan de la calculatrice

(

<!– calculatrice –>

<!– affichage –>

<!– Touches –>

<!– 4 rangées de touches –>

</div>

</div>

</div>

</div>

<!– Fin du corps de la calculatrice –>

</body>

</html>

Apprendre : Top 20 des projets Javascript dans Github pour les débutants

#2 Styliser avec CSS

Une fois que vous avez défini la structure de la calculatrice, vous utiliserez les éléments CSS en ligne pour styliser votre calculatrice et la rendre visuellement attrayante et facile à utiliser.

Bien que le CSS en ligne soit excellent lorsqu'il s'agit de concevoir et de styliser l'apparence de votre application, il se peut qu'il ne soit pas convivial pour le référencement. En dehors de cela, vous pouvez également utiliser des éléments CSS externes en les étiquetant dans le même répertoire racine. Vous pouvez même utiliser des éléments CSS internes ou intégrés présents dans les balises <style></style> de la section head.

Ici, nous vous expliquerons le code que vous pouvez utiliser pour styliser votre calculatrice.

(Vous pouvez créer des variantes à ce code si vous le souhaitez.)

/* styles communs */

* {

rembourrage : 0 ;

marge : 0 ;

}

corps {

largeur : 100vw ;

hauteur : 100vh ;

débordement caché;

affichage : flexible ;

justifier-contenu : centrer ;

align-items : center ;

couleur de fond : #222831 ;

famille de polices : sans empattement ;

}

/* fin des styles communs */

/* calculatrice */

.calculatrice {

largeur : 300 pixels ;

rembourrage en bas : 15 px ;

rayon de bordure : 7 px ;

couleur de fond : #000 ;

boîte-ombre : 5px 8px 8px -2px rgba(0, 0, 0, 0.61);

}

/* fin du style calculatrice */

/* affichage */

.affichage {

largeur : 100 % ;

hauteur : 80px ;

bordure : aucune ;

dimensionnement de la boîte : border-box ;

rembourrage : 10px ;

taille de police : 2 rem ;

couleur de fond : #00ff44 ;

couleur : #000 ;

aligner le texte : à droite ;

border-top-left-radius : 7 px ;

border-top-right-radius : 7 px ;

}

/* fin du style d'affichage */

/* ligne */

.ligne {

affichage : flexible ;

justifier-contenu : espace entre ;

}

/* fin du style de ligne */

/* bouton */

bouton {

largeur : 50px ;

hauteur : 50px ;

rayon de bordure : 50 % ;

bordure : aucune ;

contour : aucun ;

taille de police : 1,5 rem ;

couleur de fond : #222 ;

couleur : #fff ;

marge : 10px ;

}

bouton : survoler {

curseur : pointeur ;

}

/* fin du style bouton */

/* opérateur */

.opérateur {

couleur de fond : #00ff44 ;

couleur : #000 ;

}

/* fin du style de l'opérateur */

#3 Ajout de fonctionnalités avec JavaScript

Nous avons maintenant discuté en détail des aspects visibles de la construction d'une calculatrice en JavaScript . Faisons quelques scripts pour rendre la calculatrice fonctionnelle et effectuer les tâches de calcul. Nous comprendrons les quelques étapes impliquées dans la construction du code JS, ce qui vous aidera à développer le code plus rapidement.

Vous devrez appeler les balises HTML que vous avez créées pour les fonctions individuelles à l'aide de JavaScript. Vous utiliserez des sélecteurs pour appeler chacune de ces entrées et les stocker dans une variable. Pour chaque fonction, vous aurez besoin d'une variable. Par exemple, il existe une variable distincte pour l'affichage, les chiffres, la fonction d'effacement ainsi que la fonction égale. La fonction getElementbyID() peut être utilisée dans ce cas.
Disons que vous voulez effectuer un calcul simple de 20+30, vous appellerez 20 en premier en utilisant la méthode mentionnée ci-dessus. Avant d'appeler 30 et la fonction arithmétique, vous devrez stocker le 20 précédemment appelé quelque part. Votre code doit faire de la place pour le stockage temporaire des nombres afin de faciliter les calculs. Un tableau vide contiendra le nombre sous forme de chaîne. Une fois que vous avez ajouté l'autre nombre et la fonction arithmétique, en utilisant eval(), vous pouvez évaluer les nombres et obtenir la réponse.
Lorsque vous cliquez sur les boutons de la calculatrice, vous voulez des résultats, soit ils sont affichés, soit ils sont évalués. Pour cela, vous devez ajouter des écouteurs d'événements à votre code. De cette façon, les boutons écouteront le clic. Lorsque vous ajoutez des fonctions aux écouteurs d'événements, ils exécutent automatiquement la tâche au son du clic.
L'unité d'affichage doit renvoyer la valeur du bouton sur lequel vous avez cliqué. Vous pouvez utiliser l'objet event.target, car il renverra la valeur de l'élément sur lequel l'événement s'est produit. Par exemple, vous voulez que le chiffre "1" s'affiche dès que vous cliquez dessus. Pour cela, vous devrez stocker le nombre sous la forme d'une variable. À l'aide de la fonction "if", vous comparerez la variable existante pour déterminer si elle est nulle ou non. S'il s'agit d'un zéro, vous l'ajouterez à une chaîne vide afin qu'aucun nombre ne commence par un zéro. Enfin, vous ajouterez le contenu de la clé « 1 » à la variable d'affichage. Par conséquent, dès que la touche numérique est déclenchée, vous verrez le contenu dans la zone d'affichage.
Enfin, vous devez créer la fonction qui vous aidera à appliquer des opérations mathématiques aux nombres affichés. Assurez-vous que votre calculatrice en JavaScript peut effectuer facilement les calculs mathématiques. Pour activer cette fonctionnalité, vous pouvez utiliser une combinaison de syntaxes et de méthodes. Nous avons spécifié le code pour les éléments JavaScript ci-dessous pour votre lecture.

// sélectionne tous les boutons

const boutons = document.querySelectorAll('bouton');

// sélectionne l'élément <input type=”text” class=”display” disabled>

const display = document.querySelector('.display');

// ajoute eventListener à chaque bouton

boutons.forEach(fonction(bouton) {

button.addEventListener('clic', calcul);

});

// calcule la fonction

fonction calculer(événement) {

// valeur actuelle des boutons cliqués

const clickedButtonValue = event.target.value;

si (clickedButtonValue === '=') {

// vérifie si l'affichage n'est pas vide puis ne fait que le calcul

si (display.value !== ”) {

// calcule et affiche la réponse à afficher

display.value = eval(display.value);

}

} sinon si (clickedButtonValue === 'C') {

// efface tout ce qui est affiché

display.value = ”;

} autre {

// sinon concaténez-le à l'affichage

display.value += clickedButtonValue ;

}

Doit lire : Architecture et composants Java expliqués

Résumé

Que vous construisiez une calculatrice en JavaScript ou que vous travailliez sur un projet plus complexe, l'idée est de décomposer le contenu de manière logique et interprétée. Cela vous aidera à dériver la syntaxe exacte et conduira à une application web fluide. Au lieu de commencer par coder directement, essayez de comprendre quel est le véritable objectif de la technologie que vous utilisez, et cela vous mènera au code.

Si vous souhaitez en savoir plus sur Java, le développement de logiciels full-stack, consultez le programme Executive PG de upGrad & IIIT-B en développement de logiciels - Spécialisation en développement Full Stack, conçu pour les professionnels en activité et offrant plus de 500 heures de formation rigoureuse. , 9+ projets et affectations, statut d'ancien de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.

Décrochez le job de vos rêves

Postulez pour la certification PG liée à l'emploi d'upGrad en génie logiciel