tar -xzf movie-search.tar.gz

node -v

sudo apt install node.js 

python -m http.server

const API_URL =XXX
const IMG_PATH = 'https://image.tmdb.org/t/p/w500'
const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=XXX&query="'

const main =  XXX
const form = XXX
const search = XXX

function getMovies(url) {
    fetch(url)
        .then(response => response.json())
        .then(data => {
            showMovies(data.results);
        })
        .catch(error => {
            console.error('Error fetching movies:', error);
        });
}

for each movie element in the DOM using innerHTML.

function showMovies(movies) {
    main.innerHTML = ''

    movies.forEach((movie) => {
        const { title, poster_path, vote_average, overview } = movie

        const movieEl = document.createElement('div')
        movieEl.classList.add('movie')

        movieEl.innerHTML = `
            <img src="${IMG_PATH + poster_path}" alt="${title}">
            <div class="movie-info">
          <h3>${title}</h3>
          <span class="${getClassByRate(vote_average)}">${vote_average}</span>
            </div>
            <div class="overview">
          <h3>Overview</h3>
          ${overview}
        </div>
        `
        main.appendChild(movieEl)
    })
}

The utility function getClassByRate changes the color of the vote to blue if it's equal 8 or higher, black if it's equal 5 or higher, and orange otherwise, indicating it's not recommended to see. Fill in the if-else statement appropriately:

function getClassByRate(vote) {
    

}

Here we create the listener that detects the search submit. We need a function here to handle our event object. Fill in the missing method by replacing the XXX with the appropriate one.

// Get initial movies
getMovies(API_URL_HOME)

form.XXX('submit', (e) => {
    e.preventDefault()

    const searchTerm = search.value // we create a var with the search term

    if(searchTerm && searchTerm !== '') { // and if the term exists 
        getMovies(SEARCH_API + searchTerm)

        search.value = ''
    } else {
        window.location.reload()
    }
})

Then, whatever we type in the search area will be appended to the search API to retrieve a response. Subsequently, the page reloads with the results. Feel free to search for any movie names in the search box and press enter! Resize the browser to inspect the flex effect, review these options in the css file.

When using an API key in JavaScript to access an API, we need to follow security best practices to protect the API key and prevent misuse.

Here's a guide on how to securely handle API keys in JavaScript:

In summary, this application serves to demonstrate how to utilize third-party REST APIs, how to use Fetch, and how to insert data into the DOM for viewing. When our API keys are hardcoded into JS code, they become easily accessible to anyone who views the source code. Therefore, we will use a technique to secure our API calls by using Environment Variables in Server-Side Code Only.

Without this technique, it could result in theft or misuse by attackers who may use the API key for malicious purposes, such as accessing sensitive data or performing unauthorized actions.

We make our JS code more secure by learning how to save our API key in a .env file and keep it secure and separate for the rest of the code on the server. To ensure that the sensitive API keys and URLs are only accesible on the server-side and not exposed to the clients we need to modify our script.js and create a server.js file. We will remove the direct usage of the API URLs and key and replace them with variables that will later inject from the server-side.

Fetching enviromental variables from the server allows more dynamic configuration and separates client-side code improving our code maintainability. The implementation also needs use of HTTPS to hide our environment variables transmitted over the network. We will explore this technique in a following lab.

Locally on our lab machine we need to install nodejs and dotenv package in the application folder:

sudo apt install nodejs

sudo apt install npm

npm install dotenv

(Tip: More info can befound on this page: https://www.npmjs.com/package/dotenv)

Follow the next steps:

1. Create a new file in the project's directory and name it .env

2. Inside the .env file define the API key. For example use MOVIES_API_KEY. Then assign the value of the API key.

(Tip: If we commit to a repository don't forget to add the .env to the .gitignore file to prevent the API key to be commited to the repository.)

3. Replace the API key inside the code by using an enviromental variable.

(Tip: In some case we want to encrypt the .env to add more security to the implementation.)

This setup ensures that our API key is securely loaded from the .env file and is not hardcoded in our JavaScript code.

In the script.js remove direct usage of the API URL and replace them with variables that will later inject from the server. For example:

const API_URL_HOME = "{{API_URL_HOME}}";
const API_URL = "{{API_URL}}";

In the root folder create a server.js file to instruct how to use the API URLs and serve them to the client. The client-side JavaScript code cannot directly access the API URLs, we verify with the browser inspector tool.

In the server.js import the Node.js modules as variables: http, fs, path, dotenv.

Use the dotenv module to load variables from an .env file into a process.env object. With this object we ensure the store of our sensitive API key. In our code define a port for our server to listen on. FOr example:

const PORT = process.env.PORT || 3000;

Use a method to create an HTTP server that can take a callback function as an argument. This method should be invoked in every request to the server. Then determine the requested file path on the URL in the request with fs.readFile() This will read the requested file asynchronously. Then ensure the correct contect type for the HTTP response headers. Next step is to serve our static files such as the HTML, CSS, JS file and images. use the fs.readFile().

Finally, start the server with the server.listen() method for example:

server.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Now we have an HTTP server ready to serve static files and handle users request'. Don't forget to keep the project stracture as follows:

project/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── img/
│   └── favicon.ico
│   └── logo_TMDB.svg
└── server.js

We access our application by going to our project directory and in the terminal run the following command:

node server.js

If we are not getting any errors we can access then the application in the browser by navigating to http://localhost:3000

Extras

Now we've got a basic site up and running keep working on it... here are some ideas of where to go next:

• Make it faster, make the code clearer!
• Can we add a separate page for TV series?
• Add more information about the movies to the DOM. The database contains a lot more stuff!