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.
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.
Voici un aperçu rapide de la structure du projet :
Simple-Calculator/ ├── index.html ├── styles.css └── script.js
Pour démarrer le projet, suivez ces étapes :
Cloner le référentiel:
git clone https://github.com/abhishekgurjar-in/Simple-Calculator.git
Ouvrez le répertoire du projet:
cd Simple-Calculator
Exécuter le projet:
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 Simple Calculator
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; }
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; } }); });
Vous pouvez consulter la démo en direct de la calculatrice simple ici.
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 !
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.
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!