Form data and image publishing

danielbatres · danielbatres · commit 62bcbd2d1148 · 2023-10-18T19:03:56.000-06:00
diff --git a/index.html b/index.html
@@ -3,8 +3,8 @@
 <head>
   <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 rel="stylesheet" href="./styles/styles.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">
@@ -19,9 +19,16 @@ <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>
+      <div class="buttonActions">
+        <button type="button" id="switchTheme">
+          <i class="fi fi-rr-swatchbook"></i> theme
+        </button>
+        <button type="button" id="githubButton">
+          <a href="https://github.com/danielbatres/api-rest-fundamentals-javascript" target="_blank">
+            <i class="fi fi-rr-code-compare"></i> Repositorio
+          </a>
+        </button>
+      </div>
       <section id="uploadingCat">
         <h2></h2>
         <form id="uploadingForm">
diff --git a/javascript/api.js b/javascript/api.js
@@ -26,8 +26,6 @@ async function postFavorite(imageId) {
   });
 
   if (!checkResponse(response)) return;
-
-  loadFavoriteCats();
 }
 
 async function removeFavorite(id) {
@@ -39,8 +37,19 @@ async function removeFavorite(id) {
   });
 
   if (!checkResponse(response)) return;
+}
+
+async function uploadPhoto() {
+  const formData = new FormData(form);
+
+  const response = await fetch(API_IMAGE_UPLOAD, {
+    method: "POST",
+    headers: {
+      'X-API-KEY': API_KEY
+    },
+    body: formData,
+  });
 
-  loadFavoriteCats();
 }
 
 async function checkResponse(response) {
diff --git a/javascript/constants.js b/javascript/constants.js
@@ -2,6 +2,7 @@ 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 API_IMAGE_UPLOAD = `${BASE_API_URL}images/upload`;
 const link = document.getElementById("currentTheme");
 const form = document.getElementById('uploadingForm');
 const catsReference = document.getElementById("cats");
diff --git a/javascript/dynamicContent.js b/javascript/dynamicContent.js
@@ -30,7 +30,13 @@ function addCatImage(sourceImage, imageId, isFavorite) {
     const removeFavoriteButton = document.createElement("button");
     removeFavoriteButton.type = "button";
     removeFavoriteButton.textContent = "Remove cat from favorites";
-    removeFavoriteButton.onclick = () => removeFavorite(imageId);
+    removeFavoriteButton.onclick = () => {
+      removeFavorite(imageId);
+
+      if (!isRandom) {
+        loadFavoriteCats();
+      }
+    };
 
     options.appendChild(removeFavoriteButton);
   }
@@ -53,7 +59,7 @@ function removeLoadingCards() {
 function addLoadingCards() {
   isLoading = true;
 
-  for (let i = 0; i < 10; i++) {
+  for (let i = 0; i < 20; i++) {
     addLoadingCard();
   }
 }
diff --git a/main.js b/main.js
@@ -18,12 +18,6 @@ async function loadFavoriteCats() {
   loadData(data, true);
 }
 
-async function uploadPhoto() {
-  const formData = new FormData(form);
-
-  console.log(formData.get('file'));
-}
-
 function setTheme() {
   isLightThemeColor = !isLightThemeColor;
 
diff --git a/styles/darkTheme.css b/styles/darkTheme.css
@@ -1,5 +1,5 @@
 :root {
-  --background-color: rgb(17, 17, 17);
+  --background-color: rgb(19, 19, 19);
   --title-color: rgb(255, 255, 255);
   --text-color: rgb(112, 112, 112);
   --light-color: rgb(66, 66, 66);
diff --git a/styles/elements.css b/styles/elements.css
@@ -13,6 +13,12 @@ ul li {
   font-weight: 300;
 }
 
+a {
+  text-decoration: none;
+  color: var(--background-color);
+  font-weight: 400;
+}
+
 button {
   padding: 8px 10px;
   border-radius: 8px;
@@ -22,6 +28,7 @@ button {
   font-family: var(--font-family);
   font-weight: 400;
   text-transform: capitalize;
+  cursor: pointer;
 }
 
 ul {
diff --git a/styles/lightTheme.css b/styles/lightTheme.css
@@ -1,7 +1,7 @@
 :root {
   --background-color: rgb(255, 255, 255);
   --title-color: rgb(27, 27, 27);
-  --text-color: rgb(66, 66, 66);
+  --text-color: rgb(143, 143, 143);
   --light-color: rgb(212, 212, 212);
   --first-loading-color: #f0f0f0;
   --second-loading-color: #c4c4c4;
diff --git a/styles/styles.css b/styles/styles.css
@@ -27,6 +27,13 @@ body {
   padding: 20px 10px;
 }
 
+.buttonActions {
+  display: flex;
+  justify-content: right;
+  gap: 8px;
+  padding: 10px 0;
+}
+
 #cats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
