Kilian/PHP-Course
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Theme Switcher

Browse Source
This commit is contained in:
Kilian Hofmann 2024-05-24 21:37:33 +02:00
parent cceab89523
commit 4dc97daf63
8 changed files with 219 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
homework/1/colourSelector/index.php Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<?php include_once "../../../base/meta.php" ?>
<title>Colour Selector</title>
<script src="./js/formValidation.js"></script>
<?php
// PHP
include_once "../../../base/settings.php";
include_once "../../../base/headers.php";
if (!isset($_COOKIE["validation"])) {
setcookie("validation", "false");
}
if (isset($_POST["colour"])) {
$colour = $_POST["colour"];
if (!preg_match("/^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/", $colour)) {
$error = "Invalid hex colour";
unset($colour);
}
}
Headers::html();
?>
</head>
<body style="background-color: <?= $colour ?>">
<div class="p-3">
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="clientSideValidate" <?= ($_COOKIE["validation"] ?? false) === "true" ? "checked" : "" ?>>
<label class=" form-check-label" for="clientSideValidate">Use Client Side Validation</label>
</div>
<form method="post" class="needs-validation" novalidate>
<div class="mb-3">
<label class="form-label" for="colour">Colour Code</label>
<input class="form-control" id="colour" name="colour" required pattern="^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$" />
<div class="invalid-feedback">
Please enter valid hex colour code
</div>
</div>
<button type="submit" class="btn btn-primary mb-3 w-100">Send</button>
</form>
<?php if (isset($error)) { ?>
<h2 class="text-danger"><?= $error ?></h2>
<?php } ?>
</div>
</body>
</html>

37
homework/1/colourSelector/js/formValidation.js Normal file
View File

@ -0,0 +1,37 @@
"use strict";
document.addEventListener("DOMContentLoaded", () => {
const handler = (event) => {
if (!event.target.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
event.target.classList.add("was-validated");
};
const addValidation = () => {
const forms = document.querySelectorAll(".needs-validation");
Array.from(forms).forEach((form) => {
form.addEventListener("submit", handler, false);
});
};
const removeValidation = () => {
const forms = document.querySelectorAll(".needs-validation");
Array.from(forms).forEach((form) => {
form.removeEventListener("submit", handler, false);
});
};
const switchHandler = () => {
_switch.checked ? addValidation() : removeValidation();
document.cookie = `validation=${_switch.checked}`;
};
const _switch = document.getElementById("clientSideValidate");
_switch.addEventListener("change", switchHandler);
switchHandler();
});

13
homework/1/themeSwitcher/css/black.css Normal file
View File

@ -0,0 +1,13 @@
:root {
--bs-body-bg: black;
--bs-body-color: white;
}
body {
background-color: black;
color: white;
}
.form-select {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

14
homework/1/themeSwitcher/css/pink.css Normal file
View File

@ -0,0 +1,14 @@
:root {
--bs-body-bg: pink;
--bs-border-color: red;
--bs-body-color: red;
}
body {
background-color: pink;
color: red;
}
.form-select {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

62
homework/1/themeSwitcher/index.php Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<?php include_once "../../../base/meta.php" ?>
<title>Theme Switcher</title>
<script src="./js/formValidation.js"></script>
<?php
// PHP
include_once "../../../base/settings.php";
include_once "../../../base/headers.php";
if (isset($_POST["theme"])) {
$theme = $_POST["theme"];
setcookie("theme", $theme, ["httponly" => true, "secure" => true, "samesite" => "strict"]);
Headers::redirect("./");
} else if (isset($_COOKIE["theme"])) {
$theme = $_COOKIE["theme"];
}
Headers::html();
?>
<?php if (isset($theme) && $theme === "black") { ?>
<link href="./css/black.css" rel="stylesheet" />
<?php } ?>
<?php if (isset($theme) && $theme === "pink") { ?>
<link href="./css/pink.css" rel="stylesheet" />
<?php } ?>
</head>
<body>
<div class="p-3">
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="clientSideValidate" <?= ($_COOKIE["validation"] ?? false) === "true" ? "checked" : "" ?>>
<label class=" form-check-label" for="clientSideValidate">Use Client Side Validation</label>
</div>
<form method="post" class="needs-validation" novalidate>
<div class="mb-3">
<select class="form-select" name="theme" required>
<option value="" <?= !isset($theme) ? "selected" : "" ?> disabled>Select a Theme</option>
<option value="black" <?= isset($theme) && $theme === "black" ? "selected" : "" ?>>Black</option>
<option value="pink" <?= isset($theme) && $theme === "pink" ? "selected" : "" ?>>Pink</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<button type="submit" class="btn btn-primary mb-3 w-100">Set Selected Theme</button>
</form>
<?php if (isset($error)) { ?>
<h2 class="text-danger"><?= $error ?></h2>
<?php } ?>
</div>
</body>
</html>

37
homework/1/themeSwitcher/js/formValidation.js Normal file
View File

@ -0,0 +1,37 @@
"use strict";
document.addEventListener("DOMContentLoaded", () => {
const handler = (event) => {
if (!event.target.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
event.target.classList.add("was-validated");
};
const addValidation = () => {
const forms = document.querySelectorAll(".needs-validation");
Array.from(forms).forEach((form) => {
form.addEventListener("submit", handler, false);
});
};
const removeValidation = () => {
const forms = document.querySelectorAll(".needs-validation");
Array.from(forms).forEach((form) => {
form.removeEventListener("submit", handler, false);
});
};
const switchHandler = () => {
_switch.checked ? addValidation() : removeValidation();
document.cookie = `validation=${_switch.checked}`;
};
const _switch = document.getElementById("clientSideValidate");
_switch.addEventListener("change", switchHandler);
switchHandler();
});

46
homework/colourSelector/index.php
View File

@ -1,46 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<?php include_once "../../base/meta.php" ?>
<title>Colour Selector</title>
<script src="./js/formValidation.js"></script>
<?php
// PHP
include_once "../../base/settings.php";
include_once "../../base/headers.php";
if (isset($_POST["colour"])) {
$colour = $_POST["colour"];
if (preg_match("^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$", $colour) === false) {
$error = "Invalid hex colour";
}
}
Headers::html();
?>
</head>
<body style="background-color: <?=$colour?>">
<div class="form-check form-switch m-3">
<input class="form-check-input" type="checkbox" role="switch" id="clientSideValidate">
<label class="form-check-label" for="clientSideValidate">Use Client Side Validation</label>
</div>
<form method="post" class="needs-validation row m-0" novalidate>
<div class="mb-3">
<label class="form-label" for="colour">Colour Code</label>
<input class="form-control" id="colour" name="colour" required pattern="^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$" />
<div class="invalid-feedback">
Please enter valid hex colour code
</div>
</div>
<button class="btn btn-primary mt-3" name="firstLoad" value="0">Berechnen</button>
</form>
</body>
</html>

33
homework/colourSelector/js/formValidation.js
View File

@ -1,33 +0,0 @@
"use strict";
document.addEventListener("DOMContentLoaded", () => {
const _switch = document.getElementById("clientSideValidate");
_switch.addEventListener("change", () =>
_switch.checked ? addValidation() : removeValidation()
);
});
const handler = (event) => {
if (!event.target.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
event.target.classList.add("was-validated");
};
const addValidation = () => {
const forms = document.querySelectorAll(".needs-validation");
Array.from(forms).forEach((form) => {
form.addEventListener("submit", handler, false);
});
};
const removeValidation = () => {
const forms = document.querySelectorAll(".needs-validation");
Array.from(forms).forEach((form) => {
form.removeEventListener("submit", handler, false);
});
};