Photo API

Introduction

For this assignment, you will be adding JavaScript to your registration form and working with a fake API to populate a home page with fake data. Use of bootstrap and jQuery is NOT ALLOWED. This assignment will get your feet wet using JavaScript. We will mostly work with the DOM API for this assignment. During the Term Project you will get more experience with the advance features of JavaScript. You must write the additional HTML, CSS, and JavaScript needed for this assignment yourself. PLEASE NOTE, YOU ARE FORBIDDEN TO USE ANY JAVASCRIPT LIBRARY OR HTML5 Tag Attributes THAT DO INPUT VALIDATION UNLESS STATED OTHERWISE.

For your HTML files to know what JavaScript code you will be calling, we need to link our JavaScript files to our HTML files. You may link your JavaScript files to your HTML pages by adding the following to the head tag of each HTML page:

< script type="text/javascript" src="path/to/file.js" >< /script >

The type attribute will define the MIME type of the file which tells the browser this is a JavaScript file. The src attribute specifies the URL of an external script file.

If you need your JavaScript file to load AFTER the HTML is loaded, you may add the defer attribute to the HTML tag. This will cause the file to load after the html is parsed and the DOM is loaded.

Fetching Posts from an API route

For this portion of the assignment you will need to modify you HTML page named index.html. This page will be used to show results from an AJAX call made to a fake API. We will use the following API route for this assignment:

https://jsonplaceholder.typicode.com/albums/2/photos

This API route will return an array of JavaScript objects that represent photos. Here is an example of such an object:

{
"albumId": 2,
"id": 51,
"title": "non sunt voluptatem placeat consequuntur rem incidunt", "url": "https://via.placeholder.com/300/8e973b",
"thumbnailUrl": "https://via.placeholder.com/150/8e973b"
}

With this object we are going to use the title and url to show a series of photos on our newly created HTML page. These photos will need to be organized neatly onto the page. Please make sure to use the proper CSS and HTML to correctly display the photos. DO NOT STORE THESE PHOTOS IN A HTML TABLE. CANNOT USE THE < table > tag. Please show all photos on your index.html page with the following specifications:

• No more than 5 photos per row but must have at least 3.
• All photos shown should be the same size.
• Each individual object should show the photo and title. How these are organized is up to you.
• Photos can either be fetched with a button press or when the html page is loaded.
• You may use either the XMLHTTPRequest object, fetch API or axios to retrieve the photos. Page should be able to handle any number of posts.
• At the bottom or top of the page (just after the photos) display the number of photos being displayed
• Add an onclick event to each photo container that when clicked, the photo fades out over time. You may choose the speed of the fade out. Once the fadeout is complete, remove the element from the DOM.
• After removing the faded out div from the DOM, decrement the photo count by 1 to show the correct current number of photos being shown.