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.