feat(simpsons-quotes) : change some css

Author: gbasset

Simpsons-Quotes/main.js

@@ -1,14 +1,18 @@
 
 
-const loader = document.getElementById("loader");
 function getQuote() {
     const quoteText = document.getElementById('quoteText');
     const characterName = document.getElementById('characterName');
     const imageUrl = document.querySelector(".image");
+    const loader = document.getElementById("loader");
+    const quoteBox = document.querySelector('.quote-box');
+    loader.style.display = "block";
+    imageUrl.classList.remove('visible');
+    quoteBox.style.display = 'none';
     fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
         .then(response => response.json())
         .then(data => {
-    console.log("=>(main.js:20) data", data);
+            quoteBox.style.display = 'block';
             const quote = data[0].quote;
             const character = data[0].character;
             imageUrl.src = data[0].image;
@@ -19,5 +23,10 @@ function getQuote() {
         .catch(error => {
             console.error('Error fetching the quote:', error);
             document.getElementById('quoteText').innerText = 'Failed to fetch quote. Please try again.';
-        });
+        })
+        .finally( () => {
+                loader.style.display = "none";
+                quoteBox.style.display = "block";
+            });
+
 }

Simpsons-Quotes/style.css

@@ -31,6 +31,7 @@ h1{
     justify-content: center;
     text-align: center;
     width: 500px;
+    min-height: 350px;
 }
 #quoteText{
     font-size: larger;
@@ -76,6 +77,7 @@ img.visible {
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
+    margin-bottom: 10px;
 }
 
 .btn_class:focus {
@@ -106,14 +108,14 @@ img.visible {
 
 .loader {
     border: 8px solid #f3f3f3;
-    border-top: 8px solid #3498db;
+    border-top: 8px solid #ff001a;
     border-radius: 50%;
     width: 60px;
     height: 60px;
     animation: spin 1s linear infinite;
-    position: absolute;
+    /*position: absolute;*/
     top: 50%;
-    left: 50%;
+    margin: 60px auto 10px auto;
     transform: translate(-50%, -50%);
     display: none;
 }