scripts.js

const app = document.getElementById('root');

const logo = document.createElement('img');
logo.src = 'logo.png';

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.appendChild(logo);
app.appendChild(container);

var request = new XMLHttpRequest();

request.open('GET', "https://ghibliapi.herokuapp.com/films", true);

request.onload = function () {
    var data = JSON.parse(this.response);

    if (request.status >= 200 && request.status < 400) {
        data.forEach(movie => {
            // create a div with a class = card
            const card = document.createElement('div');
            card.setAttribute('class', 'card');

            // create a h1 and set text content to film's title
            const h1 = document.createElement('h1');
            h1.textContent = movie.title;

            // create a p and set text content to film's description
            const p = document.createElement('p');
            // limit the film's description to 300 characters
            movie.description = movie.description.substring(0, 300); 
            // end the textContent with ellipses (...)
            p.textContent = `${movie.description}...`;

            // append card to container element
            container.appendChild(card);

            // each card will contain h1 and p
            card.appendChild(h1);
            card.appendChild(p);

        });
    } else {
        const errorMessage = document.createElement('marquee');
        errorMessage.textContent = `Gah, it's not working!`;
        app.appendChild(errorMessage);
    }
}

request.send();