Skip to content

Newton-School/react-image-fetcher-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React photo fetcher.

The API https://jsonplaceholder.typicode.com/photos/${id} where id is number between 1-5000, returns an object of this structure {
 albumId: 1,
 id: 5,
 title: "natus nisi omnis corporis facere molestiae rerum in",
 url: "https://via.placeholder.com/600/f66b97",
 thumbnailUrl: "https://via.placeholder.com/150/f66b97"
}

On initial load of application, only an input box which takes only numbers is visible. When someone enters a number, it makes a GET request to the above mentioned api with that number. While request is resolving, it shows the Loader component which is predefined.

After data has been fetched, display the PhotoFrame component. The PhotoFrame component takes 2 props, url and title. The component returns a div with class="photoframe", inside that using display an img with using url prop as src. Also display the title inside div with class="caption".

This repeats further whenever someone changes the number in input.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published