diff --git a/index.html b/index.html index ad0422b..a3b0d1b 100644 --- a/index.html +++ b/index.html @@ -7,26 +7,17 @@ -
-
- - - - - - - - - - - - - - - - - +
+

Operando 1

+ +

Operando 2

+ +

Risultato

+ + + + +
-
diff --git a/menhera-chan.gif b/menhera-chan.gif new file mode 100644 index 0000000..530b661 Binary files /dev/null and b/menhera-chan.gif differ diff --git a/script.js b/script.js index e5d709b..5c73634 100644 --- a/script.js +++ b/script.js @@ -1,10 +1,57 @@ -function Bottone(p_elemento) { - var contenuto = document.getElementById("output").value; - document.getElementById("output").value = contenuto + document.getElementById(p_elemento.id).innerHTML; - +function Somma() { + document.getElementById("numero2").style.background = "skyblue"; + if (isNaN(parseInt(document.getElementById("numero1").value)) || isNaN(parseInt(document.getElementById("numero2").value))) { + document.getElementById("output").value = "Errore"; + document.getElementById("output").style.background = "red"; + } + + else { + document.getElementById("output").value = parseInt(document.getElementById("numero1").value) + parseInt(document.getElementById("numero2").value); + document.getElementById("output").style.background = "lightgreen"; + } } +function Differenza() { + document.getElementById("numero2").style.background = "skyblue"; + if (isNaN(parseInt(document.getElementById("numero1").value)) || isNaN(parseInt(document.getElementById("numero2").value))) { + document.getElementById("output").value = "Errore"; + document.getElementById("output").style.background = "red"; + } + + else { + document.getElementById("output").value = parseInt(document.getElementById("numero1").value) - parseInt(document.getElementById("numero2").value); + document.getElementById("output").style.background = "lightgreen"; + } +} -function Numero() { - var contenuto = document.getElementById("output").innerHTML; -} \ No newline at end of file +function Prodotto() { + document.getElementById("numero2").style.background = "skyblue"; + if (isNaN(parseInt(document.getElementById("numero1").value)) || isNaN(parseInt(document.getElementById("numero2").value))) { + document.getElementById("output").value = "Errore"; + document.getElementById("output").style.background = "red"; + } + + else { + document.getElementById("output").value = parseInt(document.getElementById("numero1").value) * parseInt(document.getElementById("numero2").value); + document.getElementById("output").style.background = "lightgreen"; + } +} + +function Quoziente() { + document.getElementById("numero2").style.background = "skyblue"; + if (isNaN(parseInt(document.getElementById("numero1").value)) || isNaN(parseInt(document.getElementById("numero2").value))) { + document.getElementById("output").value = "Errore"; + document.getElementById("output").style.background = "red"; + } + + else if (parseInt(document.getElementById("numero2").value) == 0) { + document.getElementById("output").value = "Errore"; + document.getElementById("output").style.background = "red"; + document.getElementById("numero2").style.background = "red"; + } + + else { + document.getElementById("output").value = parseInt(document.getElementById("numero1").value) / parseInt(document.getElementById("numero2").value); + document.getElementById("output").style.background = "lightgreen"; + } +} diff --git a/style.css b/style.css index 5e14387..3ac651a 100644 --- a/style.css +++ b/style.css @@ -1,89 +1,83 @@ -body { - display: grid; - grid-template-columns: repeat(4, 480px); - grid-template-rows: repeat(5, 540px); +body{ + margin-left: 33%; + background-color: teal; + font-family: Arial, Helvetica, sans-serif; + font-size: 18pt; + background-image: url(menhera-chan.gif); + background-repeat: no-repeat; + background-size: 200px; + background-position: 77% 70%; + margin-right: 5%; } -.calcolatrice { - grid-area: 1 / 2 / 1 / 4; - border: 2px solid blue; - width: 50%; - padding-left: 29%; - padding-right: 20%; - padding-top: 4%; -} - -.pulsanti { - border: 2px solid red; +.corpo { + width: 725px; + padding-top: 50px; + padding-bottom: 50px; + margin-top: 50px; display: grid; - grid-template-columns: repeat(4, 50px); + grid-template-columns: repeat(10, 50px); grid-template-rows: repeat(5, 50px); - grid-column-gap: 50px; - grid-row-gap: 50px; + grid-column-gap: 25px; + grid-row-gap: 25px; + background-color: lightseagreen; + border-radius: 20px; } + +#testo1 { + grid-area: 1 / 2 / 2 / 6; + text-align: center; +} + +#numero1 { + grid-area: 2 / 2 / 2 / 6; + font-size: 18pt; + background-color: skyblue; + border-radius: 20px; +} + +#testo2 { + grid-area: 1 / 6 / 2 / 10; + text-align: center; +} + +#numero2 { + grid-area: 2 / 6 / 2 / 10; + font-size: 18pt; + background-color: skyblue; + border-radius: 20px; +} + +#testo3 { + grid-area: 4 / 4 / 3 / 8; + text-align: center; +} + #output { - grid-area: 1 / 1 / 1 / 5; + grid-area: 4 / 4 / 4 / 8; + font-size: 18pt; + border-radius: 20px; } - -#sette { - grid-area: 2 / 1 / 3 / 2; -} - -#otto { - grid-area: 2 / 2 / 3 / 3; -} - -#nove { - grid-area: 2 / 3 / 3 / 4; -} - -#diviso { - grid-area: 2 / 4 / 3 / 5; -} - -#quattro { - grid-area: 3 / 1 / 4 / 2; -} - -#cinque { - grid-area: 3 / 2 / 4 / 3; -} - -#sei { - grid-area: 3 / 3 / 4 / 4; -} - -#per { - grid-area: 3 / 4 / 4 / 5; -} - -#uno { - grid-area: 4 / 1 / 5 / 2; -} - -#due { - grid-area: 4 / 2 / 5 / 3; -} - -#tre { - grid-area: 4 / 3 / 5 / 4; -} - -#meno { - grid-area: 4 / 4 / 5 / 5; - } - -#zero { - grid-area: 5 / 1 / 6 / 2; -} - -#virgola { - grid-area: 5 / 2 / 6 / 3; -} - -#uguale { - grid-area: 5 / 3 / 6 / 4; -} - #più { - grid-area: 5 / 4 / 6 / 5; + grid-area: 5 / 2 / 5 / 4; + font-size: 18pt; + background-color: skyblue; + border-radius: 20px; +} +#meno { + grid-area: 5 / 4 / 5 / 6; + font-size: 18pt; + background-color: skyblue; + border-radius: 20px; +} +#per { + grid-area: 5 / 6 / 5 / 8; + font-size: 18pt; + background-color: skyblue; + border-radius: 20px; +} +#diviso { + grid-area: 5 / 8 / 5 / 10; + font-size: 18pt; + background-color: skyblue; + border-radius: 20px; }