Calculatrice DIY 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 !