stories.js

// Elements
const form = document.getElementById("storyForm");
const container = document.getElementById("storiesContainer");

// Load saved stories
let stories = JSON.parse(localStorage.getItem("stories")) || [];

// Display stories
function loadStories() {
  container.innerHTML = stories
    .map(
      (s, index) => `
      <div class="story-card">
        <h4>${s.title}</h4>
        <p><strong>By:</strong> ${s.author}</p>
        <p>${s.content}</p>
        <small>${s.date}</small>

        <button class="delete-btn" onclick="deleteStory(${index})">
          Delete
        </button>
      </div>
      `
    )
    .join("");
}

// Delete story
function deleteStory(index) {
  const confirmed = confirm("Are you sure you want to delete this story?");
  if (!confirmed) return;

  stories.splice(index, 1);
  localStorage.setItem("stories", JSON.stringify(stories));
  loadStories();
}

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const title = document.getElementById("storyTitle").value.trim();
  const author = document.getElementById("storyAuthor").value.trim();
  const content = document.getElementById("storyContent").value.trim();

  if (!title || !author || !content) return;

  const newStory = {
    title,
    author,
    content,
    date: new Date().toLocaleString()
  };

  stories.push(newStory);
  localStorage.setItem("stories", JSON.stringify(stories));

  loadStories();
  form.reset();
});

// Initial load
loadStories();