Navigation styles and loading state

Author: danielbatres

index.html

@@ -4,6 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="./styles/styles.css">
+  <link rel="stylesheet" href="./styles/elements.css">
+  <link id="currentTheme" rel="stylesheet" href="./styles/lightTheme.css">
+  <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600&display=swap" rel="stylesheet">
@@ -16,6 +19,9 @@ <h1>Random cats app</h1>
       <p>
         Random cat viewer, choose the image you like the most and mark it as your favorite one
       </p>
+      <button type="button" id="switchTheme">
+        <i class="fi fi-rr-swatchbook"></i> theme
+      </button>
       <section id="uploadingCat">
         <h2></h2>
         <form id="uploadingForm">
@@ -27,17 +33,16 @@ <h2></h2>
       </section>
       <span id="error"></span>
       <ul>
-        <li>
+        <li id="randomCatsNavigation">
+          <i class="fi fi-rr-gallery"></i>
           Random cats
         </li>
-        <li>
+        <li id="favoriteCatsNavigation">
+          <i class="fi fi-rr-heart"></i>
           Favorites
         </li>
       </ul>
-      <section id="randomCats">
-      </section>
-      <h2>Favorite cats</h2>
-      <section id="favoriteCats">
+      <section id="cats">
       </section>
     </div>
   </div>

javascript/constants.js

@@ -2,7 +2,11 @@ const API_KEY = "live_l0ii654AjIwmoMG0NEH0vOPDbD5FllJPEqXF8HIB8nFxMXHhoq37OXCLnk
 const BASE_API_URL = "https://api.thecatapi.com/v1/";
 const API_URL = `${BASE_API_URL}images/search?limit=18`;
 const API_FAVOURITES_API = `${BASE_API_URL}favourites`;
+const link = document.getElementById("currentTheme");
 const form = document.getElementById('uploadingForm');
-const randomCatsReference = document.getElementById("randomCats");
-const favoriteCatsReference = document.getElementById("favoriteCats");
+const catsReference = document.getElementById("cats");
 const spanError = document.getElementById("error");
+const randomCatsNavigation = document.getElementById("randomCatsNavigation");
+const favoriteCatsNavigation = document.getElementById(
+  "favoriteCatsNavigation"
+);

javascript/dynamicContent.js

@@ -1,12 +1,14 @@
-function loadData(reference, data, isFavorite) {
+let isLoading = true;
+
+function loadData(data, isFavorite) {
   for (let i = 0; i < data.length; i++) {
-    const url = reference === favoriteCatsReference ? data[i].image.url : data[i].url;
+    const url = isFavorite ? data[i].image.url : data[i].url;
 
-    addCatImage(reference, url, data[i].id, isFavorite);
+    addCatImage(url, data[i].id, isFavorite);
   }
 }
 
-function addCatImage(reference, sourceImage, imageId, isFavorite) {
+function addCatImage(sourceImage, imageId, isFavorite) {
   const catArticle = document.createElement("article");
   const catImage = document.createElement("img");
   catImage.alt = "Random cat picture";
@@ -35,5 +37,30 @@ function addCatImage(reference, sourceImage, imageId, isFavorite) {
 
   catArticle.appendChild(options);
 
-  reference.appendChild(catArticle);
+  catsReference.appendChild(catArticle);
+}
+
+function removeLoadingCards() {
+  const loadingCards = document.querySelectorAll(".catLoading");
+
+  loadingCards.forEach(element => {
+    element.parentNode.removeChild(element);
+  });
+
+  isLoading = false;
 }
+
+function addLoadingCards() {
+  isLoading = true;
+
+  for (let i = 0; i < 10; i++) {
+    addLoadingCard();
+  }
+}
+
+function addLoadingCard() {
+  const catLoading = document.createElement('article');
+  catLoading.className = 'catLoading';
+
+  catsReference.appendChild(catLoading);
+}

main.js

@@ -1,19 +1,21 @@
+let isLightThemeColor = false;
+let isRandom = true;
+
 async function loadRandomCats() {
   const data = await fetchData(API_URL);
 
   if (data === null) return;
 
-  randomCatsReference.innerHTML = '';
-  loadData(randomCatsReference, data, false);
+  loadData(data, false);
 }
 
 async function loadFavoriteCats() {
   const data = await fetchData(API_FAVOURITES_API);
 
   if (data === null) return;
 
-  favoriteCatsReference.innerHTML = '';
-  loadData(favoriteCatsReference, data, true);
+  catsReference.innerHTML = '';
+  loadData(data, true);
 }
 
 async function uploadPhoto() {
@@ -22,12 +24,59 @@ async function uploadPhoto() {
   console.log(formData.get('file'));
 }
 
+function setTheme() {
+  isLightThemeColor = !isLightThemeColor;
+
+  if (isLightThemeColor) {
+    link.href = "./styles/lightTheme.css";
+  } else {
+    link.href = "./styles/darkTheme.css";
+  }
+}
+
+async function setContent(isRandomCats, firstRender) {
+  if (isRandom === isRandomCats || isLoading) {
+    if (!firstRender) return; 
+  }
+
+  selectNavigation(isRandomCats);
+  catsReference.innerHTML = "";
+  addLoadingCards();
+
+  if (isRandomCats) {
+    await loadRandomCats();
+  } else {
+    await loadFavoriteCats();
+  }
+
+  removeLoadingCards();
+
+  isRandom = isRandomCats;
+}
+ 
+function selectNavigation(isRandomCats) {
+  randomCatsNavigation.className = "";
+  favoriteCatsNavigation.className = "";
+
+  if (isRandomCats) {
+    randomCatsNavigation.className = "selectedNavigation";
+  } else {
+    favoriteCatsNavigation.className = "selectedNavigation";
+  }
+}
+
 async function main() {
+  const switchTheme = document.getElementById('switchTheme');
+  switchTheme.onclick = () => setTheme();
+
+  setTheme();
+
   const uploadButton = document.getElementById('upload');
   uploadButton.onclick = () => uploadPhoto();
+  randomCatsNavigation.onclick = () => setContent(true, false);
+  favoriteCatsNavigation.onclick = () => setContent(false, false); 
 
-  await loadRandomCats();
-  await loadFavoriteCats();
+  await setContent(true, true);
 }
 
 main();

styles/darkTheme.css

@@ -0,0 +1,8 @@
+:root {
+  --background-color: rgb(17, 17, 17);
+  --title-color: rgb(255, 255, 255);
+  --text-color: rgb(112, 112, 112);
+  --light-color: rgb(66, 66, 66);
+  --first-loading-color: #3c3c3c;
+  --second-loading-color: #242424;
+}

styles/elements.css

@@ -0,0 +1,95 @@
+h1 {
+  margin-bottom: 6px;
+}
+
+h1,
+h2 {
+  color: var(--title-color);
+}
+
+p,
+ul li {
+  color: var(--text-color);
+  font-weight: 300;
+}
+
+button {
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: none;
+  background: var(--title-color);
+  color: var(--background-color);
+  font-family: var(--font-family);
+  font-weight: 400;
+  text-transform: capitalize;
+}
+
+ul {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  list-style: none;
+  border-top: 1px solid var(--light-color);
+}
+
+ul li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  padding: 20px;
+  cursor: pointer;
+}
+
+.selectedNavigation {
+  border-top: 3px solid var(--title-color);
+  color: var(--title-color);
+}
+
+article {
+  position: relative;
+  height: 350px;
+}
+
+.options {
+  position: absolute;
+  top: 0;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.1);
+  transition: display 2s ease-in-out;
+}
+
+article:hover .options {
+  display: flex;
+}
+
+.options button {
+  cursor: pointer;
+}
+
+article img {
+  width: 100%;
+  height: 350px;
+  object-fit: cover;
+  border-radius: 1px;
+}
+
+.catLoading {
+  background: linear-gradient(90deg, var(--first-loading-color) 0%, var(--second-loading-color) 50%, var(--first-loading-color) 75%);
+  background-size: 200% 100%;
+  animation: loading 1.6s infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}

styles/lightTheme.css

@@ -0,0 +1,8 @@
+:root {
+  --background-color: rgb(255, 255, 255);
+  --title-color: rgb(27, 27, 27);
+  --text-color: rgb(66, 66, 66);
+  --light-color: rgb(212, 212, 212);
+  --first-loading-color: #f0f0f0;
+  --second-loading-color: #c4c4c4;
+}