Task Calculator

This commit is contained in:
Kilian Hofmann 2024-05-03 12:32:33 +02:00
parent 896d1936b6
commit 28bf114b33
2 changed files with 123 additions and 0 deletions

View File

@ -0,0 +1,23 @@
// Example starter JavaScript for disabling form submissions if there are invalid fields
document.addEventListener("DOMContentLoaded", () => {
"use strict";
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll(".needs-validation");
// Loop over them and prevent submission
Array.from(forms).forEach((form) => {
form.addEventListener(
"submit",
(event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
},
false
);
});
});

100
tasks/calc/index.php Normal file
View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rechner</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="formValidation.js"></script>
</head>
<body>
<?php
include_once "../../base/errors.php";
include_once "../../base/headers.php";
Headers::html();
$result = "";
if (
array_key_exists("operand1", $_POST) &&
is_numeric($_POST["operand1"]) &&
is_numeric($_POST["operand2"])
) {
$operand1 = $_POST["operand1"];
$operand2 = $_POST["operand2"];
$operator = $_POST["operator"];
switch ($operator) {
case "addition":
$result = $operand1 + $operand2;
break;
case "subtraction":
$result = $operand1 - $operator2;
break;
case "multiplication":
$result = $operand1 * $operand2;
break;
case "division":
if ($operand2 == 0) {
$result = "Nicht definiert";
break;
}
$result = $operand1 / $operand2;
break;
}
}
?>
<form method="post" class="p-3 needs-validation" novalidate>
<div class="mb-3">
<label class="form-label" for="operand1">Operand 1</label>
<input class="form-control" id="operand1" type="number" name="operand1" value="0" required step="any" />
<div class="invalid-feedback">
Bitte eine Zahl eingeben
</div>
</div>
<div class="mb-3">
<label class="form-label" for="operand2">Operand 2</label>
<input class="form-control" id="operand2" type="number" name="operand2" value="0" required step="any" />
<div class="invalid-feedback">
Bitte eine Zahl eingeben
</div>
</div>
<label class="form-label">Operator</label>
<div class="form-check">
<input class="form-check-input" id="additionRadio" type="radio" name="operator" value="addition" <?php echo array_key_exists("operator", $_POST) && $_POST['operator'] == 'addition' ? 'checked' : '' ?> required />
<label class="form-check-label" for="additionRadio">+</label>
</div>
<div class="form-check">
<input class="form-check-input" id="subtractionRadio" type="radio" name="operator" value="subtraction" <?php echo array_key_exists("operator", $_POST) && $_POST['operator'] == 'subtraction' ? 'checked' : '' ?> required />
<label class="form-check-label" for="subtractionRadio">-</label>
</div>
<div class="form-check">
<input class="form-check-input" id="multiplicationRadio" type="radio" name="operator" value="multiplication" <?php echo array_key_exists("operator", $_POST) && $_POST['operator'] == 'multiplication' ? 'checked' : '' ?> required />
<label class="form-check-label" for="multiplicationRadio">*</label>
</div>
<div class="form-check">
<input class="form-check-input" id="divisionRadio" type="radio" name="operator" value="division" <?php echo array_key_exists("operator", $_POST) && $_POST['operator'] == 'division' ? 'checked' : '' ?> required />
<label class="form-check-label" for="divisionRadio">/</label>
<div class="invalid-feedback">
Bitte einen Operanden wählen
</div>
</div>
<button class="btn btn-primary mt-3">Berechnen</button>
</form>
<div class="spacer-1"></div>
<h2 class="m-3">
Ergebnis: <?= $result ?>
</h2>
</body>
</html>