maxmatthews/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="movieData"></div>
	</body>
	<script src="script.js"></script>
</html>

## script.js
console.log("before fetch");
//make the request
fetch("https://owen-wilson-wow-api.onrender.com/wows/random").then(
	(response, error) => {
		console.log(response.body);

		//parse body into text (string), then from that body string into JSON
		//response.text().then((body, err) => {
		//	console.log(body);
		//	console.log(JSON.parse(body));
		//});

		//shortcut of above
		//parse (convert) the data from the response
		response.json().then((data, error) => {
			//dive into the data to get out what we want &
			//make the data show in our HTML
			document.getElementById(
				"movieData"
			).innerHTML = `<h1>${data[0].movie}</h1>
			Total number of wows in this movie: ${data[0]["total_wows_in_movie"]}<br/>
			<video controls width="480" height="320">
				<source
					src="${data[0].video["1080p"]}"
					type="video/mp4"
				/>
			</video>
			`; // OR "<h1>" + data[0].movie + "</h1>";

			// const pet = "dog";
			// console.log(`The type of pet I have is a ${pet}`);
			// console.log("The tpye of dog I have is a " + pet)
			console.log(data);
		});
	}
);
console.log("after fetch");

const asyncFunc = async () => {
	const response = await fetch(
		"https://owen-wilson-wow-api.herokuapp.com/wows/random"
	);
	const data = await response.json();
	document.getElementById("movieData").innerHTML = `<h1>${data[0].movie}</h1>
	Total number of wows in this movie: ${data[0]["total_wows_in_movie"]}<br/>
	<video controls width="480" height="320">
		<source
			src="${data[0].video["1080p"]}"
			type="video/mp4"
		/>
	</video>
	`;
	console.log(data);
};

asyncFunc();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<div id="movieData"></div>
	</body>
	<script src="script.js"></script>
	</html>
	console.log("before fetch");
	//make the request
	fetch("https://owen-wilson-wow-api.onrender.com/wows/random").then(
	(response, error) => {
	console.log(response.body);

	//parse body into text (string), then from that body string into JSON
	//response.text().then((body, err) => {
	// console.log(body);
	// console.log(JSON.parse(body));
	//});

	//shortcut of above
	//parse (convert) the data from the response
	response.json().then((data, error) => {
	//dive into the data to get out what we want &
	//make the data show in our HTML
	document.getElementById(
	"movieData"
	).innerHTML = `<h1>${data[0].movie}</h1>
	Total number of wows in this movie: ${data[0]["total_wows_in_movie"]}<br/>
	<video controls width="480" height="320">
	<source
	src="${data[0].video["1080p"]}"
	type="video/mp4"
	/>
	</video>
	`; // OR "<h1>" + data[0].movie + "</h1>";

	// const pet = "dog";
	// console.log(`The type of pet I have is a ${pet}`);
	// console.log("The tpye of dog I have is a " + pet)
	console.log(data);
	});
	}
	);
	console.log("after fetch");

	const asyncFunc = async () => {
	const response = await fetch(
	"https://owen-wilson-wow-api.herokuapp.com/wows/random"
	);
	const data = await response.json();
	document.getElementById("movieData").innerHTML = `<h1>${data[0].movie}</h1>
	Total number of wows in this movie: ${data[0]["total_wows_in_movie"]}<br/>
	<video controls width="480" height="320">
	<source
	src="${data[0].video["1080p"]}"
	type="video/mp4"
	/>
	</video>
	`;
	console.log(data);
	};

	asyncFunc();