The Palos Publishing Company

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

Build a timestamped note-taking tool

Written by

Bernardo Palos

in

Here’s a simple and effective timestamped note-taking tool implemented in HTML, CSS, and JavaScript. It allows users to write notes with automatic timestamps and view them in a list.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Timestamped Notes</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 40px;
      background: #f4f4f4;
      color: #333;
    }
    .container {
      max-width: 700px;
      margin: auto;
      background: #fff;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    textarea {
      width: 100%;
      height: 100px;
      padding: 10px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 8px;
      resize: vertical;
    }
    button {
      margin-top: 10px;
      padding: 10px 20px;
      font-size: 1rem;
      background: #007BFF;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    button:hover {
      background: #0056b3;
    }
    .note {
      background: #e9ecef;
      margin-top: 20px;
      padding: 15px;
      border-radius: 8px;
    }
    .timestamp {
      font-size: 0.9rem;
      color: #555;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Timestamped Notes</h2>
    <textarea id="noteInput" placeholder="Write your note here..."></textarea>
    <button onclick="addNote()">Add Note</button>
    <div id="notesContainer"></div>
  </div>

  <script>
    function addNote() {
      const noteText = document.getElementById('noteInput').value.trim();
      if (noteText === '') return;

      const timestamp = new Date().toLocaleString();
      const notesContainer = document.getElementById('notesContainer');

      const noteDiv = document.createElement('div');
      noteDiv.className = 'note';
      noteDiv.innerHTML = `
        <div class="timestamp">${timestamp}</div>
        <div>${noteText}</div>
      `;

      notesContainer.prepend(noteDiv);
      document.getElementById('noteInput').value = '';
    }
  </script>
</body>
</html>

Features:

  • Simple UI for quick note entry.

  • Automatically adds a readable timestamp.

  • New notes appear at the top.

  • Fully client-side and runs in any modern browser.

To use this:

  • Save the code in an .html file.

  • Open it in any browser.

  • Start typing and saving timestamped notes instantly.

If you want a version that saves notes in localStorage or connects to a backend for persistence, let me know.

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