Quel devrait être le code HTML pour afficher une calculatrice?

HTML :

CSS :

corps {

couleur de fond: # 424242;

famille de polices: Tahoma;

}

.récipient {

affichage: flex;

align-items: centre;

justifier-contenu: centre;

hauteur: 100vh;

largeur: 100vw;

}

#récipient {

largeur: 200 px;

rembourrage: 8px 8px 20px 8px;

marge: 20px auto;

couleur de fond: #ABABAB;

rayon-frontière: 4px;

border-top: 2px solide #FFF;

bordure droite: 2px solide #FFF;

bordure inférieure: 2px solide # C1C1C1;

bordure gauche: solide 2px # C1C1C1;

boîte-ombre: -3px 3px 7px rgba (0, 0, 0, .6), encart -100px 0px 100px rgba (255, 255, 255, .5);

}

#afficher {

bloc de visualisation;

marge: 15px auto;

hauteur: 42px;

largeur: 174px;

rembourrage: 0 10px;

rayon-frontière: 4px;

border-top: 2px solide # C1C1C1;

bordure droite: 2px solide # C1C1C1;

border-bottom: 2px solide #FFF;

bordure gauche: 2px solide #FFF;

couleur de fond: #FFF;

shadow-box: encart 0px 0px 10px # 030303, encart 0px -20px 1px rgba (150, 150, 150, .2);

taille de police: 28px;

couleur: # 666;

alignement du texte: à droite;

poids de la police: 400;

}

.bouton {

affichage: bloc en ligne;

marge: 2px;

largeur: 42px;

hauteur: 42px;

taille de police: 16px;

poids de police: gras;

rayon-frontière: 4px;

}

.mathButtons {

marge: 2px 2px 6px 2px;

couleur: #FFF;

texte-ombre: -1px -1px 0px # 44006F;

couleur de fond: # 434343;

border-top: 2px solide # C1C1C1;

bordure droite: 2px solide # C1C1C1;

bordure inférieure: 2px solide # 181818;

bordure gauche: 2px solide # 181818;

boîte-ombre: 0px 0px 2px # 030303, encart 0px -20px 1px # 2E2E2E;

}

.digits {

couleur: # 181818;

text-shadow: 1px 1px 0px #FFF;

couleur de fond: #EBEBEB;

border-top: 2px solide #FFF;

bordure droite: 2px solide #FFF;

bordure inférieure: 2px solide # C1C1C1;

bordure gauche: solide 2px # C1C1C1;

rayon-frontière: 4px;

shadow-box: 0px 0px 2px # 030303, encart 0px -20px 1px #DCDCDC;

}

.digits: survoler,

.mathButtons: survoler,

#clearButton: survoler {

couleur de fond: # FFBA75;

boîte-ombre: 0px 0px 2px # FFBA75, encart 0px -20px 1px # FF8000;

border-top: 2px solide #FFF;

bordure droite: 2px solide #FFF;

bordure inférieure: 2px solide # AE5700;

bordure gauche: solide 2px # AE5700;

}

#clearButton {

couleur: #FFF;

texte-ombre: -1px -1px 0px # 44006F;

couleur de fond: # D20000;

border-top: 2px solide # FF8484;

bordure droite: 2px solide # FF8484;

bordure inférieure: 2px solide # 800000;

bordure gauche: 2px solide # 800000;

boîte-ombre: 0px 0px 2px # 030303, encart 0px -20px 1px # B00000;

}

[code]
< html > < head > < title > Html calculator title > head > < body > < form name = “calculator”> Solution < input type = “textfield” name = “ans” value = “”> < br > < input type = “button” value = “1” onClick = “document.calculator.ans.value + = ‘1’”> < input type = “button” value = “2” onClick = “document.calculator.ans. value + = ‘2’ “> < input type =” button “value =” 3 “onClick =” document.calculator.ans.value + = ‘3’ “> < input type =” button “value =” + “onClick =” document.calculator.ans.value + = ‘+’ “>
< input type =” button “value =” 4 “onClick =” document.calculator.ans.value + = ‘4’ “> < input type =” button “value =” 5 “onClick =” document.calculator.ans.value + = ‘5’ “> < input type =” button “value =” 6 “onClick =” document.calculator.ans.value + = ‘6’ “> < input type = “button” value = “-” onClick = “document.calculator.ans.value + = ‘-‘”>
< input type = “button” value = “7” onClick = “document.calculator. ans.value + = ‘7’ “> < input type =” button “value =” 8 “onClick =” document.calculator.ans.value + = ‘8’ “> < input type =” button “value =” 9 “onClick = “document.calculator.ans.v alue + = ‘9’ “> < input type =” button “value =” * “onClick =” document.calculator.ans.value + = ‘*’ “> < input type =” button “value =” / “onClick =” document.calculator.ans.value + = ‘/’ “>
< input type =” button “value =” 0 “onClick =” document.calculator.ans.value + = ‘0’ “> < input type =” reset “value =” Reset “> < input type =” button “value =” = “onClick =” document.calculator.ans.value = eval (document.calculator.ans.value) “> form > body > html >
[/code]