Task Calculator
This commit is contained in:
parent
896d1936b6
commit
28bf114b33
23
tasks/calc/formValidation.js
Normal file
23
tasks/calc/formValidation.js
Normal 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
100
tasks/calc/index.php
Normal 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>
|
||||||
Loading…
x
Reference in New Issue
Block a user