Bug/issue 79

src/api/FactsController.js

@@ -4,7 +4,7 @@ export async function retrieveAnimalFact() {
   const randomAnimalType = animalTypes[randomNumber];
   const factUrls = {
     sentenceUrl: `https://cat-fact.herokuapp.com/facts/random?animal_type=${randomAnimalType}&amount=1`,
-    imageUrl: `https://api.the${randomAnimalType}api.com/v1/images/search?size=full`,
+    imageUrl: `https://api.the${randomAnimalType}api.com/v1/images/search?size=med`,
   };
 
   try {

src/components/Bubble/Bubble.css

@@ -10,6 +10,7 @@
 
   padding: 20px;
   margin-bottom: 30px;
+  min-height: 200px;
 
   background: var(--bubble-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
@@ -32,6 +33,22 @@
   font-size: 1.3em;
 }
 
+.bubble .bubble-img img {
+  border-radius: 8px;
+}
+
+.bubble.invisible,
+.bubble.invisible {
+  opacity: 0;
+}
+
+.bubble.fade-in,
+.bubble.fade-in {
+  opacity: 1;
+  transition: opacity 0.12s;
+  transition-timing-function: ease-in;
+}
+
 .bubble a {
   color: white;
 }

src/components/Bubble/Bubble.js

@@ -8,7 +8,7 @@ import './Bubble.css';
  * @param {string} header - header text in bubble
  * @param {Array.<string>} sentences - optional additional sentences in the bubble
  */
-export default function Bubble(bubblePosition, header, sentences = [], hasImage = false) {
+export default function Bubble(bubblePosition, header = '', sentences = [], hasImage = false) {
   const bubble = document.createElement('div');
   bubble.classList.add('bubble', bubblePosition);
 
@@ -20,9 +20,9 @@ export default function Bubble(bubblePosition, header, sentences = [], hasImage
 
 function renderImageContainer(bubble, hasImage) {
   if (hasImage) {
-    const bubbleImgContainer = document.createElement('div');
-    bubbleImgContainer.classList.add('bubble-img');
-    bubble.append(bubbleImgContainer);
+    const bubbleImageContainer = document.createElement('div');
+    bubbleImageContainer.classList.add('bubble-img');
+    bubble.append(bubbleImageContainer);
   } else {
     bubble.classList.add('no-image');
   }

src/views/MainPage/MainPage.js

@@ -7,9 +7,10 @@ import { onNavigationChange } from '../../components/router/Router';
 
 const PAGE_TITLE = 'ANIMALIADA';
 const MAIN_ANIMAL_IMG = { pathOrUrl: './kangoroo.png', alt: 'kangoroo that tells informations' };
+const FACT_HEADER = 'Did you know?';
 const AdoptionBubbleContent = {
-  IMG: { pathOrUrl: 'http://placekitten.com/300/400', alt: 'the animal to adoption' },
-  HEADER_TEXT: "Or maybe you'd like to adopt your own pet?",
+  IMG: { pathOrUrl: 'https://placedog.net/300/400?random', alt: 'the animal to adoption' },
+  HEADER_TEXT: "Maybe you'd like to adopt your own pet?",
   SENTENCES: ['This one is looking for home', 'See more here: <a href="#adoption-page">Adoption Page</a>'],
 };
 
@@ -60,20 +61,20 @@ function renderNavigation() {
 }
 
 function renderBubblesStructure() {
-  const bubbleFact = createFactBubble();
-  document.querySelector('.bubbles').append(bubbleFact);
   const bubbleAdoption = createAdoptionBubble();
   document.querySelector('.bubbles').append(bubbleAdoption);
+  const bubbleFact = createFactBubble();
+  document.querySelector('.bubbles').append(bubbleFact);
 }
 
 function createFactBubble() {
-  const bubbleFact = Bubble('higher', 'Did you know?', undefined, true);
-  bubbleFact.classList.add('fact');
+  const bubbleFact = Bubble('lower', '', undefined, true);
+  bubbleFact.classList.add('fact', 'invisible');
   return bubbleFact;
 }
 
 function createAdoptionBubble() {
-  const bubbleAdoption = Bubble('lower', AdoptionBubbleContent.HEADER_TEXT, AdoptionBubbleContent.SENTENCES, true);
+  const bubbleAdoption = Bubble('higher', AdoptionBubbleContent.HEADER_TEXT, AdoptionBubbleContent.SENTENCES, true);
   bubbleAdoption.classList.add('adoption');
   return bubbleAdoption;
 }
@@ -84,41 +85,54 @@ function renderBubblesContent() {
 }
 
 async function renderFactBubbleContent() {
-  const factObj = await getAnimalFact();
-  renderAnimalFact(factObj);
-  renderAnimalFactImg(factObj);
+  const imageFact = await getAnimalImageFact();
+  const imageObject = new Image();
+  imageObject.addEventListener(
+    'load',
+    () => {
+      const factBubble = document.querySelector('.bubble.fact');
+      renderAnimalFact(imageFact);
+      factBubble.classList.remove('invisible');
+      factBubble.classList.add('fade-in');
+    },
+    false,
+  );
+
+  renderAnimalFactImg(imageFact, imageObject);
 }
 
 function renderAdoptionBubbleContent() {
   renderAnimalAdoptionImg();
 }
 
-async function renderAnimalFact(factObj) {
-  const factSentenceItem = document.querySelector('.bubble.fact .bubble-text');
+function renderAnimalFact(fact) {
+  const factSentenceSpace = document.querySelector('.bubble.fact .bubble-text');
+  const factHeader = factSentenceSpace.querySelector('h2');
   const factSentence = document.createElement('p');
 
-  factSentence.innerText = factObj.sentence;
-  factSentenceItem.append(factSentence);
+  factHeader.innerText = FACT_HEADER;
+  factSentence.innerText = fact.sentence;
+  factSentenceSpace.append(factSentence);
 }
 
-function renderAnimalFactImg(factObj) {
-  const factImageItem = document.querySelector('.bubble.fact .bubble-img');
-  createImage(factImageItem, factObj);
+function renderAnimalFactImg(imageFact, imageObject) {
+  const factImageSpace = document.querySelector('.bubble.fact .bubble-img');
+  createImage(factImageSpace, imageFact, imageObject);
 }
 
 function renderAnimalAdoptionImg() {
-  const adoptionImageItem = document.querySelector('.bubble.adoption .bubble-img');
-  createImage(adoptionImageItem, AdoptionBubbleContent.IMG);
+  const adoptionImageSpace = document.querySelector('.bubble.adoption .bubble-img');
+  createImage(adoptionImageSpace, AdoptionBubbleContent.IMG);
 }
 
-function createImage(domElem, obj) {
-  const imgElem = document.createElement('img');
-  imgElem.src = obj.pathOrUrl;
-  imgElem.alt = obj.alt;
-  domElem.append(imgElem);
+function createImage(domElement, imageData, imageElement) {
+  const image = imageElement || document.createElement('img');
+  image.src = imageData.pathOrUrl;
+  image.alt = imageData.alt;
+  domElement.append(image);
 }
 
-async function getAnimalFact() {
+async function getAnimalImageFact() {
   const newImageFact = new ImageFact();
   const imageFact = await retrieveAnimalFact();
   newImageFact.sentence = imageFact.fact;