CRÉER UNE CALCULATEUR WEB SIMPLE : Guilde étape par étape avec HTML, CSS et JavaScript-tutoriel CSS-php.cn

BUILDING A SIMPLE WEB-BASED CALCULATOR: Step-by-step Guild with Html CSS And JavaScript

Créer une application Web de calculatrice est un projet fantastique pour apprendre le HTML, le CSS et le JavaScript. Même si les calculatrices sont courantes ou plutôt ordinaires, en créer une à partir de zéro aide les débutants à comprendre les concepts fondamentaux du développement Web, tels que la structuration du contenu avec HTML, le style des éléments avec CSS et l'ajout de fonctionnalités interactives avec JavaScript.

Dans cet aperçu, nous passerons en revue chaque partie du code nécessaire pour créer une calculatrice entièrement fonctionnelle. Ce guide fournira non seulement le code, mais expliquera également chaque ligne en détail, vous assurant ainsi de comprendre comment tout s'emboîte. À la fin de ce projet, vous disposerez d'une calculatrice fluide et interactive que vous pourrez personnaliser ou même développer avec des fonctionnalités plus avancées.

Fonctionnalités de la calculatrice
Cette calculatrice comprend des fonctionnalités de base :

Une zone d'affichage pour afficher l'entrée et les résultats actuels.

Boutons numériques (0 à 9) et un bouton « 00 » supplémentaire.

Boutons d'opération arithmétique : addition ( ), soustraction (-), multiplication (*) et division (/).

Boutons spéciaux :

AC pour effacer l'entrée actuelle.
DEL pour supprimer le dernier caractère.
/- pour basculer entre les nombres positifs et négatifs.
= pour évaluer l'expression et afficher le résultat.

Avec ce projet, vous apprendrez à :

Créez une interface utilisateur avec HTML.
Éléments de style utilisant CSS pour améliorer l'attrait visuel.
Implémenter la logique de la calculatrice en utilisant JavaScript pour gérer le bouton
interactions et effectuer des calculs.

ÉTAPE 1 : STRUCTURE HTML - CONSTRUCTION DE LA MISE EN PAGE DE LA CALCULATRICE

Le code HTML fournit la structure de base de notre calculatrice. Dans cette partie, nous définissons les éléments qui composeront notre calculatrice, comme des boutons et une zone d'affichage, vous pouvez utiliser n'importe quel éditeur de votre choix pour cet effet, je préfère personnellement le code Visual studio. Voici le code HTML complet de la calculatrice :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>



<p>Explanation</p>

<p>Document Type and Language Declaration:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>

Copier après la connexion

Indique au navigateur qu'il s'agit d'un document HTML5.

<html lang="en">

Copier après la connexion

Commence le document HTML et spécifie l'anglais comme langue. Cela aide les moteurs de recherche et les lecteurs d'écran à comprendre la langue du document.

Section principale :

<head>

Copier après la connexion

Contient des métadonnées et des liens significatifs pour le document mais non visibles par l'utilisateur.

<meta charset="UTF-8">

Copier après la connexion

Définit le codage des caractères, garantissant la compatibilité avec la plupart des langues.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Copier après la connexion

Rend la page réactive en ajustant sa mise en page pour l'adapter à différents appareils.

<title>Calculator</title>

Copier après la connexion

Définit le titre affiché sur l'onglet du navigateur.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>



<p>Explanation</p>

<p>Document Type and Language Declaration:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>

Copier après la connexion

Liens vers le fichier CSS où les styles sont définis.

Disposition de la calculatrice :

<html lang="en">

Copier après la connexion

Liens vers le fichier JavaScript qui gère les fonctionnalités de la calculatrice.

ÉTAPE 2 : STYLE CSS - CONCEPTION DE L'INTERFACE DE LA CALCULATRICE

Maintenant que nous avons la structure, passons au style. Ce code CSS rendra la calculatrice plus moderne, en ajoutant des couleurs, des boutons arrondis, des ombres et des ajustements de mise en page réactifs.

<head>

Copier après la connexion

Explication

Réinitialisation de base et police :

<meta charset="UTF-8">

Copier après la connexion

Supprime le remplissage et les marges par défaut, définit la taille de la boîte sur border-box pour un dimensionnement cohérent et applique une police moderne.

Style du corps :

corps : utilise Flexbox pour centrer le conteneur de la calculatrice au milieu de l'écran et applique un arrière-plan dégradé.

Conteneur de calculatrice :

.calculatrice : ajoute un remplissage, des coins arrondis et une ombre pour une apparence soignée, semblable à celle d'une carte.

Afficher l'entrée :

entrée : ce style donne à la zone d'affichage une grande taille de police et un alignement à droite, ressemblant à un véritable affichage de calculatrice.

Style des boutons :

Bouton .calculator : configure un bouton circulaire avec un effet d'ombre, une couleur de texte blanche et un espacement pour l'alignement.

.actionbtn, .clearbtn et .enter : styles de boutons spécifiques pour les faire ressortir (par exemple, vert pour les opérateurs, rouge pour clair et orange pour égal).

ÉTAPE 3 : C'EST OÙ SE PRODUIT TOUTE LA LOGIQUE JAVASCRIPT - RENDRE LA CALCULATRICE FONCTIONNELLE

Avec une structure et un style bien réalisés, ajoutons une fonctionnalité en utilisant JavaScript. Ce script nous permet de gérer les clics sur les boutons, d'effectuer des calculs et d'afficher les résultats.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Copier après la connexion

Explication

Écouteur d'événement pour le chargement de la page :

<title>Calculator</title>

Copier après la connexion

Garantit que le script s'exécute une fois que tout le contenu HTML est chargé.

Variables d'entrée et de bouton :

<link rel="stylesheet" href="style.css">

Copier après la connexion

Sélectionne la zone d'affichage.

<div>



<p>Wraps the entire calculator interface. We’ll apply styles to this container to make it look like a calculator.<br>
</p>

<pre class="brush:php;toolbar:false"><input type="text" placeholder="0">



<p>This is the display area of the calculator, where we show the current number or result. It is disabled, so users can’t type directly.</p>

<p>Buttons:<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>Clears the calculator display and resets the current calculation.<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>Deletes the last entered character.<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>Toggles between positive and negative values.<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>The division operator.</p>

<p>Remaining button elements represent numbers (0–9), operators (+, -, *, /), and a decimal point (.). The = button (class="enter") is used to evaluate the expression.</p>

<p>JavaScript File:<br>
</p>

<pre class="brush:php;toolbar:false"><script src="script.js"></script>

Copier après la connexion

Collecte tous les boutons d'un tableau pour une manipulation facile.

Événements de clic sur un bouton :

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);
}
.calculator{
    border: 1px solid #a2a2a2;
    padding: 20px;
    border-radius: 20px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}
input{
    width: 272px;
    min-height: 100px;
    border: none;  
    padding: 5px;
    margin: 10px;
    background: transparent;
    font-size: 40px;
    text-align: right;
    cursor: text;
    outline: none;
    color: #fff;
}
input::placeholder{
    color: #fff;
}
.calculator button{
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 50%;
    border: none;
    box-shadow: -5px 3px 10px rgba(9, 9, 9, 0.5);
    background: transparent;
    color: #fff;
    cursor: pointer;
    outline: none;
}
.calculator .actionbtn{
    color: #1afe17;
}
.calculator .clearbtn{
    background: #f31d1f;
}
.calculator .enter{
    background: #f5881a;
}

Copier après la connexion

Ajoute un événement de clic à chaque bouton. Selon le bouton, différentes actions sont réalisées :

Ajustement de la taille de la police d'affichage : réduit la taille de la police lorsque la longueur de saisie dépasse 10 caractères.

Signe égal (=) : évalue l'expression à l'aide de eval() et affiche le résultat. S'il y a une erreur (par exemple, une syntaxe invalide), il affiche « Erreur ».

Effacer (AC) : réinitialise la chaîne et efface l'affichage.

Supprimer (DEL) : supprime le dernier caractère de la chaîne et met à jour l'affichage.

Boutons numériques et opérateurs : ajoute la valeur du bouton à la chaîne et met à jour l'affichage.

Signe à bascule ( /-) :

* { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

Copier après la connexion

Multiplie le nombre actuel par -1 pour basculer entre les valeurs positives et négatives.

En conclusion, créer une application Web de calculatrice simple mais fonctionnelle en utilisant HTML, CSS et JavaScript est un projet fantastique pour les développeurs débutants et expérimentés. En combinant soigneusement la base structurelle fournie par HTML, les éléments stylistiques animés par CSS et la fonctionnalité interactive alimentée par JavaScript, nous pouvons créer un outil intuitif qui non seulement remplit son objectif principal, mais démontre également les concepts fondamentaux du développement Web.

De plus, ce projet ouvre un large éventail de possibilités d'exploration et d'amélioration ultérieures. les leçons apprises ici fournissent une base complète pour des projets plus complexes. Le développement Web est un processus d'apprentissage continu, et ce projet montre comment chaque ligne de code contribue à une expérience fonctionnelle et engageante.

Alors que vous continuez à perfectionner vos compétences, réfléchissez à la façon dont vous pouvez rendre cette calculatrice encore plus conviviale et puissante. Expérimentez avec différentes mises en page, essayez d'implémenter des fonctions mathématiques supplémentaires. Chaque changement que vous apportez approfondit votre compréhension des principes de codage et améliore vos ressources de développement.

Bon codage !

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!