Borgal/calculator
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
Borgal
2022-01-18 13:56:46 +01:00
commit 9c1cf54622
8 changed files with 183 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app.js Executable file
View File

@@ -0,0 +1,36 @@
function appendOperation(operation) {
if (document.getElementById('resultArea').innerHTML == 0) {
document.getElementById('resultArea').innerHTML = "";
document.getElementById('resultArea').innerHTML += operation;
}
else {
// mit += Zeichen anfügen
document.getElementById('resultArea').innerHTML += operation;
}
}
function calculateResult() {
let container = document.getElementById('resultArea');
let result = eval(container.innerHTML);
container.innerHTML = result;
}
function clearAll() {
document.getElementById('resultArea').innerHTML = 0;
}
function deleteLast() {
let container = document.getElementById('resultArea');
// wenn innerHTML mit Leerzeichen endet
if (container.innerHTML.endsWith(' ')) {
// von innerHTML am Ende 3 Zeichen löschen
container.innerHTML = container.innerHTML.slice(0, -3);
}
else {
// von innerHTML am Ende 1 Zeichen löschen
container.innerHTML = container.innerHTML.slice(0, -1);
}
}

58
index.php Executable file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="manifest.webmanifest">
</head>
<body>
<?php $text = "Max Müller"; ?>
<div id="resultArea">
0
</div>
<table>
<tr>
<td onclick="clearAll()" class="red">CE</td>
<td colspan="2" class="highlight"><?php echo $text ?></td>
<td onclick="deleteLast()" class="highlight">DEL</td>
</tr>
<tr>
<td onclick="appendOperation(7)">7</td>
<td onclick="appendOperation(8)">8</td>
<td onclick="appendOperation(9)">9</td>
<td onclick="appendOperation(' / ')" class="highlight">/</td>
</tr>
<tr>
<td onclick="appendOperation(4)">4</td>
<td onclick="appendOperation(5)">5</td>
<td onclick="appendOperation(6)">6</td>
<td onclick="appendOperation(' * ')" class="highlight">*</td>
</tr>
<tr>
<td onclick="appendOperation(1)">1</td>
<td onclick="appendOperation(2)">2</td>
<td onclick="appendOperation(3)">3</td>
<td onclick="appendOperation(' + ')" class="highlight">+</td>
</tr>
<tr>
<td onclick="appendOperation(0)">0</td>
<td onclick="appendOperation('.')">,</td>
<td onclick="calculateResult()" id="result">=</td>
<td onclick="appendOperation(' - ')" class="highlight">-</td>
</tr>
</table>
<script src="/app.js"></script>
</body>
</html>

32
manifest.webmanifest Executable file
View File

@@ -0,0 +1,32 @@
{
"theme_color": "#141414",
"background_color": "#141414",
"display": "fullscreen",
"scope": "/",
"start_url": "/index.php",
"name": "Calculator",
"short_name": "Calculator",
"description": "Kleiner Taschenrechner",
"icons": [
{
"src": "/manifest/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/manifest/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/manifest/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/manifest/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

BIN
manifest/icon-192x192.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
manifest/icon-256x256.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
manifest/icon-384x384.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
manifest/icon-512x512.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

57
style.css Executable file
View File

@@ -0,0 +1,57 @@
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
table {
width: 100%;
height: 70vh;
color: white;
background-color: rgb(30, 30, 30);
}
td {
width: 25%;
text-align: center;
font-size: 24px;
background-color: rgb(20, 20, 20);
}
td:hover {
background-color: rgb(30, 30, 30);
/* Cursor als Hand */
cursor: pointer;
}
#resultArea {
height: 30vh;
background-color: rgb(40, 40, 40);
color: white;
font-size: 64px;
display: flex;
justify-content: end;
align-items: flex-end;
padding: 24px;
/* Ausbreitung duch Padding verhindern */
box-sizing: border-box;
}
#result {
background-color: rgb(67, 55, 236);
}
#result:hover {
background-color: rgb(110, 101, 235);
}
.red{
background-color: rgb(212, 38, 38);
}
.red:hover{
background-color: rgb(212, 80, 85);
}
.highlight {
background-color: rgb(25, 25, 25);
}