The Palos Publishing Company

Categories We Write About

Build a quick note-taking tool

Written by

Bernardo Palos

in

Here’s a simple yet functional quick note-taking tool implemented in HTML, CSS, and JavaScript. It allows you to write notes, save them locally in your browser (using localStorage), and retrieve them even after refreshing the page.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Quick Note-Taking Tool</title>
<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 40px auto;
    padding: 10px;
    background: #f9f9f9;
  }
  textarea {
    width: 100%;
    height: 300px;
    font-size: 16px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
  }
  button {
    margin-top: 10px;
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 10px 16px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
  }
  button:hover {
    background-color: #45a049;
  }
  #status {
    margin-top: 10px;
    font-style: italic;
    color: #555;
  }
</style>
</head>
<body>

<h2>Quick Note-Taking Tool</h2>
<textarea id="note" placeholder="Write your notes here..."></textarea>
<br />
<button id="saveBtn">Save Note</button>
<div id="status"></div>

<script>
  const textarea = document.getElementById('note');
  const saveBtn = document.getElementById('saveBtn');
  const status = document.getElementById('status');

  // Load saved note on page load
  window.onload = () => {
    const savedNote = localStorage.getItem('quickNote');
    if (savedNote) {
      textarea.value = savedNote;
      status.textContent = 'Note loaded from previous session.';
    }
  };

  // Save note to localStorage
  saveBtn.addEventListener('click', () => {
    const noteContent = textarea.value.trim();
    if(noteContent) {
      localStorage.setItem('quickNote', noteContent);
      status.textContent = 'Note saved successfully!';
      setTimeout(() => {
        status.textContent = '';
      }, 3000);
    } else {
      status.textContent = 'Cannot save an empty note.';
      setTimeout(() => {
        status.textContent = '';
      }, 3000);
    }
  });
</script>

</body>
</html>

Open this file in any modern browser, and you can quickly type notes and save them locally. The notes persist in the browser’s storage and will load automatically next time you open the page. Let me know if you want it enhanced with features like multiple notes, export/import, or syncing!

Share This Page:

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

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About