The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a virtual post-it note board

Written by

Bernardo Palos

in

Creating a virtual post-it note board is a great way to organize ideas, tasks, and reminders digitally. Below is a detailed guide and example code to build a simple but fully functional virtual post-it note board using HTML, CSS, and JavaScript. This board will allow users to create, move, edit, and delete notes dynamically in the browser.

Key Features

  • Add new post-it notes.

  • Drag and drop notes anywhere on the board.

  • Edit note content inline.

  • Delete notes.

  • Save notes locally (optional).

Code Implementation

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Virtual Post-it Note Board</title>
<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f7f7f7;
    margin: 0;
    padding: 20px;
  }

  #board {
    position: relative;
    width: 100%;
    height: 80vh;
    border: 2px dashed #ccc;
    border-radius: 8px;
    background: #fffbea;
    overflow: auto;
  }

  .note {
    position: absolute;
    width: 200px;
    min-height: 150px;
    background: #fffb85;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    cursor: move;
    user-select: none;
  }

  .note textarea {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    resize: none;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    padding: 4px;
  }

  .note .delete-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    background: #e74c3c;
    border: none;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-weight: bold;
    line-height: 17px;
    text-align: center;
  }

  #addNoteBtn {
    margin-bottom: 10px;
    padding: 10px 15px;
    font-size: 16px;
    background-color: #27ae60;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  #addNoteBtn:hover {
    background-color: #219150;
  }
</style>
</head>
<body>

<button id="addNoteBtn">Add Post-it Note</button>
<div id="board"></div>

<script>
  const board = document.getElementById('board');
  const addNoteBtn = document.getElementById('addNoteBtn');

  // Generate unique ID for notes
  const generateId = () => '_' + Math.random().toString(36).substr(2, 9);

  // Save notes to localStorage
  const saveNotes = () => {
    const notes = [];
    document.querySelectorAll('.note').forEach(note => {
      notes.push({
        id: note.dataset.id,
        content: note.querySelector('textarea').value,
        top: note.style.top,
        left: note.style.left,
      });
    });
    localStorage.setItem('virtualNotes', JSON.stringify(notes));
  };

  // Load notes from localStorage
  const loadNotes = () => {
    const notes = JSON.parse(localStorage.getItem('virtualNotes') || '[]');
    notes.forEach(note => {
      createNote(note.content, note.left, note.top, note.id);
    });
  };

  // Create a new note element and append to board
  function createNote(content = '', left = '10px', top = '10px', id = null) {
    const note = document.createElement('div');
    note.classList.add('note');
    note.dataset.id = id || generateId();
    note.style.left = left;
    note.style.top = top;

    // Delete button
    const deleteBtn = document.createElement('button');
    deleteBtn.classList.add('delete-btn');
    deleteBtn.innerHTML = '&times;';
    deleteBtn.onclick = () => {
      note.remove();
      saveNotes();
    };

    // Text area for content
    const textarea = document.createElement('textarea');
    textarea.value = content;
    textarea.oninput = saveNotes;

    note.appendChild(deleteBtn);
    note.appendChild(textarea);
    board.appendChild(note);

    enableDrag(note);
  }

  // Enable drag & drop for a note
  function enableDrag(element) {
    let offsetX = 0;
    let offsetY = 0;
    let isDragging = false;

    element.addEventListener('mousedown', (e) => {
      if(e.target.tagName === 'TEXTAREA' || e.target.classList.contains('delete-btn')) {
        return; // Avoid drag when interacting with textarea or delete button
      }
      isDragging = true;
      offsetX = e.clientX - element.getBoundingClientRect().left;
      offsetY = e.clientY - element.getBoundingClientRect().top;
      element.style.zIndex = 1000; // bring to front while dragging
      e.preventDefault();
    });

    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      let x = e.clientX - offsetX - board.getBoundingClientRect().left + board.scrollLeft;
      let y = e.clientY - offsetY - board.getBoundingClientRect().top + board.scrollTop;

      // Keep within board boundaries
      x = Math.max(0, Math.min(x, board.clientWidth - element.offsetWidth));
      y = Math.max(0, Math.min(y, board.clientHeight - element.offsetHeight));

      element.style.left = x + 'px';
      element.style.top = y + 'px';
    });

    document.addEventListener('mouseup', () => {
      if (isDragging) {
        isDragging = false;
        element.style.zIndex = '';
        saveNotes();
      }
    });
  }

  addNoteBtn.addEventListener('click', () => createNote());

  loadNotes();
</script>

</body>
</html>

How it Works:

  • Add Post-it Note: Clicking the green button adds a new sticky note at a default position.

  • Edit Note: You can type directly inside the note. Changes save automatically.

  • Drag and Drop: Click and drag anywhere on the note (except the text area or delete button) to reposition it on the board.

  • Delete Note: Click the red × button on the top-right corner to remove the note.

  • Persistent Storage: Notes and their positions/content are saved in the browser’s localStorage so they persist on page reload.

You can customize colors, sizes, or add more features like changing note colors, exporting notes, or collaboration, but this is a solid foundation for a virtual post-it note board.

If you want, I can help build an enhanced version or integrate this into a framework!

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About