What I want to do is receive some photos using the NASA API. These photos are then displayed on my page's thumbnail and main display.
I just figured out why the code doesn't get the image from the thumbnail and display it on the page. I also use template websites in HTML5 and above. I'm not very familiar with the code. Any help is greatly appreciated.
So the way the site seems to work is that it takes the image src and tag href values to display them in both the thumbnail and the main display. I'm using fetch requests to get NASA API information. I then use the data.map method to overwrite the HTML code and insert my own HTML.
My idea is that if I overwrite the previous HTML with the HTML from the get request, it will work fine. but it is not the truth.
Also attached is a replit link to view the entire site in real time: https://replit.com/@jamesYamez/nasa-api#nasa-api-site/index.html
I think the main mistake is
Uncaught TypeError: newSlide is not defined
fetch(url) .then(req => req.json()) .then((data)=> { //using map to assign the data values to the html let html = data.map(item => ` <article> <a class="thumbnail" href="${item.hdurl}" data-position="left center" target="_blank"><img src="${item.url}" alt="..." /></a> <h2>${item.title}</h2> <p>${item.explanation}</p> </article> `) thumbnails.innerHTML = html.join("") }) .catch((e) => console.error(e))
P粉5556967382024-04-07 00:55:23
You can try this code, but your css/styles will need to adequately resize the image
sssccc
Edit: Use modal to open image in same page
Document ssscccsssccc