Notes Taking App

Smart Notes - Simple & Fast

My Digital Notes

 

Core Functionality Breakdown

  • LocalStorage Persistence: The notes are saved in the user's browser. Even if they close the tab or turn off their computer, the notes will still be there when they return.

  • Responsive Grid: I used grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). This means the app will automatically show 3-4 columns on a desktop and switch to a single column on a mobile phone.

  • Unique IDs: Notes are assigned a Date.now() ID to ensure that deleting one note doesn't affect others with similar titles.

  • Modern Styling: The notes use a "Post-it" yellow background, which gives it a familiar and user-friendly "Bulletin Board" vibe.

How to Implement Google Ads

  1. Replace ca-pub-YOUR_CLIENT_ID: This is your unique Publisher ID from Google AdSense.

  2. Replace YOUR_AD_SLOT_1 & _2: These are the IDs for specific ad units you create in your AdSense dashboard.

  3. Responsive Ads: I used data-ad-format="auto", which allows Google to choose the best size (square, horizontal, or vertical) based on the space available on the user's device.