Develop an application that enables users to create and remove notes on a dashboard, helping them organise their thoughts and tasks effectively. You will be building this project as part of our JavaScript Course.
Resources: DM Serif Font - Google Fonts
Things you need to know: Box-shadow, Background Color, Browser Events, DOM Manipulation.
Add a heading Sticky Notes at the top.
Add a text area where the user can type a new note.
The placeholder should say Type a new note....
Add a button with a plus symbol + to add the note once the user is ready.
Set the Arial
font for the entire page.
Center the contents on the page.
Add a background color of #f1f1f1
, along with a slight shadow effect around the edges.
Set the 'DM Serif', cursive
font as given in the resources for the heading and dark font color of #333
.
Add proper spacing as per the given image.
When the user clicks the + button, create a new sticky note and display it in the notes section.
Alternate the background colors of the notes between #d1e1ff
and #fefffe
.
Each note should have a small X button in the top right corner. When the user clicks this X button, delete the corresponding note.
Style the text area for adding a new note to be large with a background color of #fefec0
The add button ("+" symbol) should be of the color #11ff00
, and it should grow slightly when hovered.
The "X" button in the top right corner for deleting the note should be styled with rounded corners and background color of #e54b3a
Add the rest of the styles as per the given image.
These are some of the projects you'll build while learning.