Sticky Notes Project
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.
Task - 01
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.
Task - 02
Set the
Arialfont 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', cursivefont as given in the resources for the heading and dark font color of#333.Add proper spacing as per the given image.
Task - 03
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
#d1e1ffand#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.
Task - 04
Style the text area for adding a new note to be large with a background color of
#fefec0The 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
#e54b3aAdd the rest of the styles as per the given image.
More projects
These are some of the projects you'll build while learning.
