.js

// http://www.omdbapi.com/?s=superman&apikey=564727fa
// s and apiKey are called query strings 

let moviesList = document.getElementById("moviesList")

let request = new XMLHttpRequest() 

// OPTION 1
/*
request.addEventListener('load',function() {

}) */

// OPTION 2
request.onload = function() {

    // parse the text as JavaScript Object
    let result = JSON.parse(this.responseText)

    let liItems = result.Search.map((movie) => {
        return `<li>
                 <label>${movie.Title}</label>
                 <img src=${movie.Poster}/>
                </li>`
    })

    // converting liItems array to a string and then assigning to the ul
    moviesList.innerHTML = liItems.join("")

    console.log(liItems)

}

request.open("GET","http://www.omdbapi.com/?s=superman&apikey=564727fa")
request.send()