Calculatrice DIY JavaScript

Marre d’avoir à portée de main une calculatrice dans votre téléphone portable ou sur votre ordinateur ? Pas assez fort en calcul mental pour effectuer des opérations accessibles à un élève d’école primaire ? Je vous propose de prendre votre temps et de coder votre propre calculatrice en JavaScript.

Retrouvez le résultat sur :

https://chriscarton.github.io/calculatrice-diy-javascript/index.html

Pour fouiner dans le code allez sur :

https://github.com/chriscarton/calculatrice-diy-javascript

Et maintenant, les explications

Tout d’abord, voici à quoi ça doit ressembler :

La structure HTML

<div id="Calculator">
    <div class="screen">
        0
    </div>
    <div class="controls">
        <div class="numpad">
            <div class="slot"><button>7</button></div>
            <div class="slot"><button>8</button></div>
            <div class="slot"><button>9</button></div>
            <div class="slot"><button>4</button></div>
            <div class="slot"><button>5</button></div>
            <div class="slot"><button>6</button></div>
            <div class="slot"><button>1</button></div>
            <div class="slot"><button>2</button></div>
            <div class="slot"><button>3</button></div>
            <div class="slot"><button>0</button></div>
            <div class="slot"><button>.</button></div>
            
        </div>
        <div class="operations">
            <div class="slot"><button class="operation">/</button></div>
            <div class="slot"><button class="operation">*</button></div>
            <div class="slot"><button class="operation">-</button></div>
            <div class="slot"><button class="operation">+</button></div>
        </div>
        
    </div>
    <div class="results">
        <div class="slot"><button class="clear">C</button></div>
        <div class="slot"><button class="equal">=</button></div>
    </div>
</div>

Le CSS

#Calculator{
    position:fixed;
    width:250px;
    background-color:#dbdbdb;
    padding:5px;
    transform: perspective(700px) rotateY(25deg) rotateX(25deg) skew(5deg);
    transform-style: preserve-3d;
    border-radius:2px;
    box-shadow:
        -1px 1px 0px 5px #9c9c9c,
        -2px 2px 0px 5px #9c9c9c,
        -3px 3px 0px 5px #9c9c9c,
        -4px 4px 0px 5px #9c9c9c,
        -5px 5px 0px 5px #9c9c9c,
        -6px 6px 0px 5px #9c9c9c,
        -7px 7px 0px 5px #9c9c9c,
        -8px 8px 0px 5px #9c9c9c,
        -9px 9px 0px 5px #9c9c9c,
        -10px 10px 0px 5px #555555,
        -30px 20px 25px 5px rgba(0,0,0,0.25)
    ;
}
.screen{
    min-height:50px;
    font-size: 5rem;
    text-align: right;
    background-color:#242424;
    color:white;
    padding:5px;
    margin:5px;
    font-family: 'Calculator';
}
.controls{
    display:grid;
    grid-template-columns: 3fr 1fr;
}
.slot{
    flex:0 0 33%;
    padding:5px;
}
button{
    min-height:50px;
    background:#338ec3;
    font-weight: bold;
    color:white;
    width:100%;
    border:0px;
    box-shadow:
        -1px 1px 0px #0d4f75,
        -2px 2px 0px #0d4f75,
        -3px 3px 0px #0d4f75
    ;
}
.operations button{
    display:block;
    width:100%;
    background:#ff3550;
    box-shadow:
        -1px 1px 0px #b31429,
        -2px 2px 0px #b31429,
        -3px 3px 0px #b31429
    ;
}
.numpad{
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-end;
}
.results{
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-end;
}

.results .slot{
    flex:0 0 25%;
}

.results button{
    background:#f5c02e;
    box-shadow:
        -1px 1px 0px #ad830f,
        -2px 2px 0px #ad830f,
        -3px 3px 0px #ad830f
    ;
}

Et enfin le JavaScript

//On récupère tous les boutons
let btns = document.querySelectorAll('button');

//On récupère l'écran de la calculatrice
let screen = document.querySelector('.screen');

//On initialise la chaîne de calcul
let chain = '';

//On ajoute un évènement sur tous les boutons
for(let i=0;i<btns.length;i++){

    let btn = btns[i];

    btn.addEventListener('click',function(){

        //Si c'est le bouton "égal"
        if(btn.classList.contains('equal')){

            //Et que la chaîne d'opération n'est pas vide
            if(chain!=''){
                //On fait le calcul et on l'affiche
                let result = eval(chain);
                screen.innerHTML = result;
                chain = result;
                //On doit également reconvertir le nombre obtenir en chaîne de caractère
                chain = chain.toString();
            }
        
        //Si c'est / + - ou *
        }else if(btn.classList.contains('operation')){
            //Que la chaîne n'est pas vide
            if(chain!=''){
                //On récupère le dernier caractère de la chaîne
                let last_char = chain.slice(-1);
                //Et si ce n'est pas une opération...
                if(last_char != '+' && last_char != '-' && last_char != '*' && last_char != '/'){
                    //On l'ajoute à la chaîne
                    chain = chain+btn.innerText;
                    //Et on affiche la chaîne à l'écran (par exemple 5+3)
                    screen.innerHTML = chain;
                }
                
            }
        //Si c'est C pour "Clear"
        }else if(btn.classList.contains('clear')){
            //On remet tout à zéro
            chain = '';
            screen.innerHTML = 0;
        }else{
            //Sinon c'est un nombre, on l'ajoute à la chaîne
            chain = chain+btn.innerText;
            //Et on affiche la chaîne. 
            screen.innerHTML = chain;
        }
    });
}

J’espère que c’est clair.

Bonne journée !