Calculatrice en JavaScript
Développement d'une calculatrice en JavaScript dans le cadre d'un exercice.
Client
Cepegra
Logiciels
Visual Studio Code
Date
2023
Calculatrice en JavaScript
Développement d'une calculatrice en JavaScript dans le cadre d'un exercice.
Client
Cepegra
Logiciels
Visual Studio Code
Date
2023
Code HTML
HTML
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Calculatrice</title>
<link href="assets/css/style.css" rel="stylesheet">
<style>
@font-face {
font-family: "jedi";
src: url("assets/fonts/Starjedi.ttf") format("truetype");
}
body{ color:white; font-size:1.2em; line-height:1.5em; display:flex; justify-content:center; align-items: center; min-height:100vh; padding:0; margin:0;}
progress{border:none; background-color:transparent; display:block; position:absolute; width:100vw; top:0; -webkit-appearance: none; appearance: none; padding:0; margin:0;}
::-moz-progress-bar{ background-color: yellow;}
code{background-color:#000; color:white; padding:3px;}
h1{font-family:jedi; color:yellow; letter-spacing:3px; line-height:2rem;}
#calculatrice{min-width:300px; border-radius:8px; border:1px solid #aaa; overflow: hidden;}
#ecran{background-color:#444; line-height:2.5em; padding:0 20px; color:white; text-align:right; font-size:2.5em}
#calculatrice > div:nth-child(2){display:flex;}
.gauche{flex:3}
.options{display:flex;}
.touches{ background-color:#ddd; color:black;}
.touches{display:flex; flex-direction:row-reverse; flex-wrap:wrap; justify-content:center;}
.touches p, .options p{box-sizing:border-box; flex:0 1 33.3%; margin:0; line-height:60px; text-align:center; font-size:1.5em; border-right:1px solid #aaa; border-top:1px solid #aaa;}
.touches p:nth-child(11){flex:0 1 66.6%;}
.operateurs{flex:1}
.operateurs p{color:white; background-color:#ff8940; margin:0; line-height:60px; text-align:center; font-size:1.5em; border-top:1px solid #aaa;}
</style>
</head>
<body>
<progress value="100" max="100"></progress>
<a href="exercice9.html"id="previous">Précédent</a>
<main>
<h1>...</h1>
<div id="calculatrice">
<div id="ecran">0</div>
<div>
<div class="gauche">
<div class="options">
<p>C</p>
<p>+-</p>
<p>%</p>
</div>
<div class="touches">
<p>9</p>
<p>8</p>
<p>7</p>
<p>6</p>
<p>5</p>
<p>4</p>
<p>3</p>
<p>2</p>
<p>1</p>
<p>,</p>
<p>0</p>
</div>
</div>
<div class="operateurs">
<p>/</p>
<p>x</p>
<p>-</p>
<p>+</p>
<p>=</p>
</div>
</div>
</div>
</main>
</body>
</html>
Code JavaScript
JavaScript
<script>
// on récupère l'élément avec l'ID ecran et on le stocke dans une variable
// on récupère l'élément avec la class touches et on le stocke dans une variable
// on ajoute un écouteur d'événement "click" sur l'élément avec la class touches (la variable qu'on vient de stocker)
/* on concatène le texte présent dans l'écran avec le texte de notre touche pressée
Si on veut éviter d'avoir le 0 devant, on ajoute une condition juste au dessus (si 0 existe, on le supprime) */
// on récupère l'élément avec la class operateurs et on le stocke dans une variable
// on ajoute un écouteur d'événement "click" sur l'élément avec la class operateurs (la variable qu'on vient de stocker)
// on vérifie quel est l'opérateur pressé, si c'est "=", on évalue ce qui est affiché à l'écran et on retourne le résultat
/* Attention, au niveau des touches, nous avons placé un x au lieu d'un *,
le x n'est pas un opérateur reconnu par Javascript,
il faut le remplacer par * avant d'évaluer la chaîne
Attention, nous avons utilisé une virgule pour les nombres décimaux
JavaScript ne comprend pas ce type de nombre, il faudra remplacer les virgules par des points
avant d'évaluer la chaîne
(pour remplacer les virgules de manière globale vous pouvez utiliser une expression régulière
comme ceci : .replace(/\,/g,"."))
*/
//ecran.innerText = eval(ecran.innerText);
// si ce n'est pas un "=", alors :
// on concatène le texte présent dans l'écran avec le texte de notre touche pressée
// on récupère l'élément dont la class est options et on le stocke dans une variable
// on ajoute un écouteur d'événement "click" sur l'élément avec la class options (la variable qu'on vient de stocker)
/*
On récupère la valeur de la touche pressée et on va effectué une condition pour effectuer des actions spécifiques en fonction de la touche
C'est plus facile d'utiliser un switch dans ce cas ci
*/
// si on a pressé la touche C
// facile, il faut supprimer tout ce qu'il y a à l'écran et y remettre le 0
// si on a pressé la touche +-
/*
On veut changer le signe de l'élément à l'écran. Il faut donc évaluer ce qu'on a à l'écran pour pouvoir changer le signe par après
On récupère ce qu'on a à l'écran (en veillant à changer le x en * et en changeant les , par des .) et on stocke dans une variable
*/
/*
Il suffit maintenant de le multiplier par -1 et le tour est joué
Il suffit ensuite d'afficher tout ça à l'écran
*/
// si on a pressé la touche %
// on récupère la valeur de l'écran
// on renvoie la valeur de l'écran / 100
</script>