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

Prototipo di funzionamento dei bottoni e delle posizioni

Browse Source
This commit is contained in:
La Programmatrice Verde 2025-02-11 19:56:30 +01:00
parent 985c574f34
commit 383e64bfdb
3 changed files with 128 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -1,11 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"> <meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>Titolo</title> <title>Titolo</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
</head> <script src="script.js"></script>
<body> </head>
<body>
</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>
</div>
</body>
</html> </html>

10
script.js
View File

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

89
style.css
View File

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