diff --git a/index.html b/index.html index 30961fd..ad0422b 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,32 @@ - - - Titolo - - - - - + + + Titolo + + + + +
+
+ + + + + + + + + + + + + + + + + +
+
+ diff --git a/script.js b/script.js index e69de29..e5d709b 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,10 @@ +function Bottone(p_elemento) { + var contenuto = document.getElementById("output").value; + document.getElementById("output").value = contenuto + document.getElementById(p_elemento.id).innerHTML; + +} + + +function Numero() { + var contenuto = document.getElementById("output").innerHTML; +} \ No newline at end of file diff --git a/style.css b/style.css index e69de29..5e14387 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,89 @@ +body { + display: grid; + grid-template-columns: repeat(4, 480px); + grid-template-rows: repeat(5, 540px); +} +.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; + display: grid; + grid-template-columns: repeat(4, 50px); + grid-template-rows: repeat(5, 50px); + grid-column-gap: 50px; + grid-row-gap: 50px; +} +#output { + grid-area: 1 / 1 / 1 / 5; +} + +#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; +}