On considère le code html suivant :
<!doctype html>
<html lang="fr">
<!-- **** Début ENTETE de page ***** -->
<head>
<!-- Encodage des caractères-->
<meta charset="utf-8">
<title>Calculatrice
</title>
<link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<!-- **** Début CORPS de page ***** -->
<body>
<div id="conteneur">
<!-- **** affichage calculs et résultats ***** -->
<div id="ecran">
<span id="affichage"></span>
</div>
<div id="fond_clavier">
<!-- **** clavier ***** -->
<div id="clavier">
<button >AC</button>
<button >C</button>
<button >(</button>
<button >)</button>
<br />
<button >7</button>
<button >8</button>
<button >9</button>
<button >/</button>
<br />
<button >4</button>
<button >5</button>
<button >6</button>
<button >*</button>
<br />
<button >1</button>
<button >2</button>
<button >3</button>
<button >-</button>
<br />
<button >0</button>
<button >.</button>
<button >=</button>
<button >+</button>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
le css suivant :
@charset "utf-8";
h1,h2,p,div { /* Permet d'avoir des blocs qui se collent les uns aux autres si margin et padding règlés à 0;*/
margin:0; padding: 0;
}
#conteneur {margin:auto;width: 700px;height: 800px;border: 1px solid #FFB6B8}
#ecran{margin:auto ;width: 84%;height: 10%;border: 1px solid #FFB6B8; font-family: 'Rajdhani', sans-serif; font-size:300%; text-align: right; padding-right: 6%;}
#fond_clavier {margin:auto;width: 90%;height: 85%;border: 1px solid #FFB6B8}
#clavier {margin:auto;width:70%;border: none}
button { width: 70px; height: 70px; display:inline-block;text-align:center; border: 1px solid #1E0421;
border-radius: 5px; margin: 10px 7px 10px 10px; background-color: #EFECCA; font-size: 150%}
Mettre en place le js pour rendre cette calculatrice opérationnelle.
Barème :
on a le droit d’utiliser toutes les fonctions vues en js et uniquement celles-là. Par exemple :
document.getElementsByTagName()
getElementById()
textContent
5 points : lorsqu’on appuie sur un nombre ou une opération , l’écran affiche la valeur correspondante.
5 points : le résultat du calcul s’affiche lorsque l’on appuie sur la touche = .
On pourra utiliser la fonction eval() du js qui exécute une chaîne de caractère comme un code :
eval(« 3+5 ») renvoie 8.
5 points : les calculs sont remis à 0 si on appuie sur AC ou C.
5 points : la touche AC efface uniquement la dernière valeur entrée.