The goal of this coding exam is to quickly get you off the ground with React Context.

Refer to the image below:

Design Files

Home Route

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home Registered View

Register Route

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Register
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Register Failure

Not Found Route

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Not Found

Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

• Home Route

  • Initially, when the Register button in the Home Route is clicked, then the page should be navigated to Register Route
  • When the Register Now button in the Register Route is clicked, then the input name and selected topic in the Register Route should be displayed in the Home Route

• Register Route

  • Initially, the value in the input element should be empty and the selected value in the select element should be the first item in the given topicsList
  • When the Register Now button is clicked with an empty input value, then the respective error message should be displayed and page should not be navigated to Home Route
  • When the values are provided for both the input and select elements and the Register Now button is clicked, then the page should be navigated to Home Route

• Not Found Route

  • When a random path is provided as the URL, then the page should be navigated to the Not Found Route

• Use styled-components for styling elements

• The App component is provided with topicsList. It consists of a list of topic objects with the following properties in each topic object

  Key	Data Type
  id	String
  displayText	String

Important Note

Click to view

The following instructions are required for the tests to pass

• Home Route should consist of / in the URL path
• Register Route should consist of /register in the URL path

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/meetup/website-logo-img.png alt should be website logo
• https://assets.ccbp.in/frontend/react-js/meetup/website-register-img.png alt should be website register
• https://assets.ccbp.in/frontend/react-js/meetup/meetup-img.png alt should be meetup
• https://assets.ccbp.in/frontend/react-js/meetup/not-found-img.png alt should be not found

Colors

Hex: #334155

Hex: #475569

Hex: #ffffff

Hex: #3b82f6

Hex: #2563eb

Hex: #64748b

Hex: #7b8794

Hex: #cbd5e1

Hex: #ff0b37

Font-families

• Roboto

Things to Keep in Mind

• All components you implement should go in the src/components directory.