diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..8e452fbc
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 49093dd2..4409a02d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# Project Cinema
+# Project Cinema by Mariusz Sygnowski
-We want to create a movie search engine. To power it we will use the [Open Movie Database](http://www.omdbapi.com) API.
+[Click here](https://mariuszsygnowski.github.io/project-cinema/) to see live version.
To start using the OMDB API you will first need to sign up with them to receive and API key. The key issued to you will allow you 1000 requests per day and you will need to include this key as part of every request.
diff --git a/images/noPoster.jpg b/images/noPoster.jpg
new file mode 100644
index 00000000..f4be8721
Binary files /dev/null and b/images/noPoster.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..05996646
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+ Project Cinema by Mariusz Sygnowski
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 00000000..aa104fc0
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,125 @@
+const form = document.querySelector('#control__search'),
+ searchInput = document.querySelector('.control__search__input'),
+ results = document.querySelector('.results'),
+ buttonsClass = document.querySelector('.buttons'),
+ currentPageClasses = document.querySelectorAll('.currentPage'),
+ nextBtn = document.querySelector('.buttons__button-next'),
+ prevBtn = document.querySelector('.buttons__button-prev');
+
+let params = {
+ inputValue: searchInput.value,
+ pageNumber: 2,
+ totalPages: 0,
+ imdbID: '',
+ apiKey: 'f899a3c1'
+};
+
+form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ buttonsClass.style.display = 'none';
+ results.innerHTML = '';
+ params.pageNumber = 1;
+ params.totalPages = 0;
+ params.inputValue = searchInput.value;
+ runFetch();
+});
+
+nextBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ results.innerHTML = '';
+ buttonsClass.style.display = 'none';
+ if (params.pageNumber === params.totalPages) {
+ params.pageNumber = 1;
+ } else {
+ params.pageNumber++;
+ }
+
+ runFetch();
+});
+
+prevBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ results.innerHTML = '';
+ buttonsClass.style.display = 'none';
+ if (params.pageNumber === 1) {
+ params.pageNumber = params.totalPages;
+ } else {
+ params.pageNumber--;
+ }
+ runFetch();
+
+});
+
+function setUrlWithTypedSearch() {
+ return `https://www.omdbapi.com/?&plot=full&apikey=${params.apiKey}&s=${params.inputValue}&page=${params.pageNumber}`;
+}
+
+function setUrlForEachMovieWithImdbIDNumber() { //I need imdbID to get full details of every found movie
+ return `https://www.omdbapi.com/?i=${params.imdbID}&plot=full&apikey=${params.apiKey}&page=${params.pageNumber}`;
+}
+
+function runFetch() {
+ fetch(setUrlWithTypedSearch())
+ .then((response) => {
+ return response.json();
+ })
+ .then((body) => {
+ params.totalPages = body.totalResults / 10; //divide by as as there is 10 results per page
+ params.totalPages = Math.ceil(params.totalPages); //round up as I want to have all possible number of pages
+ currentPageClasses.forEach((currentPageClass) => {
+ currentPageClass.textContent = `page ${params.pageNumber} / ${params.totalPages}`;
+ });
+ body.Search.forEach(e => {
+ params.imdbID = e.imdbID;
+ fetch(setUrlForEachMovieWithImdbIDNumber())
+ .then((response) => {
+ return response.json();
+ })
+ .then((body) => {
+ // console.log(body);
+ buttonsClass.style.display = 'block';
+ let movieParams = {
+ description: body.Plot,
+ poster: body.Poster,
+ title: body.Title,
+ year: body.Year,
+ actors: body.Actors
+ };
+
+ let searchResult = document.createElement('div');
+ searchResult.className = 'results__searchResult';
+
+ if (movieParams.poster === 'N/A') { //if there is no poster then I use default image
+ movieParams.poster = 'images/noPoster.jpg';
+ }
+ if (movieParams.description === 'N/A') { //if there is no description I set
+ movieParams.description = '';
+ }
+
+ searchResult.innerHTML = `
+