# Simple
TestAPIUnsplash on GitHub
### HTML
```html
<!DOCTYPE html>
<html lang="en">
<head> <!-- makes sure our html document meets with the web's best practices and to allow our css file and javascript file to load -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy Car Gallery</title>
<link rel="stylesheet" href="index.css">
<script defer src="index.js"></script>
</head>
<body>
<!-- My header here is just for presentation-->
<header>
<h1> Fancy Car Gallery</h1>
</header>
<div id = "img-box"> <!-- this is the html tag that will contain all images that we will get from our API call -->
<!-- I will be populating this div with images from my unsplash api call-->
</div>
<!-- My footer here is just for presentation-->
<footer>
<p id = "footer-text"> <span style = "text- decoration:underline;"> Designed & Developed by :</span> Patrick Pierre</p>
</footer>
</body>
</html>
```
### JS
```js
const divForImg = document.getElementById("img-box");
//enter your api key where it says YOUR_ACCESS_KEY
const requestOne = "https://api.unsplash.com/search/photos?page=1&query=&client_id=oZq-XxVZdE-G41mqT8ZX9Mxj8NBadXSdq8eusVOiigs";
const requestTwo = "https://api.unsplash.com/search/photos?page=2&query=expensive-cars&client_id=oZq-XxVZdE-G41mqT8ZX9Mxj8NBadXSdq8eusVOiigs"
function makeRequestToUnsplash(requestUrl){
fetch(requestUrl)
.then( res => res.json())
.then((data) => {
//we are actually using the returned data from the API here
// data.results contains an array of objects so we can use an array method here to iterate
data.results.forEach( (imageObj) =>{
createImage(imageObj);
});
});
}
// the function createImage() below is a helper function used to generate an image tag for use in our web page
function createImage(imageObj){
const imageDiv = document.createElement("div");
const image = document.createElement("img");
// styling for the elements
image.src = imageObj.urls.regular;
image.alt = imageObj.alt_description;
image.style.margin = "20px";
image.style.width = "600px";
image.style.height = "500px";
image.style.border = "double 4px black"
imageDiv.append(image);
divForImg.append(imageDiv);
}
//each call to makeRequestToUnsplash() returns data with 10 images in it
//so I make two calls to it to get 20 images to populate the page with images
makeRequestToUnsplash(requestOne);
makeRequestToUnsplash(requestTwo);
```
### CSS
```css
/* All the flex-related properties are used to help position things on the page */
*{
box-sizing: border-box;
}
body,html{
/*The padding and margin here are 0 so that we don't see any white space around the edges of the header and footer*/
padding:0;
margin:0;
background-color: white;
}
body{
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
header,footer{
margin:0;
padding:0;
height:200px;
width:auto;
padding: 20px 10px;
background-color:rgba(26,26,26,.7);
display:flex;
flex-direction: column;
justify-content: center;
color:white;
}
h1{
text-align:center;
font-size:40px;
}
#img-box{
display:flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
padding:0px;
width: 100%;
}
#footer-text{
text-align:center;
font-size:25px;
}
```