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.

Max Chat

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 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.

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 #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.

Task - 04

  • 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.

More projects

These are some of the projects you'll build while learning.