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>
</head>
<body>
<div class="calcolatrice">
<div class="pulsanti">
<input id="output" type="text" readonly maxlength="44" />
<button id="sette" onclick="Bottone(this)">7</button>
<button id="otto" onclick="Bottone(this)">8</button>
<button id="nove" onclick="Bottone(this)">9</button>
<button id="diviso" onclick="Bottone(this)">÷</button>
<button id="quattro" onclick="Bottone(this)">4</button>
<button id="cinque" onclick="Bottone(this)">5</button>
<button id="sei" onclick="Bottone(this)">6</button>
<button id="per" onclick="Bottone(this)">×</button>
<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 class="corpo">
<p id="testo1">Operando 1</p>
<input id="numero1" type="text"/>
<p id="testo2">Operando 2</p>
<input id="numero2" type="text"/>
<p id="testo3">Risultato</p>
<input id="output" type="text" readonly/>
<button id="più" onclick="Somma()">+</button>
<button id="meno" onclick="Differenza()">-</button>
<button id="per" onclick="Prodotto()">×</button>
<button id="diviso" onclick="Quoziente()">÷</butto>
</div>
</div>
</body>
</html>

BIN
menhera-chan.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

57
script.js
View File

@ -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";
}
function Numero() {
var contenuto = document.getElementById("output").innerHTML;
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";
}
}

156
style.css
View File

@ -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;
}