Créer un site Web de calculatrice simple-tutoriel CSS-php.cn

Créer un site Web de calculatrice simple

王林

Libérer： 2024-08-23 14:33:27

original

352 Les gens l'ont consulté

Build a Simple Calculator Website

Introduction

Bonjour, amis développeurs ! Je suis ravi de partager mon dernier projet : une Calculatrice 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

La Calculatrice simple est 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

Copier après la connexion

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 :

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Simple-Calculator
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour commencer à utiliser la calculatrice simple.

Usage

Ouvrez le site Web dans un navigateur Web.
Entrez des nombres et effectuez des opérations arithmétiques à l'aide des boutons de la calculatrice.
Utilisez le bouton "AC" pour effacer toutes les entrées, ou le Bouton "DEL" pour supprimer la dernière entrée.
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. En voici un extrait :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="header">
      <h1>Simple Calculator</h1>
    </div>
    <div class="container">
      <div class="calculator">
        <input type="text" id="inputBox" placeholder="0" />
        <div>
          <button class="button operator">AC</button>
          <button class="button operator">DEL</button>
          <button class="button operator">%</button>
          <button class="button operator">/</button>
        </div>
        <div>
          <button class="button">7</button>
          <button class="button">8</button>
          <button class="button">9</button>
          <button class="button operator">*</button>
        </div>
        <div>
          <button class="button">4</button>
          <button class="button">5</button>
          <button class="button">6</button>
          <button class="button operator">-</button>
        </div>
        <div>
          <button class="button">1</button>
          <button class="button">2</button>
          <button class="button">3</button>
          <button class="button operator">+</button>
        </div>
        <div>
          <button class="button">00</button>
          <button class="button">0</button>
          <button class="button">.</button>
          <button class="button equalBtn">=</button>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Copier après la connexion

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;
}

Copier après la connexion

Javascript

Le fichier script.js gère la logique d'exécution des calculs et de gestion des interactions utilisateur. En 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;
    }
  });
});

Copier après la connexion

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!