diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..1e267ed8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+# Ignore vscode files
+.vscode
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..73ef0e4c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,13 @@
+# JavaScript Project - App
+Find Your Movie App
+
+# API source
+https://imdb-api.com/api#SearchMovie-header
+
+# How to use
+
+Enter the title of the film you want to find in the search field.
+Wait a few seconds.
+Then click on the film you like to view more information about it.
+In addition to the first search suggestions, you will get other suggested movies based on the category of the movie you selected.
+You can navigate through your search results and suggestions using the pagination buttons.
diff --git a/assets/cinema.jpg b/assets/cinema.jpg
new file mode 100644
index 00000000..adbf5e59
Binary files /dev/null and b/assets/cinema.jpg differ
diff --git a/index.html b/index.html
index e69de29b..b48fdc86 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,74 @@
+
+
+
+ movie app
+
+
+
+
+ Find.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/scripts/main.js b/scripts/main.js
new file mode 100644
index 00000000..db39e1c8
--- /dev/null
+++ b/scripts/main.js
@@ -0,0 +1,281 @@
+"use strict";
+import loadPaging from "./pagination.js";
+import loadPagingSuggestions from "./pagination-suggestions.js";
+import scrollToDetailBox from "./scrolling.js";
+
+window.addEventListener("DOMContentLoaded", () => {
+ const apiKey = "k_pgd93xda"; // first api key
+ // const apiKey = "k_28x30ddn"; // third api key
+ // const apiKey = "k_n2nfzz4l"; // second api key
+ const insideDetailBox = document.getElementById("clicked-movie-id");
+ const inputSearchMovie = document.getElementById("search-movie");
+ const searchResultsMoviesContainer = document.getElementById("movies");
+ const searchResultsMovies = document.getElementById("results-movies");
+ const genresList = document.getElementById("genres-list");
+ const suggestedResultsListContainer =
+ document.getElementById("suggested-movies");
+ const suggestedResultsList = document.getElementById("suggested-results");
+ const urlAPI = `https://imdb-api.com/en/API/SearchMovie/${apiKey}`;
+ const urlDetailsAPI = `https://imdb-api.com/en/API/Title/${apiKey}`;
+ const advancedSearchUrl = `https://imdb-api.com/API/AdvancedSearch/${apiKey}`;
+
+ window.onload = function () {
+ document.getElementById("pagination-results").style.display = "none";
+ document.getElementById("pagination-suggestions").style.display = "none";
+ };
+
+ function init() {
+ inputSearchMovie.addEventListener("keyup", debounce(getMovies, 300));
+ // event listener on click movie id from titles list
+ searchResultsMovies.addEventListener("click", async (event) => {
+ const movieID = event.target.closest("a").id;
+ await getDetails(movieID);
+ scrollToDetailBox();
+ });
+ // event listener on click movie id for genres movies
+ suggestedResultsList.addEventListener("click", async (event) => {
+ const movieID = event.target.closest("a").id;
+ await getDetails(movieID);
+ scrollToDetailBox();
+ });
+ }
+ init();
+
+ // wait for execute
+ function debounce(callback, delay) {
+ let timeout;
+ return function () {
+ clearTimeout(timeout);
+ timeout = setTimeout(callback, delay);
+ };
+ }
+
+ // clear html target
+ function clearHtml(target) {
+ target.innerHTML = "";
+ }
+
+ //show loader
+ function showLoader(target) {
+ const loader = target.getElementsByClassName("loader-container");
+ loader[0].classList.add("visible");
+ }
+ // hide loader
+ function hideLoader(target) {
+ const loader = target.getElementsByClassName("loader-container");
+ loader[0].classList.remove("visible");
+ }
+
+ // search results
+ async function getMovies(movie) {
+ showLoader(searchResultsMoviesContainer);
+ const movieValue = inputSearchMovie.value;
+ const results = await fetch(`${urlAPI}/${movieValue}`)
+ .then((response) => response.json())
+ .then((data) => data.results)
+ .then((results) => {
+ hideLoader(searchResultsMoviesContainer);
+ document.getElementById("pagination-results").style.display = "flex";
+ // add pagintion
+ loadPaging(results.length, (pagingOptions) => {
+ clearHtml(searchResultsMovies);
+ const newArray = pageArraySplit(results, pagingOptions);
+ createMoviesDOM(newArray, searchResultsMovies);
+ });
+ })
+ .catch((error) => console.log(error));
+ }
+
+ // create movie list in DOM
+ function createMoviesDOM(movies, htmlTarget) {
+ for (const movie of movies) {
+ const movieElement = document.createElement("div");
+ movieElement.classList.add("selected-movie");
+ movieElement.setAttribute("id", "click-movie");
+ movieElement.innerHTML = `${movie.title} `;
+ movieElement.style.backgroundImage = `url(${movie.image})`;
+ movieElement.style.backgroundSize = "cover";
+ htmlTarget.appendChild(movieElement);
+ // movie title
+ const movieElementTitle = document.createElement("p");
+ movieElementTitle.classList.add("results-movies-title");
+ movieElementTitle.setAttribute("id", "click-movie");
+ movieElementTitle.innerHTML = `${movie.title} `;
+ movieElement.appendChild(movieElementTitle);
+ }
+ }
+
+ // get id from selected movie link and create div with details
+ async function getDetails(movieId) {
+ const details = await fetch(`${urlDetailsAPI}/${movieId}`)
+ .then((response) => response.json())
+ .then((data) => {
+ clearHtml(insideDetailBox);
+ createMovieDetailsDom(data);
+ if (data.genreList) {
+ const genres = transformGenresToApiParam(data.genreList); // " "
+ showSuggestions(genres);
+ }
+ })
+ .catch((error) => new Error("Details not found"));
+ }
+
+ // create selected from API details
+ function createMovieDetailsDom(data) {
+ insideDetailBox.classList.add("detail-conatiner");
+ //image
+ if (data.image) {
+ const detailBoxImage = document.createElement("div");
+ const title = data.title ? data.title : "";
+ detailBoxImage.innerHTML = `