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))