LIVE DEMO :- Interview Questions
In this assignment, let's build an Interview Questions App
- Extra Small (Size < 576px), Small (Size >= 576px) - language selected
- Extra Small (Size < 576px), Small (Size >= 576px) - difficulty level selected
- Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - language selected
- Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - difficulty level selected
- Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - both language and difficulty level is selected
- Download dependencies by running
npm install
- Start up the app using
npm start
The app must have the following functionalities
-
By default language and level are selected as ALL then complete data should be displayed.
-
When a specific language is selected
-
Only interview questions on that language should be displayed with all the levels.
-
When a specific level is selected
- Only interview questions in that level should be displayed for all the languages.
-
When both specific language and specific level is selected
-
Only interview questions on that language should be displayed with the selected level.
-
When the Show button is clicked in each question
-
The answer to the question should be visible to the user.
-
Button text should be changed to Hide.
-
The down arrow icon should change to up arrow icon.
-
When the Hide button is clicked in each question
- The answer to the question should be hidden to the user.
- Button text should be changed to Show.
- The up arrow icon should change to down arrow icon.
-
The
InterviewQuestionsApp
component will receivequestionsData
,levelsData
, andlanguageData
as a props. -
The
Filters
component will receivelevelsData
,languageData
,onChangeDifficultyLevel
andonChangeLanguage
as a props. -
The
InterviewQuestion
component will receivequestion
as a prop. -
Each interview question object will have the following properties
Key Data Type id Number questionText String answerText String language String difficultyLevel String -
Each difficulty level object will have the following properties
Key Data Type id Number level String -
Each language object will have the following properties
Key Data Type id Number language String -
core code is here
src/components/InterviewQuestionsApp/index.js
src/components/InterviewQuestionsApp/index.css
src/components/Filters/index.js
src/components/Filters/index.css
src/components/InterviewQuestion/index.js
src/components/InterviewQuestion/index.css
The following attributes are required in the component for the tests to pass
- The
InterviewQuestion
component should have a Show button element in which it contains image element with HTMLalt
attribute value as 'down arrow'- The
InterviewQuestion
component should have a Hide button element in which it contains image element with HTMLalt
attribute value as 'up arrow'
- The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. Check this to know more.
- The cursor CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. Use the CSS property
cursor
with the valuepointer
to indicate a link. Click this to know more. - An outline is a line that is drawn around an element, outside the border. The outline CSS shorthand property sets all the outline properties. Use the CSS property
outline
with valuenone
to hide all the outline properties. Click this to know more.
- https://assets.ccbp.in/frontend/react-js/interview-questions-img.png
- https://assets.ccbp.in/frontend/react-js/up-arrow.png
- https://assets.ccbp.in/frontend/react-js/down-arrow.png
- Playfair Display
- Roboto