diff --git a/src/api/FactsController.js b/src/api/FactsController.js index ec2f24b..40018d9 100644 --- a/src/api/FactsController.js +++ b/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 { diff --git a/src/components/Bubble/Bubble.css b/src/components/Bubble/Bubble.css index 7f3a01c..a578841 100644 --- a/src/components/Bubble/Bubble.css +++ b/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; } diff --git a/src/components/Bubble/Bubble.js b/src/components/Bubble/Bubble.js index 606b59c..c605da3 100644 --- a/src/components/Bubble/Bubble.js +++ b/src/components/Bubble/Bubble.js @@ -8,7 +8,7 @@ import './Bubble.css'; * @param {string} header - header text in bubble * @param {Array.} 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'); } diff --git a/src/views/MainPage/MainPage.js b/src/views/MainPage/MainPage.js index 234f60c..8bc0d69 100644 --- a/src/views/MainPage/MainPage.js +++ b/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: Adoption Page'], }; @@ -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;