From 4b8282ecfb04c92fd44172c416884f6147eb710e Mon Sep 17 00:00:00 2001
From: Yevhenii Lukashov <115802889+EuJinnLucaShow@users.noreply.github.com>
Date: Wed, 8 Nov 2023 19:29:59 +0200
Subject: [PATCH] Summary

---
 src/css/closkcss.css          | 17 +++++++++--------
 src/index.html                |  3 +++
 src/index.js                  |  2 +-
 src/js/{cat-api.js => api.js} |  0
 src/js/clock.js               | 12 +++++-------
 5 files changed, 18 insertions(+), 16 deletions(-)
 rename src/js/{cat-api.js => api.js} (100%)

diff --git a/src/css/closkcss.css b/src/css/closkcss.css
index 9add1b3..c43b797 100644
--- 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
index 463ed1a..37f8e21 100644
--- 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
index 22fac15..07b2a72 100644
--- 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 b/src/js/api.js
similarity index 100%
rename from src/js/cat-api.js
rename to src/js/api.js
diff --git a/src/js/clock.js b/src/js/clock.js
index cbf2ac3..7bbe7d9 100644
--- 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);