idoqo/books.html

## books.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">
    <link rel="stylesheet" href="style.css">
    <title>Landing Page</title>
</head>
<body>
    <header class="header">
        <h1 class="heading-1">Books</h1>


    <section class="container" id="container">
</section>
    </header>

    <script type="text/javascript">
    fetch("https://the-one-api.dev/v2/book")
    .then(function(response) {
        if(!response.ok) {
            throw new Error("HTTP error, status = " + response.status);
        }
        return response.json();
    })
    .then(function(json) {
        let container = document.getElementById("container");
        for (let i = 0; i < json.docs.length; i++) {
            let book = json.docs[i];
            let grid = `
<div class="home">
  <img src="img/A1.jpg" alt="movie picture" class="home_img">
  <div class="heading">
    <h4 class="heading-2">${book.name}</h4>
  </div>
</div>
`
        let wrapper = document.createElement("div");
        wrapper.innerHTML = grid;
        container.appendChild(wrapper);
    }
    })
    .catch(function(error) {
        console.log(error);
        alert("An error occurred " + error.message);
    })
    </script>
</body>
</html>

## movies.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">
    <link rel="stylesheet" href="style.css">
    <title>Landing Page</title>
</head>
<body>
    <header class="header">
        <h1 class="heading-1">Movies</h1>


    <section class="container" id="container">
</section>
    </header>

    <script type="text/javascript">
    fetch("https://the-one-api.dev/v2/movie", {
        headers: {
            "Authorization": "Bearer eSLd-xCRpRF2Ireal7Dh"
        }
    })
    .then(function(response) {
        if(!response.ok) {
            throw new Error("HTTP error, status = " + response.status);
        }
        return response.json();
    })
    .then(function(json) {
        let container = document.getElementById("container");
        for (let i = 0; i < json.docs.length; i++) {
            let movie = json.docs[i];
            let grid = `
<div class="home">
  <img src="img/A1.jpg" alt="movie picture" class="home_img">
  <div class="heading">
    <h4 class="heading-2">${movie.name}</h4>
    <p class="sub-title">Duration: ${(movie.runtimeInMinutes / 60).toFixed(2)} hours</p>
    <p class="sub-title">Revenue: ${movie.boxOfficeRevenueInMillions}</p>
  </div>
</div>
`
        let wrapper = document.createElement("div");
        wrapper.innerHTML = grid;
        container.appendChild(wrapper);
        }
        console.log(json);
    })
    .catch(function(error) {
        console.log(error);
        alert("An error occurred " + error.message);
    })
    </script>
</body>
</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">
	<link rel="stylesheet" href="style.css">
	<title>Landing Page</title>
	</head>
	<body>
	<header class="header">
	<h1 class="heading-1">Books</h1>


	<section class="container" id="container">
	</section>
	</header>

	<script type="text/javascript">
	fetch("https://the-one-api.dev/v2/book")
	.then(function(response) {
	if(!response.ok) {
	throw new Error("HTTP error, status = " + response.status);
	}
	return response.json();
	})
	.then(function(json) {
	let container = document.getElementById("container");
	for (let i = 0; i < json.docs.length; i++) {
	let book = json.docs[i];
	let grid = `
	<div class="home">
	<img src="img/A1.jpg" alt="movie picture" class="home_img">
	<div class="heading">
	<h4 class="heading-2">${book.name}</h4>
	</div>
	</div>
	`
	let wrapper = document.createElement("div");
	wrapper.innerHTML = grid;
	container.appendChild(wrapper);
	}
	})
	.catch(function(error) {
	console.log(error);
	alert("An error occurred " + error.message);
	})
	</script>
	</body>
	</html>