Comment créer une calculatrice en HTML
Si vous avez besoin d’une calculatrice rapide et simple avec des fonctionnalités de base comme l’addition, la soustraction, la multiplication et la division, utilisez simplement le code ci-dessous. Vous pouvez insérer ce code HTML dans votre fichier HTML et voir comment tout fonctionne. Le code contient des commentaires pour vous aider à comprendre son fonctionnement et à apporter des modifications au style et à la mise en page de cette application.
<!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>
<style>
/* Style for the entire body, centering the calculator */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* Style for the calculator container */
.calculator {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Style for the display area */
.display {
width: 160px;
height: 40px;
text-align: right;
margin-bottom: 10px;
font-size: 1.5em;
padding: 5px;
}
/* Grid layout for the calculator buttons */
.buttons {
display: grid;
grid-template-columns: repeat(4, 40px);
gap: 10px;
}
/* Style for the buttons */
.buttons button {
width: 40px;
height: 40px;
font-size: 1.2em;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
cursor: pointer;
}
/* Hover effect for the buttons */
.buttons button:hover {
background-color: #45a049;
}
/* Special style for the equals button */
.buttons .equals {
grid-column: span 2; /* Spans over 2 columns */
background-color: #2196F3;
}
/* Hover effect for the equals button */
.buttons .equals:hover {
background-color: #0b7dda;
}
</style>
</head>
<body>
<div class="calculator">
<!-- Input field to display the calculator results -->
<input type="text" class="display" id="display" disabled>
<!-- Calculator buttons laid out in a grid -->
<div class="buttons">
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="setOperator('+')">+</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="setOperator('-')">-</button>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="setOperator('*')">*</button>
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber('0')">0</button>
<button onclick="calculate()" class="equals">=</button>
<button onclick="setOperator('/')">/</button>
</div>
</div>
<script>
/* Variables to store current input, previous input, and operator */
let currentInput = '';
let operator = '';
let previousInput = '';
/* Function to append numbers to the current input */
function appendNumber(number) {
currentInput += number; // Append the clicked number to current input
document.getElementById('display').value = currentInput; // Update the display
}
/* Function to set the operator and prepare for the next input */
function setOperator(op) {
operator = op; // Store the chosen operator
previousInput = currentInput; // Store the current input as previous
currentInput = ''; // Clear the current input for the next number
}
/* Function to perform the calculation based on the operator */
function calculate() {
let result;
// Perform the appropriate operation based on the operator
if (operator === '+') {
result = parseFloat(previousInput) + parseFloat(currentInput);
} else if (operator === '-') {
result = parseFloat(previousInput) - parseFloat(currentInput);
} else if (operator === '*') {
result = parseFloat(previousInput) * parseFloat(currentInput);
} else if (operator === '/') {
result = parseFloat(previousInput) / parseFloat(currentInput);
}
document.getElementById('display').value = result; // Display the result
currentInput = result.toString(); // Store the result as the new current input
operator = ''; // Reset the operator
}
/* Function to clear the display and reset the calculator */
function clearDisplay() {
currentInput = '';
previousInput = '';
operator = '';
document.getElementById('display').value = ''; // Clear the display
}
</script>
</body>
</html>Explication des sections clés
Pour vous aider à gérer et ajuster la calculatrice, nous avons rédigé quelques indications supplémentaires sur ses fonctionnalités :
Structure HTML
- La calculatrice est contenue dans un élément div avec une classe calculator.
- Un élément input est utilisé comme affichage pour la calculatrice, et il est désactivé afin que les utilisateurs ne puissent pas y taper manuellement.
- Les boutons sont organisés dans un format de grille à l’intérieur du div buttons et disposés pour ressembler à une calculatrice.
Mise en forme CSS
- Le corps de la page est stylisé pour centrer la calculatrice verticalement et horizontalement.
- La calculatrice elle-même a un fond blanc avec des coins arrondis et une ombre pour lui donner un aspect de carte.
- Les boutons sont stylisés avec une taille, une couleur et un effet de survol cohérents pour un retour visuel.
Fonctionnalité JavaScript
- appendNumber() ajoute des chiffres à l’affichage lorsqu’un utilisateur clique sur un bouton.
- setOperator() enregistre l’opérateur sélectionné (+, -, *, /) et sauvegarde l’entrée actuelle comme previousInput.
- calculate() effectue l’opération mathématique appropriée en fonction de l’opérateur sélectionné et affiche le résultat.
- clearDisplay() réinitialise la calculatrice en effaçant toutes les entrées et l’affichage.
C’est une calculatrice simple utilisant uniquement HTML, CSS et JS. Par conséquent, son apparence et ses capacités sont assez limitées.
Comment créer une calculatrice pour des tâches complexes
Notre calculatrice HTML simple ci-dessus est suffisante pour des opérations de base et présente un design fonctionnel et épuré. Elle est utile pour s’amuser ou suivre vos progrès en programmation. Mais pour des tâches plus complexes ou professionnelles, une solution plus avancée peut être nécessaire. Que ce soit pour établir un budget familial ou organiser un voyage, des fonctionnalités de calcul améliorées peuvent faire toute la différence. Alors, quelles sont vos options ?
Apprendre davantage de programmation
La meilleure façon d’aborder des projets plus complexes est d’approfondir vos connaissances en HTML, CSS et JavaScript. Avec des compétences avancées, vous pourrez créer des calculs avec plusieurs champs, options, conditions et variables. À ce stade, vos compétences en programmation dépasseront largement la simple création d’une calculatrice HTML basique. C’est un long chemin à parcourir.
Essayez un widget de calculatrice sans code pour HTML
Si vos compétences en programmation ne sont pas encore très avancées et que vous avez besoin d’une solution puissante dès maintenant, bonne nouvelle pour vous. Vous pouvez créer un widget de calculatrice en HTML sans aucune compétence en programmation. Vous pouvez ajouter plusieurs champs, ajuster les conditions et nommer chaque élément de manière claire selon votre scénario. Testez-le dans l’éditeur ci-dessous avant de poursuivre.
Créer un widget de calculatrice HTML : sans coder
Dans cette section, nous allons décrire plus en détail comment créer votre propre widget de calculatrice HTML. Il peut également être facilement intégré à n’importe quel site web et fonctionnera immédiatement. Voyons comment cela fonctionne.
- Choisissez un modèle adapté. Vous pouvez continuer dans l’éditeur que vous avez vu ci-dessus ou explorer notre liste de modèles de calculatrices prédéfinis et sélectionner celui qui correspond le mieux à votre besoin.
- Ajoutez les champs nécessaires. Le widget propose des curseurs, des nombres, des choix, des listes déroulantes et d’autres champs pour vous aider à représenter précisément votre scénario.
- Personnalisez le style. Utilisez l’onglet « Style » dans l’éditeur pour décorer votre calculatrice et l’adapter à votre goût, votre marque ou les couleurs de votre site web.
- Ajustez les autres paramètres. Accédez à l’onglet « Paramètres » pour finaliser votre widget en définissant les séparateurs et d’autres règles pour votre calculatrice. Vous pouvez y insérer votre propre code HTML et JS si vous avez des idées spécifiques à ajouter.
- Enregistrez et commencez à l’utiliser. Une fois satisfait du résultat, publiez votre widget pour obtenir le code HTML de votre calculatrice. Vous verrez quelques lignes de code à ajouter sur n’importe quelle plateforme de site web.
Une fois sur un site web, vous pouvez utiliser ce widget de calculatrice HTML aussi longtemps que vous le souhaitez. Planifiez vos dépenses ou économies, utilisez-le pour promouvoir vos services commerciaux ou ajoutez de l’interactivité à votre blog. Vous pouvez maintenant consulter des guides sur l’ajout de votre calculatrice aux plateformes CMS les plus populaires ou trouver votre constructeur de site web dans la liste des plateformes.
Exemples de calculatrices en HTML
Voici quelques exemples de ce que vous pouvez créer sans coder en seulement 5 à 10 minutes. Pensez à votre cas d’utilisation et essayez d’inclure toutes vos idées dans le formulaire de calculatrice lors de la création dans l’éditeur.
Calculatrice de prêt immobilier
Aidez les utilisateurs à estimer facilement leurs mensualités de prêt en fonction du montant emprunté, du taux d’intérêt et de la durée. Essayez notre calculatrice de prêt immobilier.
Calculatrice de ROI
Aidez les entreprises à calculer facilement leurs retours sur investissement. Découvrez notre calculatrice de ROI.
Calculatrice IMC
Calculez l’Indice de Masse Corporelle (IMC) à partir de la taille et du poids pour fournir des informations précieuses sur la santé. Commencez avec notre calculatrice IMC.
Conclusion
En conclusion, nous vous avons montré comment créer une calculatrice HTML simple, avec du code prêt à l’emploi pour vous aider à démarrer. C’est parfait pour des tâches basiques et pour apprendre, mais pour des calculs plus avancés, un widget plus polyvalent est recommandé.
Éditeur : Créez une calculatrice HTML gratuitement
Prêt à créer votre propre calculatrice HTML ? Essayez l’éditeur de calculatrices pour voir le widget en action !