https://github.com/sj22032003/geek-movie-closures

small project to teach students how to fetch movies with search and teach what closures are and how to use them
https://github.com/sj22032003/geek-movie-closures

closures fetch-api javascript

Last synced: about 1 month ago
JSON representation

small project to teach students how to fetch movies with search and teach what closures are and how to use them

• Host: GitHub
• URL: https://github.com/sj22032003/geek-movie-closures
• Owner: SJ22032003
• Created: 2024-03-20T14:23:18.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-22T14:31:21.000Z (9 months ago)
• Last Synced: 2024-04-25T00:20:47.529Z (8 months ago)
• Topics: closures, fetch-api, javascript
• Language: JavaScript
• Homepage:
• Size: 3.91 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Movie Search Application

This project is a simple movie search application that fetches data from the OMDB API. It allows users to search for movies and displays the results in a paginated format.

## Features

- Search movies by title

- Display movie details including title, year, and poster

- Pagination support

## Implementation Details

The project is implemented using vanilla JavaScript. It uses the `fetch` API to make requests to the OMDB API. The search functionality is debounced to limit the number of requests made to the API. This is achieved using closures in JavaScript.

### Closures

In this project, closures are used in the implementation of the debounce function. The debounce function limits the rate at which a function can fire. This is particularly useful in this case to limit the number of API requests made as the user types in the search input.

A closure is a function that has access to its own scope, the scope of the outer function, and the global scope. In the debounce function, a timer is initialized in the outer scope and the returned function has access to this timer due to closures. This allows the function to clear the timer and set a new one every time it is called.

## How to Use

To use the application, simply type in the movie title in the search input. The application will display the results as you type.

## Learning Outcomes

This project is a great way to understand the concept of closures in JavaScript and how to use them in real-world applications. It also provides a practical example of how to interact with APIs using the `fetch` API.