Summary

EuJinnLucaShow · Nov 8, 2023 · 4b8282e · 4b8282e
1 parent f3ca3ec
commit 4b8282e
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 16 deletions.
diff --git a/src/css/closkcss.css b/src/css/closkcss.css
@@ -51,8 +51,8 @@ body {
 		inset 0 15px 15px rgba(0, 0, 0, 0.3);
 	transition: all ease 0.2s;
     position: fixed;
-    top: 1%;
-    left: 1%;
+    top: 10px;
+    left: 10px;
 }
 .clock:before {
 	content: "";
@@ -108,17 +108,18 @@ body {
 	border-radius: 2px;
 }
 
-/* Style for theme switch btn */
-.switch-cont {
-	margin: 2em auto;
-	/* position: absolute; */
-	bottom: 0;
+
+.switch-cont {	
+	position: absolute;
+	top: 150px;
+	left: 40px;
 }
 .switch-cont .switch-btn {
 	font-family: monospace;
 	text-transform: uppercase;
 	outline: none;
-	padding: 0.5rem 1rem;
+	width: 70px;
+	padding: 8px 16px;
 	background-color: var(--main-bg-color);
 	color: var(--main-text-color);
 	border: 1px solid var(--main-text-color);

diff --git a/src/index.html b/src/index.html
@@ -21,6 +21,9 @@
     <div class="min"></div>
     <div class="sec"></div>
   </div>
+  <div class="switch-cont">
+    <button class="switch-btn"> Light </button>
+  </div>
   <h1 class="title"><span class="span-cats">Cats</span><span class="span-breeds">Breeds</span></h1>
   <select id="breed-select"></select>
   <div class="cat-info"></div>

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,5 @@
 import SlimSelect from 'slim-select';
-import { fetchBreeds, fetchCatByBreed } from './js/cat-api.js';
+import { fetchBreeds, fetchCatByBreed } from './js/api.js';
 import iziToast from 'izitoast';
 import 'izitoast/dist/css/iziToast.min.css';
 import noImage from './image/no_image.png'

diff --git a/src/js/cat-api.js → src/js/api.js b/src/js/cat-api.js → src/js/api.js
diff --git a/src/js/clock.js b/src/js/clock.js
@@ -1,5 +1,3 @@
-// Just noticed accessing localStorage is banned from codepen, so disabling saving theme to localStorage
-
 const deg = 6;
 const hour = document.querySelector(".hour");
 const min = document.querySelector(".min");
@@ -25,11 +23,11 @@ const switchTheme = (evt) => {
 	const switchBtn = evt.target;
 	if (switchBtn.textContent.toLowerCase() === "light") {
 		switchBtn.textContent = "dark";
-		// localStorage.setItem("theme", "dark");
+		localStorage.setItem("theme", "dark");
 		document.documentElement.setAttribute("data-theme", "dark");
 	} else {
 		switchBtn.textContent = "light";
-		// localStorage.setItem("theme", "light"); //add this
+		localStorage.setItem("theme", "light"); //add this
 		document.documentElement.setAttribute("data-theme", "light");
 	}
 };
@@ -38,9 +36,9 @@ const switchModeBtn = document.querySelector(".switch-btn");
 switchModeBtn.addEventListener("click", switchTheme, false);
 
 let currentTheme = "dark";
-// currentTheme = localStorage.getItem("theme")
-// 	? localStorage.getItem("theme")
-// 	: null;
+currentTheme = localStorage.getItem("theme")
+	? localStorage.getItem("theme")
+	: null;
 
 if (currentTheme) {
 	document.documentElement.setAttribute("data-theme", currentTheme);