vishnuvardhanreddy-n / meetupreact Goto Github PK

• 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

• 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

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

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

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

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

• 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

• Roboto