Mini-Project-ImageGenerator-Assignment-3

Read these instructions carefully to understand the requirements and functionalities for this project.

We Learned about using fetch in our react application to make our first API Call.
The task for this project is to make a random image generator that shows a random image.

Functionalities

• Image Area to display image.
• Button to fetch new image on Click.
• Showing a Loader when the image is loading.

Task 1: Project Set Up

• Clone this repo by using use template option with name of repo as Mini-Project-ImageGenerator-Assignment.

• Clone your created repo and work on it to push your code.

• Use githubbox.com instead of github.com in your repository path, to create a synced codesandbox(always in sync with code in your repo). Read more here

Task 2: Project Requirements

• Create a Component ImageDisplay which has an img tag and a loader (Loader can simply be text Loading.... as well ).
• Create a button in the App Component with text Get New Image and import ImageDisplay component in it.
• Checkout the documentation at https://picsum.photos/ to know about how to use it for getting a random image.
• Use fetch to make an API call to the URL from picsum documentation on Get New Image Button click.
• Display Loader/Image accordingly (show loader until image is fetched from api, once image is received, hide loader and show the image).
• Get first image automatically when your react app is Loaded from picsum api as well.

NOTE:

• Use of class component is strictly not allowed.

Task 3

• Submit the Code Repo Link.

Deadline for Project - MONDAY , December 7, 12PM ( DAY 6)

About Frontbench Camp

Frontbench FullStack Camp is 12 weeks online camp to help people learn full-stack web development by building project. In 12 weeks, you build 12 (mini + major) project with 1:1 Mentor and peer community support.

To Know more and see our closed cohort sessions, visit --- LINK