Dany Debois – UX & UI Web Designer à Liège

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>