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 @@
+
+ +

CatsBreeds

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);