Blog


Management No Comments

javascript, html, css

javascript, html, css

DO NOT Use of bootstrap and jQuery in this lab.

do with fake API to populate a home page with fake data.

DO NOT USE ANY JAVASCRIPT LIBRARY OR HTML5 Tag Attributes

do the home.html, home.css, home.js

Fetching Posts from an API route

For this portion of the assignment you will need to create and style a new HTML page named home.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/phot…

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 tag. Please show all photos on your newly created home.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.

sample.png

Comments are closed.

Instant Homwork Help
Need Help? Whatsapp a Tutor