Recipe Hub
diff --git a/Food-Recipe/index.js b/Food-Recipe/index.js
index 22cb4ba..33d053d 100644
--- a/Food-Recipe/index.js
+++ b/Food-Recipe/index.js
@@ -24,7 +24,45 @@ const RATE_LIMIT = 5; // Requests per second
let responseCount = 0;
const fetchQueue = [];
-//Event Listener
+
+// Dark/light mode toggle
+
+const darkModeToggle = document.querySelector('.dark-mode__toggle');
+darkModeToggle.addEventListener('change', () => toggleDarkMode());
+
+const body = document.body;
+const isDarkMode = localStorage.getItem('dark-mode');
+if (isDarkMode === 'enabled') {
+ body.classList.add('dark-mode');
+ darkModeToggle.checked = true;
+}
+
+function toggleDarkMode() {
+ const result = document.querySelector('.results__result');
+ const modal = document.querySelector('.modal');
+ const modalClose = document.querySelector('.modal__close');
+
+ body.classList.toggle('dark-mode');
+
+ if (body.classList.contains('dark-mode')) {
+ localStorage.setItem('dark-mode', 'enabled');
+ } else {
+ localStorage.setItem('dark-mode', 'disabled');
+ }
+
+ if (result) {
+ result.classList.toggle('dark-mode');
+ }
+ if (modal) {
+ modal.classList.toggle('dark-mode');
+ }
+ if (modalClose) {
+ modalClose.classList.toggle('dark-mode');
+ }
+}
+
+
+//Searh Input Event Listener
document.addEventListener("DOMContentLoaded", () => {
const form = document.querySelector("form");
@@ -183,6 +221,9 @@ async function fetchResponses(recipeName) {
function createRecipe(displayName, img_url, video_url, description, countryTag, rating, cookTime, yields, ingredientsTag, instructionsTag, nutrition, difficultyTag) {
const box = document.createElement("div");
box.classList.add("results__result");
+ if (body.classList.contains('dark-mode')) {
+ box.classList.add('dark-mode');
+ }
const resultIntro = document.createElement("div");
resultIntro.classList.add("results__result--intro");
@@ -258,6 +299,9 @@ function createModal() {
const modal = document.createElement('div');
modal.classList.add('modal');
modal.classList.add('modal-active');
+ if (body.classList.contains('dark-mode')) {
+ modal.classList.add('dark-mode');
+ }
return modal;
}
@@ -265,6 +309,9 @@ function createCloseButton() {
const close = document.createElement('button');
close.classList.add('modal__close');
close.innerHTML = '✖';
+ if (body.classList.contains('dark-mode')) {
+ close.classList.add('dark-mode');
+ }
return close;
}
@@ -421,6 +468,4 @@ function clearResults() {
}
}
-
-
//comment on first commit
\ No newline at end of file
diff --git a/Food-Recipe/styles.css b/Food-Recipe/styles.css
index 3d5eaa4..5fcc50d 100644
--- a/Food-Recipe/styles.css
+++ b/Food-Recipe/styles.css
@@ -7,6 +7,9 @@
--clr-black: black;
--clr-white: white;
--clr-accent: #8600d2;
+ --clr-dark-mode-body: #1e1e1e;
+ --clr-dark-mode-result: #3a3a3a;
+ --clr-dark-mode-modal-border: #999999;
/* Font families */
--ff-primary: "Inter";
/* FOnt sizes */
@@ -262,9 +265,9 @@ button:hover {
position: fixed;
top: 50%;
left: 50%;
- transform: translate(-50%, -50%);
- transform: translate(-50%, -200%);
- transition: transform 0.4s ease-in;
+ /* transform: translate(-50%, -50%); */
+ /* transform: translate(-50%, -200%);
+ transition: transform 0.4s ease-in; */
width: 95%;
max-height: 90%;
@@ -402,6 +405,76 @@ footer {
color: var(--clr-white);
}
+footer a:focus {
+ outline: 0.1em solid var(--clr-white);
+ outline-offset: 0.1em;
+}
+
+/* Dark Mode */
+.dark-mode__toggle--wrapper {
+ position: fixed;
+ right: 0.9em;
+ top: 0.9em;
+}
+
+.dark-mode__toggle {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0,0,0,0);
+ white-space: nowrap;
+ border: 0;
+}
+
+.dark-mode__toggle-label {
+ background-color: #111;
+ width: 50px;
+ height: 26px;
+ border-radius: 50px;
+ position: relative;
+ padding: 5px;
+ cursor: pointer;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.fa-moon {color: #f1c40f;}
+
+.fa-sun {color: #f39c12;}
+
+.dark-mode__toggle-label .dark-mode__ball {
+ background-color: #fff;
+ width: 22px;
+ height: 22px;
+ position: absolute;
+ left: 2px;
+ top: 2px;
+ border-radius: 50%;
+ transition: transform 0.2s linear;
+}
+
+.dark-mode__toggle:checked + .dark-mode__toggle-label .dark-mode__ball {
+ transform: translateX(24px);
+}
+
+.dark-mode {
+ color: var(--clr-white);
+}
+
+body.dark-mode {
+ background-color: var(--clr-dark-mode-body);
+}
+
+.results__result.dark-mode,
+.modal.dark-mode {
+ background-color: var(--clr-dark-mode-result);
+ border-color: var(--clr-dark-mode-modal-border);
+}
+
/* Screen sizes larger than mobile */
@media only screen and (min-width: 30rem) {
.search-section form {