Introduction

Bonjour, amis développeurs ! Je suis ravi de partager mon dernier projet : uneCalculatrice simple. Ce projet est un moyen idéal pour explorer les bases de JavaScript, notamment dans la gestion des opérations mathématiques, la mise à jour dynamique du DOM et la création d'une interface utilisateur interactive. Que vous soyez nouveau dans le développement Web ou que vous cherchiez à perfectionner vos compétences JavaScript, ce projet Simple Calculator est un excellent point de départ.

Aperçu du projet

LaSimple Calculatorest une application Web qui permet aux utilisateurs d'effectuer des opérations arithmétiques de base telles que l'addition, la soustraction, la multiplication et la division. Ce projet montre comment créer une interface réactive et conviviale tout en gérant efficacement les entrées des utilisateurs pour effectuer des calculs.

Caractéristiques

• Interface intuitive: conception épurée et simple pour une interaction facile.
• Opérations arithmétiques de base: prend en charge l'addition, la soustraction, la multiplication et la division.
• Fonctionnalité d'effacement et de suppression: les utilisateurs peuvent effacer l'entrée ou supprimer la dernière entrée en un seul clic.
• Conception réactive: garantit une utilisation cohérente sur différents appareils et tailles d'écran.

Technologies utilisées

• HTML: structure la page Web et les éléments de saisie.
• CSS: stylise l'interface de la calculatrice, garantissant un design épuré et réactif.
• JavaScript: Gère la logique de calcul et les interactions utilisateur.

Structure du projet

Voici un aperçu rapide de la structure du projet :

Simple-Calculator/ ├── index.html ├── styles.css └── script.js

• index.html: contient la structure HTML de la calculatrice simple.
• styles.css: inclut des styles CSS pour améliorer l'apparence et la réactivité de la calculatrice.
• script.js: Gère la logique de calcul et les interactions utilisateur.

Installation

Pour démarrer le projet, suivez ces étapes :

1. Cloner le référentiel:
   

   git clone https://github.com/abhishekgurjar-in/Simple-Calculator.git

   Copier après la connexion

2. Ouvrez le répertoire du projet:
   

   cd Simple-Calculator

   Copier après la connexion

3. Exécuter le projet:

   • Ouvrez le fichier index.html dans un navigateur Web pour commencer à utiliser la calculatrice simple.

Usage

1. Ouvrez le site Webdans un navigateur Web.
2. Entrez des nombreset effectuez des opérations arithmétiques à l'aide des boutons de la calculatrice.
3. Utilisez le bouton "AC"pour effacer toutes les entrées, ou le bouton"DEL"pour supprimer la dernière entrée.
4. Cliquez sur le bouton "="pour voir le résultat du calcul.

Explication du code

HTML

Le fichier index.html fournit la structure de base de la calculatrice simple, y compris la zone d'affichage et les boutons pour les opérations arithmétiques. Voici un extrait :

        
  
 
Simple Calculator
 
 
 
  
 AC DEL % / 
 
 7 8 9 * 
 
 4 5 6 - 
 
 1 2 3 + 
 
 00 0 . = 
 
 
 
 
Made with ❤️ by Abhishek Gurjar
 
  

CSS

Le fichier styles.css stylise la calculatrice simple, offrant une mise en page moderne et conviviale. Voici quelques styles clés :

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; flex-direction: column; align-items: center; background: linear-gradient(45deg, #0a0a0a, #3a4452); } .header { color: white; margin: 30px; text-align: center; } .calculator { border: 1px solid #717377; padding: 20px; border-radius: 16px; background: transparent; box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5); } input { width: 320px; border: none; padding: 24px; margin: 10px; background: transparent; box-shadow: 0px 3px 15px rgba(84, 84, 84, 0.1); font-size: 40px; text-align: right; cursor: pointer; color: #ffffff; } input::placeholder { color: #ffffff; } button { border: none; width: 60px; height: 60px; margin: 10px; border-radius: 50%; background: transparent; color: #ffffff; font-size: 20px; box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1); cursor: pointer; } .equalBtn { background-color: #fb7c14; } .operator { color: #6dee0a; } .footer { color: white; margin: 50px; text-align: center; }

Javascript

Le fichier script.js gère la logique d'exécution des calculs et de gestion des interactions utilisateur. Voici un extrait :

let input = document.getElementById("inputBox"); let buttons = document.querySelectorAll("button"); let string = ""; let arr = Array.from(buttons); arr.forEach((button) => { button.addEventListener("click", (e) => { if (e.target.innerHTML === "=") { string = eval(string); input.value = string; } else if (e.target.innerHTML === "AC") { string = ""; input.value = string; } else if (e.target.innerHTML === "DEL") { string = string.substring(0, string.length - 1); input.value = string; } else { string += e.target.innerHTML; input.value = string; } }); });

Démo en direct

Vous pouvez consulter la démo en direct de la calculatrice simple ici.

Conclusion

La création de cette calculatrice simple a été une expérience enrichissante qui a approfondi ma compréhension de JavaScript et la manière de créer des applications Web interactives. J'espère que ce projet vous encouragera à expérimenter vos propres projets JavaScript. Bon codage !

Crédits

Ce projet a été développé dans le cadre de mon parcours visant à améliorer mes compétences en développement Web, en me concentrant sur JavaScript et l'interaction utilisateur.

Auteur

• Abhishek Gurjar
  • Profil GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!