diff --git a/homework/1/colourSelector/index.php b/homework/1/colourSelector/index.php new file mode 100644 index 0000000..d60346d --- /dev/null +++ b/homework/1/colourSelector/index.php @@ -0,0 +1,56 @@ + + + + + + + Colour Selector + + + + + + + + +
+
+ > + +
+
+
+ + +
+ Please enter valid hex colour code +
+
+ +
+ +

+ +
+ + + \ No newline at end of file diff --git a/homework/1/colourSelector/js/formValidation.js b/homework/1/colourSelector/js/formValidation.js new file mode 100644 index 0000000..9eeb1b6 --- /dev/null +++ b/homework/1/colourSelector/js/formValidation.js @@ -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(); +}); diff --git a/homework/1/themeSwitcher/css/black.css b/homework/1/themeSwitcher/css/black.css new file mode 100644 index 0000000..8e03a45 --- /dev/null +++ b/homework/1/themeSwitcher/css/black.css @@ -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"); +} \ No newline at end of file diff --git a/homework/1/themeSwitcher/css/pink.css b/homework/1/themeSwitcher/css/pink.css new file mode 100644 index 0000000..a21de4a --- /dev/null +++ b/homework/1/themeSwitcher/css/pink.css @@ -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"); +} \ No newline at end of file diff --git a/homework/1/themeSwitcher/index.php b/homework/1/themeSwitcher/index.php new file mode 100644 index 0000000..6ccd8e0 --- /dev/null +++ b/homework/1/themeSwitcher/index.php @@ -0,0 +1,62 @@ + + + + + + + Theme Switcher + + + + true, "secure" => true, "samesite" => "strict"]); + Headers::redirect("./"); + } else if (isset($_COOKIE["theme"])) { + $theme = $_COOKIE["theme"]; + } + + Headers::html(); + ?> + + + + + + + + + + + +
+
+ > + +
+
+
+ +
+ Please select a valid state. +
+
+ +
+ +

+ +
+ + + \ No newline at end of file diff --git a/homework/1/themeSwitcher/js/formValidation.js b/homework/1/themeSwitcher/js/formValidation.js new file mode 100644 index 0000000..9eeb1b6 --- /dev/null +++ b/homework/1/themeSwitcher/js/formValidation.js @@ -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(); +}); diff --git a/homework/colourSelector/index.php b/homework/colourSelector/index.php deleted file mode 100644 index 8435490..0000000 --- a/homework/colourSelector/index.php +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - Colour Selector - - - - - - - - -
- - -
-
-
- - -
- Please enter valid hex colour code -
-
- -
- - - \ No newline at end of file diff --git a/homework/colourSelector/js/formValidation.js b/homework/colourSelector/js/formValidation.js deleted file mode 100644 index 77f2903..0000000 --- a/homework/colourSelector/js/formValidation.js +++ /dev/null @@ -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); - }); -};