On consid\u00e8re le code html suivant :<\/p>\n\n\n\n
<!doctype html>\n<html lang=\"fr\">\n\n<!-- **** D\u00e9but ENTETE de page ***** -->\n\t<head>\n\t\t<!-- Encodage des caract\u00e8res-->\n\t<meta charset=\"utf-8\">\n\t<title>Calculatrice \n <\/title>\n\t<link href=\"https:\/\/fonts.googleapis.com\/css?family=Rajdhani\" rel=\"stylesheet\">\n\t<link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\" media=\"screen\"\/>\n\t\t\n<\/head>\n<!-- **** D\u00e9but CORPS de page ***** -->\n\t<body>\n\t\t<div id=\"conteneur\">\n\t\t<!-- **** affichage calculs et r\u00e9sultats ***** -->\n\t\t<div id=\"ecran\">\n <span id=\"affichage\"><\/span>\n\t\t<\/div>\n\t\t<div id=\"fond_clavier\">\n\t\t<!-- **** clavier ***** -->\n\t\t<div id=\"clavier\">\n\t\t\t<button >AC<\/button>\n\t\t\t<button >C<\/button>\n\t\t\t<button >(<\/button>\n\t\t\t<button >)<\/button>\n\t\t\t<br \/>\n\t\t <button >7<\/button>\n\t\t <button >8<\/button>\n\t\t <button >9<\/button>\n\t\t\t<button >\/<\/button>\n\t\t\t<br \/>\n\t\t\t<button >4<\/button>\n\t\t\t<button >5<\/button>\n\t\t\t<button >6<\/button>\n\t\t\t<button >*<\/button>\n\t\t\t<br \/>\n\t\t\t<button >1<\/button>\n\t\t\t<button >2<\/button>\n\t\t\t<button >3<\/button>\n\t\t\t<button >-<\/button>\n\t\t\t<br \/>\n\t\t\t<button >0<\/button>\n\t\t\t<button >.<\/button>\n\t\t\t<button >=<\/button>\n\t\t\t<button >+<\/button>\n\t\t<\/div>\n\t<\/div>\n\t\t<\/div>\n \n <\/body>\n <script src=\"script.js\"><\/script>\n<\/html>\n<\/code><\/pre>\n\n\n\nle css suivant :<\/p>\n\n\n\n
@charset \"utf-8\";\n\nh1,h2,p,div { \/* Permet d'avoir des blocs qui se collent les uns aux autres si margin et padding r\u00e8gl\u00e9s \u00e0 0;*\/\n\tmargin:0; padding: 0;\n}\n\n#conteneur {margin:auto;width: 700px;height: 800px;border: 1px solid #FFB6B8}\n#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%;}\n#fond_clavier {margin:auto;width: 90%;height: 85%;border: 1px solid #FFB6B8}\n#clavier {margin:auto;width:70%;border: none}\n\n button {\twidth: 70px; height: 70px; display:inline-block;text-align:center; \tborder: 1px solid #1E0421;\nborder-radius: 5px; margin: 10px 7px 10px 10px; background-color: #EFECCA; font-size: 150%}\n\n<\/code><\/pre>\n\n\n\nMettre en place le js pour rendre cette calculatrice op\u00e9rationnelle.
Bar\u00e8me<\/strong> :<\/p>\n\n\n\non a le droit d’utiliser toutes les fonctions vues en js et uniquement celles-l\u00e0. Par exemple :<\/p>\n\n\n\n
document.getElementsByTagName()
getElementById()
textContent<\/p>\n\n\n\n
5 points : lorsqu’on appuie sur un nombre ou une op\u00e9ration , l’\u00e9cran affiche la valeur correspondante.
5 points : le r\u00e9sultat du calcul s’affiche lorsque l’on appuie sur la touche = .
On pourra utiliser la fonction eval() du js qui ex\u00e9cute une cha\u00eene de caract\u00e8re comme un code :
eval(\u00ab\u00a03+5\u00a0\u00bb) renvoie 8.
5 points : les calculs sont remis \u00e0 0 si on appuie sur AC ou C.
5 points : la touche AC efface uniquement la derni\u00e8re valeur entr\u00e9e.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
On consid\u00e8re le code html suivant : le css suivant : Mettre en place le…<\/p>\n