The Palos Publishing Company

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

Create a searchable journal interface

Written by

Bernardo Palos

in

Creating a searchable journal interface involves combining a user-friendly front end where entries can be viewed, searched, and added, with a backend or storage system to save and retrieve journal entries efficiently. Below is a conceptual guide and a simplified example using HTML, CSS, and JavaScript to create a client-side searchable journal interface.

Features of the Searchable Journal Interface:

  • Add new journal entries with a date and content.

  • View all journal entries in a list.

  • Search through entries by keywords.

  • Basic styling for readability and usability.

Full Example Code

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Searchable Journal Interface</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background: #f9f9f9;
  }
  h2 {
    margin-bottom: 10px;
  }
  #journal-form {
    margin-bottom: 20px;
  }
  input[type="date"], textarea {
    width: 100%;
    padding: 8px;
    margin: 6px 0 12px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
  }
  button {
    background-color: #4285f4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #357ae8;
  }
  #search-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
  .entry {
    background: white;
    padding: 12px 15px;
    margin-bottom: 12px;
    border-radius: 5px;
    box-shadow: 0 1px 3px #ddd;
  }
  .entry-date {
    font-weight: bold;
    color: #555;
    margin-bottom: 6px;
  }
  .no-results {
    color: #999;
    font-style: italic;
  }
</style>
</head>
<body>

<h2>My Journal</h2>

<form id="journal-form">
  <label for="entry-date">Date:</label>
  <input type="date" id="entry-date" required />

  <label for="entry-content">Entry:</label>
  <textarea id="entry-content" rows="4" placeholder="Write your journal entry here..." required></textarea>

  <button type="submit">Add Entry</button>
</form>

<input type="text" id="search-input" placeholder="Search journal entries..." />

<div id="journal-entries"></div>

<script>
  // Journal entries stored as array of objects
  let journalEntries = JSON.parse(localStorage.getItem('journalEntries')) || [];

  const journalForm = document.getElementById('journal-form');
  const entryDate = document.getElementById('entry-date');
  const entryContent = document.getElementById('entry-content');
  const searchInput = document.getElementById('search-input');
  const entriesContainer = document.getElementById('journal-entries');

  // Render entries function
  function renderEntries(entries) {
    entriesContainer.innerHTML = '';
    if (entries.length === 0) {
      entriesContainer.innerHTML = '<p class="no-results">No journal entries found.</p>';
      return;
    }
    entries.forEach(entry => {
      const entryDiv = document.createElement('div');
      entryDiv.className = 'entry';
      entryDiv.innerHTML = `
        <div class="entry-date">${new Date(entry.date).toLocaleDateString()}</div>
        <div class="entry-content">${escapeHtml(entry.content)}</div>
      `;
      entriesContainer.appendChild(entryDiv);
    });
  }

  // Escape HTML to prevent injection
  function escapeHtml(text) {
    const map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
  }

  // Add new entry
  journalForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const date = entryDate.value;
    const content = entryContent.value.trim();
    if (!date || !content) return;

    journalEntries.push({ date, content });
    localStorage.setItem('journalEntries', JSON.stringify(journalEntries));
    entryDate.value = '';
    entryContent.value = '';
    renderEntries(journalEntries);
  });

  // Search functionality
  searchInput.addEventListener('input', () => {
    const query = searchInput.value.toLowerCase();
    const filtered = journalEntries.filter(entry =>
      entry.content.toLowerCase().includes(query) ||
      entry.date.includes(query)
    );
    renderEntries(filtered);
  });

  // Initial render on page load
  renderEntries(journalEntries);
</script>

</body>
</html>

Explanation:

  • HTML structure:

    • A form to add new journal entries with date and text.

    • A search input box for filtering entries.

    • A container to display journal entries.

  • CSS styling:

    • Simple, clean design for readability.

    • Responsive widths for inputs and text areas.

  • JavaScript functionality:

    • Store journal entries in localStorage to persist data between page reloads.

    • Add new entries to the stored array.

    • Render the entries dynamically.

    • Filter entries by date or content based on search input.

    • Escape HTML to prevent injection attacks.

This interface runs fully on the client side and is easy to expand or connect to a backend if needed later. Would you like me to help create a backend version or add features like editing/deleting entries?

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