The Palos Publishing Company

Categories We Write About

Create an interactive journal timeline

Written by

in

Computer Science

To create an interactive journal timeline, here’s a complete HTML/JavaScript code that you can embed into a website. This example uses basic web technologies and can be extended with frameworks or libraries like React, Vue, or a database for more complex needs.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive Journal Timeline</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      padding: 20px;
    }

    h2 {
      text-align: center;
      color: #333;
    }

    .timeline {
      position: relative;
      max-width: 800px;
      margin: auto;
      padding: 20px 0;
    }

    .timeline::after {
      content: '';
      position: absolute;
      width: 4px;
      background-color: #2196F3;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -2px;
    }

    .entry {
      padding: 20px;
      position: relative;
      background-color: inherit;
      width: 50%;
    }

    .entry.left {
      left: 0;
    }

    .entry.right {
      left: 50%;
    }

    .entry::before {
      content: " ";
      position: absolute;
      top: 15px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: white;
      border: 4px solid #2196F3;
      z-index: 1;
    }

    .entry.left::before {
      left: -10px;
    }

    .entry.right::before {
      right: -10px;
    }

    .entry-content {
      background-color: white;
      padding: 20px;
      position: relative;
      border-radius: 6px;
    }

    .entry-content h3 {
      margin-top: 0;
    }

    .entry-content p {
      margin: 10px 0 0;
    }

    .form-container {
      max-width: 600px;
      margin: 30px auto;
      padding: 20px;
      background: white;
      border-radius: 6px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .form-container input, .form-container textarea {
      width: 100%;
      padding: 10px;
      margin: 5px 0 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .form-container button {
      background: #2196F3;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }

    .form-container button:hover {
      background: #0b7dda;
    }
  </style>
</head>
<body>

<h2>Interactive Journal Timeline</h2>

<div class="form-container">
  <input type="text" id="entry-title" placeholder="Entry Title" required>
  <textarea id="entry-text" rows="4" placeholder="Write your journal entry..." required></textarea>
  <button onclick="addEntry()">Add Entry</button>
</div>

<div class="timeline" id="timeline">
  <!-- Entries will appear here -->
</div>

<script>
  let isLeft = true;

  function addEntry() {
    const title = document.getElementById('entry-title').value.trim();
    const text = document.getElementById('entry-text').value.trim();

    if (!title || !text) {
      alert("Please fill in both fields.");
      return;
    }

    const timeline = document.getElementById('timeline');
    const entry = document.createElement('div');
    entry.className = `entry ${isLeft ? 'left' : 'right'}`;

    entry.innerHTML = `
      <div class="entry-content">
        <h3>${title}</h3>
        <p>${text}</p>
        <small>${new Date().toLocaleString()}</small>
      </div>
    `;

    timeline.appendChild(entry);

    isLeft = !isLeft;

    document.getElementById('entry-title').value = '';
    document.getElementById('entry-text').value = '';
  }
</script>

</body>
</html>

Features:

A timeline with alternating left-right entry display.
A form to add journal entries with a title and text.
Entries include timestamps.
Fully client-side; does not store data permanently.

Enhancements (optional for future use):

Local storage or backend database for persistent entries.
User authentication.
Search and filtering.
Rich text support or markdown.

Let me know if you want this adapted for a specific platform like WordPress, React, or a mobile app version.

Share This Page:

Comments

Leave a Reply Cancel reply

Check Out Our Newest Posts we wrote about

Categories We Write About