I thought of using the Fetch Api as an upgrade from the traditional w…

ghibli/scripts.js

@@ -8,7 +8,7 @@ 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 () {
@@ -38,4 +38,37 @@ request.onload = function () {
   }
 }
 
-request.send();
+request.send();
+*/
+//using the fetch api to send our request returns promise
+fetch(' https://ghibliapi.herokuapp.com/films')
+.then((response) => {
+  //returning it in json format
+  return response.json()
+})
+.then((data)=>{
+  data.forEach((movie) => {
+    //display our data from the api to the DOM
+    // Create a div with a card class
+  const card = document.createElement('div')
+  card.setAttribute('class', 'card')
+
+  // Create an h1 and set the text content to the film's title
+  const h1 = document.createElement('h1')
+  h1.textContent = movie.title
+
+  // Create a p and set the text content to the film's description
+  const p = document.createElement('p')
+  movie.description = movie.description.substring(0, 300) // Limit to 300 chars
+  p.textContent = `${movie.description}...` // End with an ellipses
+
+  // Append the cards to the container element
+  container.appendChild(card)
+
+  // Each card will contain an h1 and a p
+  card.appendChild(h1)
+  card.appendChild(p)
+})
+}).catch((err)=>{
+  console.log('error')
+})