Skip to content
Please help me!
Profile icon
AminRahbar

The JS code must give results on images based on my search. When I press the '' Check it out '' button. But I don't know why it doesn't work. Is going on and going crazy. Can anyone please help me?

Here is the code for my index.html:

Document Check it out!

And here is the JS code:

/* key: 6fe0f00f1b45b293a5d059e64dbeb058
secret: cdabaa93dd646b1f
*/

document.getElementById("searchButton").addEventListener("click", async () => {
let images = await getImages();
createPhotos(images);

}); // anropar getImages functionen på klick av knapp och lägger det i image variabeln

// Anropa denna function med Await // Varför
async function getImages(img){

const apiKey = '6fe0f00f1b45b293a5d059e64dbeb058'; // En nyckel för att APIet ska kunna hålla reda på vem som gör requests let method = 'flickr.photos.search'; // Instruktion till APIet att söka på foton let text = document.getElementById("wordKey").value; // Det som står i inputfältet const baseUrl = 'https://api.flickr.com/services/rest/'; // Addressen till APIet const imgPerPage = 20; // hur många bilder som ska visas let currentPage = 1; let url = `https:farm${img.farm}.staticflickr.com/${img.server}/${img.id}_${img.secret}_[z].jpg`; try { let resp = await fetch(url); // Anropar fetch med den URLn // Behöver inte använda ".then" let data = await resp.json(); // Gör om datan från JSON till ett JavaScript-Objekt, behöver inte använda JSON.parse() console.log(data); return data; // // Återvänder till där du anropade getImages() och returnerar objektet } catch(err) { console.error(err); }

}

// Fixar en funktion för bildernas storlek!
function imgUrl(img, size){
let imgSize = 'z';
if(size == 'thumb') { imgSize = 'q'}
if(size == 'large') { imgSize = 'b'}

}

// Så här skapar man ett HTML element med JavaScript DOM
function createPhotos(data){

let main = document.querySelector('main');
main.innerHTML = '';

data.photos.photo.forEach(img => { // om man hämtar från flickr så borde det se ut så här

// För att skapa ett img element i JS

if(img.farm !== 0) { // om flickr

let imgUrl = `https://farm${img.farm}.staticflickr.com/${img.server}/${img.id}_${img.secret}.jpg`; let el = document.createElement('img'); el.setAttribute('src', imgUrl); // Denna sträng pusslas ihop med data från objektet som skapas i API anropet https://farm${img.farm}.staticflickr.com/${img.server}/${img.id}_${img.secret}_[z].jpg el.setAttribute('alt', img.title); // Från API anropet data.photos.photo.title main.appendChild(el); // Lägger in img elementet mellan <main> </main>

}

});
}

You are viewing a single comment. View All
Profile icon
mwilki7

Could you paste a link to the repl?

Profile icon
UzayAnil

I feel like that too

@mwilki7