📝 Day 28 — Notes Manager Upgrade Project

on

📝 Day 28 — Notes Manager Upgrade Project

Hey Guys Welcome to Day 28 of the JavaScript Advanced Course! Today we transform your basic Notes App into a **full-featured Notes Manager**, adding editing, deleting, searching, persistent storage, autosave, sorting, and beautiful UI improvements. This project is extremely valuable for your portfolio — employers love apps that show strong DOM skills and real-world problem solving.

📌 1. What We Are Upgrading Today

Yesterday’s Notes App (Day 21) was simple — only adding notes and storing them. But real-world users expect much more.

Today’s upgrade introduces:

  • Edit notes
  • Delete notes
  • Search notes in real-time
  • Sort notes (newest/oldest/A–Z)
  • Auto-save on typing
  • Character counter
  • Tag support (personal, work, ideas, tasks)
  • Color-coded notes
  • Improved UI + clean components
  • LocalStorage persistence

Together, these upgrades turn a simple notes page into a **proper note-taking application**.

📦 2. Folder Structure

notes-manager/
│── index.html
│── style.css
└── notes.js

We keep everything modular and clean.

🧱 3. HTML Layout (Upgraded)

This UI adds search, sorting, character counter, and categories.



  
Notes Manager


  

    
    
  


  
  

    0 / 500
    
  


  

  
Your Notes

This already feels like a functional note-taking platform.

⚙ 4. JavaScript Logic (Step-by-Step)

✔ Step 1 — Get DOM elements

const noteInput = document.getElementById("noteInput");
const addNoteBtn = document.getElementById("addNote");
const notesList = document.getElementById("notesList");
const charCount = document.getElementById("charCount");
const search = document.getElementById("search");
const sort = document.getElementById("sort");
const tagSelect = document.getElementById("tag");

✔ Step 2 — LocalStorage handling

let notes = JSON.parse(localStorage.getItem("notes")) || [];
render();

✔ Step 3 — Character Counter

Update live count while typing.

noteInput.addEventListener("input", () => {
  charCount.textContent = `${noteInput.value.length} / 500`;
});

✔ Step 4 — Add a new note

addNoteBtn.addEventListener("click", () => {
  const text = noteInput.value.trim();
  if (!text) {
    alert("Note cannot be empty");
    return;
  }

  const note = {
    id: Date.now(),
    text,
    tag: tagSelect.value,
    created: new Date().toISOString()
  };

  notes.push(note);
  save();
  render();

  noteInput.value = "";
  charCount.textContent = "0 / 500";
});

✔ Step 5 — Save function

function save(){
  localStorage.setItem("notes", JSON.stringify(notes));
}

✔ Step 6 — Render all notes dynamically

function render(){
  notesList.innerHTML = "";

  let filtered = notes.filter(n =>
    n.text.toLowerCase().includes(search.value.toLowerCase())
  );

  if (sort.value === "old") filtered.sort((a,b) => a.id - b.id);
  if (sort.value === "new") filtered.sort((a,b) => b.id - a.id);
  if (sort.value === "az") filtered.sort((a,b) => a.text.localeCompare(b.text));
  if (sort.value === "za") filtered.sort((a,b) => b.text.localeCompare(a.text));

  filtered.forEach(note => {
    const div = document.createElement("div");
    div.className = "note";

    div.innerHTML = `
      ${note.tag}
      

        ${note.text}
      

      
    `;

    notesList.appendChild(div);
  });
}

✔ Step 7 — Edit note (autosave)

Editing happens inline, like Google Keep.

function editNote(id, newText){
  notes = notes.map(n => n.id === id ? {...n, text:newText} : n);
  save();
}

✔ Step 8 — Delete note

function deleteNote(id){
  notes = notes.filter(n => n.id !== id);
  save();
  render();
}

✔ Step 9 — Search & Sort 

search.addEventListener("input", render);
sort.addEventListener("change", render);

🎨 5. CSS Styling (Improved Notes UI)

The upgraded UI is cleaner and more colorful.

.container {
  width: 420px;
  background: #fff;
  padding: 18px;
  margin: auto;
  border-radius: 10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.note {
  background:#fafafa;
  border-left:5px solid #ad1457;
  padding:12px;
  margin-bottom:12px;
  border-radius:8px;
}

.tag {
  padding:3px 8px;
  border-radius:4px;
  font-size:12px;
  background:#eee;
  text-transform:capitalize;
}

.tag.work { background:#ffcdd2; }
.tag.personal { background:#d1c4e9; }
.tag.ideas { background:#ffe0b2; }
.tag.tasks { background:#c5e1a5; }

.note p {
  margin:8px 0;
  outline:none;
}

button {
  background:#ad1457;
  border:0;
  color:#fff;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
}

This CSS gives a modern, colorful, Google-Keep-like UI.

⭐ 6. Advanced Features You Can Add

  • Pin notes (move to top)
  • Add reminder notifications
  • Drag & drop arrange notes
  • Color picker for notes
  • Export notes to TXT or CSV
  • Word count for longer notes
  • Auto-backup to cloud (Firebase)

Adding even two of these makes your project portfolio-ready.

🧪 7. Full Working Project (Embed)

📝 8. Practice Tasks

  1. Add a “Pin note” button.
  2. Create a “Dark Mode” switch.
  3. Integrate color tags for custom themes.
  4. Add “Export as PDF” using HTML2Canvas.
  5. Show “Last edited time” on each note.

🎯 9. Summary

Today you upgraded your Notes App into a real, production-style Notes Manager with editing, searching, sorting, tags, color-coded notes, and LocalStorage persistence. This project demonstrates excellent JavaScript mastery — perfect for resumes, interview tasks, and portfolio websites.

Comments

Post a Comment