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?
}); // 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>
Please help me!
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){
}
// 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
}
});
}
om man fyller ̈ 2008 så är man 18 år gammal 2026'