Verde/Calcolatrice_HTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lavoro finito(?)

Browse Source
This commit is contained in:
La Programmatrice Verde 2025-02-16 14:11:13 +01:00
parent 383e64bfdb
commit 6bed27e8b5
4 changed files with 140 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@ -7,26 +7,17 @@
<script src="script.js"></script> <script src="script.js"></script>
</head> </head>
<body> <body>
<div class="calcolatrice"> <div class="corpo">
<div class="pulsanti"> <p id="testo1">Operando 1</p>
<input id="output" type="text" readonly maxlength="44" /> <input id="numero1" type="text"/>
<button id="sette" onclick="Bottone(this)">7</button> <p id="testo2">Operando 2</p>
<button id="otto" onclick="Bottone(this)">8</button> <input id="numero2" type="text"/>
<button id="nove" onclick="Bottone(this)">9</button> <p id="testo3">Risultato</p>
<button id="diviso" onclick="Bottone(this)">÷</button> <input id="output" type="text" readonly/>
<button id="quattro" onclick="Bottone(this)">4</button> <button id="più" onclick="Somma()">+</button>
<button id="cinque" onclick="Bottone(this)">5</button> <button id="meno" onclick="Differenza()">-</button>
<button id="sei" onclick="Bottone(this)">6</button> <button id="per" onclick="Prodotto()">×</button>
<button id="per" onclick="Bottone(this)">×</button> <button id="diviso" onclick="Quoziente()">÷</butto>
<button id="uno" onclick="Bottone(this)">1</button>
<button id="due" onclick="Bottone(this)">2</button>
<button id="tre" onclick="Bottone(this)">3</button>
<button id="meno" onclick="Bottone(this)">-</button>
<button id="zero" onclick="Bottone(this)">0</button>
<button id="virgola" onclick="Bottone(this)">.</button>
<button id="uguale" onclick="Bottone(this)">=</button>
<button id="più" onclick="Bottone(this)">+</button>
</div>
</div> </div>
</body> </body>
</html> </html>

BIN
menhera-chan.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

61
script.js
View File

@ -1,10 +1,57 @@
function Bottone(p_elemento) { function Somma() {
var contenuto = document.getElementById("output").value; document.getElementById("numero2").style.background = "skyblue";
document.getElementById("output").value = contenuto + document.getElementById(p_elemento.id).innerHTML; 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 {
function Numero() { document.getElementById("output").value = parseInt(document.getElementById("numero1").value) + parseInt(document.getElementById("numero2").value);
var contenuto = document.getElementById("output").innerHTML; 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 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";
}
} }

154
style.css
View File

@ -1,89 +1,83 @@
body{ body{
display: grid; margin-left: 33%;
grid-template-columns: repeat(4, 480px); background-color: teal;
grid-template-rows: repeat(5, 540px); 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 { .corpo {
grid-area: 1 / 2 / 1 / 4; width: 725px;
border: 2px solid blue; padding-top: 50px;
width: 50%; padding-bottom: 50px;
padding-left: 29%; margin-top: 50px;
padding-right: 20%;
padding-top: 4%;
}
.pulsanti {
border: 2px solid red;
display: grid; display: grid;
grid-template-columns: repeat(4, 50px); grid-template-columns: repeat(10, 50px);
grid-template-rows: repeat(5, 50px); grid-template-rows: repeat(5, 50px);
grid-column-gap: 50px; grid-column-gap: 25px;
grid-row-gap: 50px; 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 { #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ù { #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;
} }