From d14c380cdbe527544ff8949b0defd4e418ad6f34 Mon Sep 17 00:00:00 2001 From: Sylwia Date: Thu, 30 Dec 2021 18:03:40 +0100 Subject: [PATCH 1/4] Rendering all fact content after image is retrieved --- src/components/Bubble/Bubble.js | 2 +- src/views/MainPage/MainPage.js | 44 +++++++++++++++++++++------------ 2 files changed, 29 insertions(+), 17 deletions(-) diff --git a/src/components/Bubble/Bubble.js b/src/components/Bubble/Bubble.js index 606b59c..dd07685 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); diff --git a/src/views/MainPage/MainPage.js b/src/views/MainPage/MainPage.js index 234f60c..9b2fdbb 100644 --- a/src/views/MainPage/MainPage.js +++ b/src/views/MainPage/MainPage.js @@ -67,7 +67,7 @@ function renderBubblesStructure() { } function createFactBubble() { - const bubbleFact = Bubble('higher', 'Did you know?', undefined, true); + const bubbleFact = Bubble('higher', '', undefined, true); bubbleFact.classList.add('fact'); return bubbleFact; } @@ -85,37 +85,49 @@ function renderBubblesContent() { async function renderFactBubbleContent() { const factObj = await getAnimalFact(); - renderAnimalFact(factObj); - renderAnimalFactImg(factObj); + const imgElem = new Image(); + imgElem.addEventListener( + 'load', + () => { + renderAnimalFact(factObj); + }, + false, + ); + renderAnimalFactImg(factObj, imgElem); } function renderAdoptionBubbleContent() { renderAnimalAdoptionImg(); } -async function renderAnimalFact(factObj) { - const factSentenceItem = document.querySelector('.bubble.fact .bubble-text'); +function renderAnimalFact(factObj) { + const factSentenceSpace = document.querySelector('.bubble.fact .bubble-text'); + const factHeader = document.querySelector('.bubble.fact .bubble-text h2'); const factSentence = document.createElement('p'); + factHeader.innerText = 'Did you know?'; factSentence.innerText = factObj.sentence; - factSentenceItem.append(factSentence); + factSentenceSpace.append(factSentence); } -function renderAnimalFactImg(factObj) { - const factImageItem = document.querySelector('.bubble.fact .bubble-img'); - createImage(factImageItem, factObj); +function renderAnimalFactImg(factObj, imgElem) { + const factBubble = document.querySelector('.bubble.fact'); + factBubble.classList.add('fade-in'); + const factImageSpace = document.querySelector('.bubble.fact .bubble-img'); + + createImage(factImageSpace, factObj, imgElem); } 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(domElem, obj, imgElem) { + const img = imgElem || document.createElement('img'); + img.src = obj.pathOrUrl; + img.alt = obj.alt; + domElem.append(img); } async function getAnimalFact() { From 0c39c58cb151ffe0b4ce30796d8b63ef3b17c04e Mon Sep 17 00:00:00 2001 From: Sylwia Date: Fri, 31 Dec 2021 09:40:43 +0100 Subject: [PATCH 2/4] fade-in on the fact bubble --- src/components/Bubble/Bubble.css | 17 +++++++++++++++++ src/components/Bubble/Bubble.js | 6 +++--- src/views/MainPage/MainPage.js | 18 +++++++++++++----- 3 files changed, 33 insertions(+), 8 deletions(-) diff --git a/src/components/Bubble/Bubble.css b/src/components/Bubble/Bubble.css index 7f3a01c..4929dcd 100644 --- a/src/components/Bubble/Bubble.css +++ b/src/components/Bubble/Bubble.css @@ -10,6 +10,7 @@ padding: 20px; margin-bottom: 30px; + min-height: 150px; 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-text, +.bubble.invisible .bubble-img { + opacity: 0; +} + +.bubble.fade-in .bubble-text, +.bubble.fade-in .bubble-img { + opacity: 1; + transition: opacity 0.1s; + transition-timing-function: ease-in; +} + .bubble a { color: white; } diff --git a/src/components/Bubble/Bubble.js b/src/components/Bubble/Bubble.js index dd07685..c605da3 100644 --- a/src/components/Bubble/Bubble.js +++ b/src/components/Bubble/Bubble.js @@ -20,9 +20,9 @@ export default function Bubble(bubblePosition, header = '', sentences = [], hasI 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 9b2fdbb..c4896e3 100644 --- a/src/views/MainPage/MainPage.js +++ b/src/views/MainPage/MainPage.js @@ -7,6 +7,7 @@ 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?", @@ -68,7 +69,7 @@ function renderBubblesStructure() { function createFactBubble() { const bubbleFact = Bubble('higher', '', undefined, true); - bubbleFact.classList.add('fact'); + bubbleFact.classList.add('fact', 'invisible'); return bubbleFact; } @@ -102,20 +103,27 @@ function renderAdoptionBubbleContent() { function renderAnimalFact(factObj) { const factSentenceSpace = document.querySelector('.bubble.fact .bubble-text'); - const factHeader = document.querySelector('.bubble.fact .bubble-text h2'); + const factHeader = factSentenceSpace.querySelector('h2'); const factSentence = document.createElement('p'); - factHeader.innerText = 'Did you know?'; + factHeader.innerText = FACT_HEADER; factSentence.innerText = factObj.sentence; factSentenceSpace.append(factSentence); } function renderAnimalFactImg(factObj, imgElem) { const factBubble = document.querySelector('.bubble.fact'); - factBubble.classList.add('fade-in'); const factImageSpace = document.querySelector('.bubble.fact .bubble-img'); - createImage(factImageSpace, factObj, imgElem); + + imgElem.addEventListener( + 'load', + () => { + factBubble.classList.remove('invisible'); + factBubble.classList.add('fade-in'); + }, + false, + ); } function renderAnimalAdoptionImg() { From ca7b0aeebfa210b84b8aaee4f61612ba90c18ed8 Mon Sep 17 00:00:00 2001 From: Sylwia Date: Fri, 31 Dec 2021 10:07:10 +0100 Subject: [PATCH 3/4] some better variable names --- src/views/MainPage/MainPage.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/views/MainPage/MainPage.js b/src/views/MainPage/MainPage.js index c4896e3..93cb9bd 100644 --- a/src/views/MainPage/MainPage.js +++ b/src/views/MainPage/MainPage.js @@ -85,38 +85,38 @@ function renderBubblesContent() { } async function renderFactBubbleContent() { - const factObj = await getAnimalFact(); - const imgElem = new Image(); - imgElem.addEventListener( + const imageFact = await getAnimalImageFact(); + const imageObject = new Image(); + imageObject.addEventListener( 'load', () => { - renderAnimalFact(factObj); + renderAnimalFact(imageFact); }, false, ); - renderAnimalFactImg(factObj, imgElem); + renderAnimalFactImg(imageFact, imageObject); } function renderAdoptionBubbleContent() { renderAnimalAdoptionImg(); } -function renderAnimalFact(factObj) { +function renderAnimalFact(fact) { const factSentenceSpace = document.querySelector('.bubble.fact .bubble-text'); const factHeader = factSentenceSpace.querySelector('h2'); const factSentence = document.createElement('p'); factHeader.innerText = FACT_HEADER; - factSentence.innerText = factObj.sentence; + factSentence.innerText = fact.sentence; factSentenceSpace.append(factSentence); } -function renderAnimalFactImg(factObj, imgElem) { +function renderAnimalFactImg(imageFact, imageObject) { const factBubble = document.querySelector('.bubble.fact'); const factImageSpace = document.querySelector('.bubble.fact .bubble-img'); - createImage(factImageSpace, factObj, imgElem); + createImage(factImageSpace, imageFact, imageObject); - imgElem.addEventListener( + imageObject.addEventListener( 'load', () => { factBubble.classList.remove('invisible'); @@ -131,14 +131,14 @@ function renderAnimalAdoptionImg() { createImage(adoptionImageSpace, AdoptionBubbleContent.IMG); } -function createImage(domElem, obj, imgElem) { - const img = imgElem || document.createElement('img'); - img.src = obj.pathOrUrl; - img.alt = obj.alt; - domElem.append(img); +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; From cd75d17f5e5d2ab61c56eff1470a591013bcbcb0 Mon Sep 17 00:00:00 2001 From: Sylwia Date: Sun, 2 Jan 2022 13:47:13 +0100 Subject: [PATCH 4/4] Recommendations made and additional improvements of bubbles on the main page --- src/api/FactsController.js | 2 +- src/components/Bubble/Bubble.css | 12 ++++++------ src/views/MainPage/MainPage.js | 26 ++++++++++---------------- 3 files changed, 17 insertions(+), 23 deletions(-) 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 4929dcd..a578841 100644 --- a/src/components/Bubble/Bubble.css +++ b/src/components/Bubble/Bubble.css @@ -10,7 +10,7 @@ padding: 20px; margin-bottom: 30px; - min-height: 150px; + min-height: 200px; background: var(--bubble-color); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); @@ -37,15 +37,15 @@ border-radius: 8px; } -.bubble.invisible .bubble-text, -.bubble.invisible .bubble-img { +.bubble.invisible, +.bubble.invisible { opacity: 0; } -.bubble.fade-in .bubble-text, -.bubble.fade-in .bubble-img { +.bubble.fade-in, +.bubble.fade-in { opacity: 1; - transition: opacity 0.1s; + transition: opacity 0.12s; transition-timing-function: ease-in; } diff --git a/src/views/MainPage/MainPage.js b/src/views/MainPage/MainPage.js index 93cb9bd..8bc0d69 100644 --- a/src/views/MainPage/MainPage.js +++ b/src/views/MainPage/MainPage.js @@ -9,8 +9,8 @@ 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'], }; @@ -61,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', '', undefined, true); + 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; } @@ -90,10 +90,14 @@ async function renderFactBubbleContent() { imageObject.addEventListener( 'load', () => { + const factBubble = document.querySelector('.bubble.fact'); renderAnimalFact(imageFact); + factBubble.classList.remove('invisible'); + factBubble.classList.add('fade-in'); }, false, ); + renderAnimalFactImg(imageFact, imageObject); } @@ -112,18 +116,8 @@ function renderAnimalFact(fact) { } function renderAnimalFactImg(imageFact, imageObject) { - const factBubble = document.querySelector('.bubble.fact'); const factImageSpace = document.querySelector('.bubble.fact .bubble-img'); createImage(factImageSpace, imageFact, imageObject); - - imageObject.addEventListener( - 'load', - () => { - factBubble.classList.remove('invisible'); - factBubble.classList.add('fade-in'); - }, - false, - ); } function renderAnimalAdoptionImg() {