prof3ssorSt3v3/sample-tmdb.html

## sample-tmdb.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Using TheMovieDB</title>
    <meta name="viewport" content="width=device-width">
    <!-- API version 3 documentation:
        https://developers.themoviedb.org/3/search
        https://developers.themoviedb.org/3/movies
    -->
</head>
<body>
    <h1>Using TheMovieDB.org API v3</h1>
    <p><img src="https://image.tmdb.org/t/p/w185/l1yltvzILaZcx2jYvc5sEMkM7Eh.jpg" alt="Jaws"/></p>
    <div id="output">
        <!-- output will go here -->
    </div>

    <script src="./js/key.js"></script>
    <script>
        /*************
        SAMPLE URLS

        1. To get the config data like image base urls
        https://api.themoviedb.org/3/configuration?api_key=<APIKEY>

        2. To fetch a list of movies based on a keyword
        https://api.themoviedb.org/3/search/movie?api_key=<APIKEY>&query=<keyword>

        3. To fetch more details about a movie
        https://api.themoviedb.org/3/movie/<movie-id>?api_key=<APIKEY>
        *************/
        //const APIKEY is inside key.js
        let baseURL = 'https://api.themoviedb.org/3/';
        let configData = null;
        let baseImageURL = null;

        let getConfig = function () {
            let url = "".concat(baseURL, 'configuration?api_key=', APIKEY);
            fetch(url)
            .then((result)=>{
                return result.json();
            })
            .then((data)=>{
                baseImageURL = data.images.secure_base_url;
                configData = data.images;
                console.log('config:', data);
                console.log('config fetched');
                runSearch('jaws')
            })
            .catch(function(err){
                alert(err);
            });
        }

        let runSearch = function (keyword) {
            let url = ''.concat(baseURL, 'search/movie?api_key=', APIKEY, '&query=', keyword);
            fetch(url)
            .then(result=>result.json())
            .then((data)=>{
                //process the returned data
                document.getElementById('output').innerHTML = JSON.stringify(data, null, 4);
                //work with results array...

            })
        }

        document.addEventListener('DOMContentLoaded', getConfig);
        /*******************************
        SAMPLE SEARCH RESULTS DATA
        { "vote_count": 2762,
            "id": 578,
            "video": false,
            "vote_average": 7.5,
            "title": "Jaws",
            "popularity": 16.273358,
            "poster_path": "/l1yltvzILaZcx2jYvc5sEMkM7Eh.jpg",
            "original_language": "en",
            "original_title": "Jaws",
            "genre_ids": [ 27, 53, 12 ],
            "backdrop_path": "/slkPgAt1IQgxZXNrazEcOzhAK8f.jpg",
            "adult": false,
            "overview": "An insatiable great white shark terrorizes the townspeople of Amity Island, The police chief, an oceanographer and a grizzled shark hunter seek to destroy the bloodthirsty beast.",
            "release_date": "1975-06-18"
        }
        *******************************/
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Using TheMovieDB</title>
	<meta name="viewport" content="width=device-width">
	<!-- API version 3 documentation:
	https://developers.themoviedb.org/3/search
	https://developers.themoviedb.org/3/movies
	-->
	</head>
	<body>
	<h1>Using TheMovieDB.org API v3</h1>
	<p><img src="https://image.tmdb.org/t/p/w185/l1yltvzILaZcx2jYvc5sEMkM7Eh.jpg" alt="Jaws"/></p>
	<div id="output">
	<!-- output will go here -->
	</div>

	<script src="./js/key.js"></script>
	<script>
	/*************
	SAMPLE URLS

	1. To get the config data like image base urls
	https://api.themoviedb.org/3/configuration?api_key=<APIKEY>

	2. To fetch a list of movies based on a keyword
	https://api.themoviedb.org/3/search/movie?api_key=<APIKEY>&query=<keyword>

	3. To fetch more details about a movie
	https://api.themoviedb.org/3/movie/<movie-id>?api_key=<APIKEY>
	*************/
	//const APIKEY is inside key.js
	let baseURL = 'https://api.themoviedb.org/3/';
	let configData = null;
	let baseImageURL = null;

	let getConfig = function () {
	let url = "".concat(baseURL, 'configuration?api_key=', APIKEY);
	fetch(url)
	.then((result)=>{
	return result.json();
	})
	.then((data)=>{
	baseImageURL = data.images.secure_base_url;
	configData = data.images;
	console.log('config:', data);
	console.log('config fetched');
	runSearch('jaws')
	})
	.catch(function(err){
	alert(err);
	});
	}

	let runSearch = function (keyword) {
	let url = ''.concat(baseURL, 'search/movie?api_key=', APIKEY, '&query=', keyword);
	fetch(url)
	.then(result=>result.json())
	.then((data)=>{
	//process the returned data
	document.getElementById('output').innerHTML = JSON.stringify(data, null, 4);
	//work with results array...

	})
	}

	document.addEventListener('DOMContentLoaded', getConfig);
	/*******************************
	SAMPLE SEARCH RESULTS DATA
	{ "vote_count": 2762,
	"id": 578,
	"video": false,
	"vote_average": 7.5,
	"title": "Jaws",
	"popularity": 16.273358,
	"poster_path": "/l1yltvzILaZcx2jYvc5sEMkM7Eh.jpg",
	"original_language": "en",
	"original_title": "Jaws",
	"genre_ids": [ 27, 53, 12 ],
	"backdrop_path": "/slkPgAt1IQgxZXNrazEcOzhAK8f.jpg",
	"adult": false,
	"overview": "An insatiable great white shark terrorizes the townspeople of Amity Island, The police chief, an oceanographer and a grizzled shark hunter seek to destroy the bloodthirsty beast.",
	"release_date": "1975-06-18"
	}
	*******************************/
	</script>
	</body>
	</html>