# Movie Info App - OMDb API

---
tags: Javascript relate
---

###### tags: `Javascript, jQuery`

# 製作一個尋找電影的網站

## 成品:


[成品網址]()

## 成品功能:

1.搜尋欄位可以尋找電影
2.找到之後會有另外出現一個頁面取代當前頁面
3.並且具有IMBD的超連結，還有回到搜尋頁功能

# HTML

* 本網站有換頁功能
* 連接點使用JS處理(詳見下方`movieSelected()`)

[index.html](https://github.com/chiehLiu/git-projects/blob/gh-pages/MovieInfoApp/index.html)
[movie.html](https://github.com/chiehLiu/git-projects/blob/gh-pages/MovieInfoApp/movie.html)
# CSS:

* 主要處理width
* dispaly
* 文字圖片高度處理

[css 程式碼](https://github.com/chiehLiu/git-projects/blob/gh-pages/MovieInfoApp/css/main.css)

# 取得OMDb API:

[OMDb API](http://www.omdbapi.com/apikey.aspx?__EVENTTARGET=freeAcct&__EVENTARGUMENT=&__LASTFOCUS=&__VIEWSTATE=%2FwEPDwUKLTIwNDY4MTIzNQ9kFgYCAQ9kFgICBw8WAh4HVmlzaWJsZWhkAgIPFgIfAGhkAgMPFgIfAGhkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYDBQtwYXRyZW9uQWNjdAUIZnJlZUFjY3QFCGZyZWVBY2N0oCxKYG7xaZwy2ktIrVmWGdWzxj%2FDhHQaAqqFYTiRTDE%3D&__VIEWSTATEGENERATOR=5E550F58&__EVENTVALIDATION=%2FwEdAAU%2BO86JjTqdg0yhuGR2tBukmSzhXfnlWWVdWIamVouVTzfZJuQDpLVS6HZFWq5fYpioiDjxFjSdCQfbG0SWduXFd8BcWGH1ot0k0SO7CfuulHLL4j%2B3qCcW3ReXhfb4KKsSs3zlQ%2B48KY6Qzm7wzZbR&at=freeAcct&Email=)


# JS:

## functions:

### `getMovies()`

使用 `$.ajax()` 方法
印出response之後取用裡面的資料並且填入DOM
主要使用資料有


* movie.Poste
* movie.Title
* movie.imdbID

使用 `$.each(movies, (index, movie)` 逐個印出

* movies代表所有搜尋到的資料
* index 索引的部分也可以取得不過這邊沒有使用到
* movie 代表每一個被印出去的value

---

### `movieSelected()`

特別注意 `s=${searchText}`
s的參數代表搜尋藉著電影title來尋找

`url: http://www.omdbapi.com/?s=${searchText}&apikey=c8fa2a97`

主要作用在於儲存電影id以及換頁

1.`sessionStorage`


跟LocalStorage很像會把資料存到Application裡面並且
存放在 sessionStorage 的資料會在頁面結束時清空(也就是我們想要的結果)

主要使用的方法有
* `setItem` 把資料存入
* `getItem` 取出資料做使用

2.`window.location = 'movie.html';`

點擊按鈕後轉後到下一個html頁面

---
### `getMovie()`

特別注意 `i=${movieId}`
i的參數代表搜尋藉著電影id來尋找
`url: https://www.omdbapi.com/?i=${movieId}&apikey=c8fa2a97`

處理得跟getMovies()差不多

* 提取資料
* 填入DOM
* 製作兩個按鈕1.超連結去IMBD 2.回到搜尋頁

---
## 事件監聽

$('#searchForm').submit((e) => {
        e.preventDefault();
        let searchText = $('#searchText').val();
        getMovies(searchText);
    });

* 主要處理在searchForm的輸入的值
* 把收集到的值填入getMovues()

## JS完整程式碼:

$(document).ready(() => {
    $('#searchForm').submit((e) => {
        e.preventDefault();
        let searchText = $('#searchText').val();
        getMovies(searchText);


    });
});

function getMovies(searchText) {
    $.ajax({
        type: "GET",
        url: `http://www.omdbapi.com/?s=${searchText}&apikey=c8fa2a97`,
        dataType: "json",
        success: function (res) {
            console.log(res);
            let movies = res.Search;
            console.log(movies);
            let output = '';

            $.each(movies, (index, movie) => {
                output += `
                <div class="col-md-3">
                  <div class="well text-center">
                    <img src="${movie.Poster}">
                    <h5>${movie.Title}</h5>
                    <a onclick="movieSelected('${movie.imdbID}')" class="btn btn-primary" href="#">Movie Details</a>
                  </div>
                </div>
              `;
            });
            $('#movies').html(output);
        },
        error: function (err) {
            console.log(err);
        }
    })
};

function movieSelected(id) {
    sessionStorage.setItem('movieId', id);
    window.location = 'movie.html';
    return false;
}

function getMovie() {
    let movieId = sessionStorage.getItem('movieId');

    $.ajax({
        type: "GET",
        url: `http://www.omdbapi.com/?i=${movieId}&apikey=c8fa2a97`,
        dataType: "json",
        success: function (res) {
            let movie = res;
            console.log(movie);
            let output = `
                <div class="row">
                  <div class="col-md-4">
                    <img src="${movie.Poster}" class="thumbnail">
                  </div>
                  <div class="col-md-8">
                    <h2>${movie.Title}</h2>
                    <ul class="list-group">
                      <li class="list-group-item"><strong>Genre:</strong> ${movie.Genre}</li>
                      <li class="list-group-item"><strong>Released:</strong> ${movie.Released}</li>
                      <li class="list-group-item"><strong>Rated:</strong> ${movie.Rated}</li>
                      <li class="list-group-item"><strong>IMDB Rating:</strong> ${movie.imdbRating}</li>
                      <li class="list-group-item"><strong>Director:</strong> ${movie.Director}</li>
                      <li class="list-group-item"><strong>Writer:</strong> ${movie.Writer}</li>
                      <li class="list-group-item"><strong>Actors:</strong> ${movie.Actors}</li>
                    </ul>
                  </div>
                </div>
                <div class="row">
                  <div class="well">
                    <h3>Plot</h3>
                    ${movie.Plot}
                    <hr>
                    <a href="http://imdb.com/title/${movie.imdbID}" target="_blank" class="btn btn-primary">View IMDB</a>
                    <a href="index.html" class="btn btn-default">Go Back To Search</a>
                  </div>
                </div>
              `;

            $('#movie').html(output);

        },
        error: function (err) {
            console.log(err);
        }
    })
}