LIVE DEMO :- Notes App Example – using Multiple (useState) react hook
In this project, let’s build a Notes App by applying the concepts we have learned till now.
Refer to the image below:
Design Files
Click to view
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
- Initially, the title and note inputs should be empty and Empty Notes View should be displayed
- When non-empty values are provided for the title and notes and the Add button is clicked,
- A new note item should be added to the list of notes with provided details
Components Structure
Implementation Files
Use these files to complete the implementation:
src/components/Notes/index.jssrc/components/Notes/styledComponents.jssrc/components/NoteItem/index.jssrc/components/NoteItem/styledComponents.js
Important Note
Click to view
The following instructions are required for the tests to pass
- Styled Components should be used for styling purposes
- HTML input element for the title should have the placeholder as Title
- HTML textarea element for notes should have the placeholder as Take a Note…
- Bree Serif should be applied as
font-familyfor Notes heading
Resources
Image URLs
- https://assets.ccbp.in/frontend/hooks/empty-notes-img.png alt should be notes empty
Colors
Hex: #4c63b6
Hex: #475569
Hex: #1e293b
Hex: #ffffff
Hex: #334155
Hex: #d8d8d8
Hex: #aab8c8
Hex: #cbd5e1
Font-families
- Roboto
- Bree Serif
Things to Keep in Mind
- All components you implement should go in the
src/componentsdirectory.- Don’t change the component folder names as those are the files being imported into the tests.
- Do not remove the pre-filled code
- Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.