script.js

// DOM Elements
const signupForm = document.getElementById('signupForm');
const loginForm = document.getElementById('loginForm');
const blogFeatures = document.getElementById('blogFeatures');
const signup = document.getElementById('signup');
const login = document.getElementById('login');
const showLogin = document.getElementById('showLogin');
const showSignup = document.getElementById('showSignup');
const navbar = document.getElementById('navbar');
const menuToggle = document.getElementById('menuToggle');
const blogListDropdown = document.getElementById('blogListDropdown');
const logoutBtn = document.getElementById('logoutBtn');
const blogForm = document.getElementById('blogForm');
const selectedBlog = document.getElementById('selectedBlog');

// Toggle between signup and login forms
showLogin.addEventListener('click', () => {
  signupForm.style.display = 'none';
  loginForm.style.display = 'block';
});

showSignup.addEventListener('click', () => {
  loginForm.style.display = 'none';
  signupForm.style.display = 'block';
});

// Sign Up
signup.addEventListener('submit', function (e) {
  e.preventDefault();

  const username = document.getElementById('signupUsername').value;
  const password = document.getElementById('signupPassword').value;

  if (username && password) {
    localStorage.setItem('username', username);
    localStorage.setItem('password', password);

    alert('Signup successful! Please log in.');
    signupForm.style.display = 'none';
    loginForm.style.display = 'block';
    signup.reset();
  }
});

// Log In
login.addEventListener('submit', function (e) {
  e.preventDefault();

  const username = document.getElementById('loginUsername').value;
  const password = document.getElementById('loginPassword').value;

  const savedUsername = localStorage.getItem('username');
  const savedPassword = localStorage.getItem('password');

  if (username === savedUsername && password === savedPassword) {
    alert('Login successful!');
    loginForm.style.display = 'none';
    blogFeatures.style.display = 'block';
    navbar.style.display = 'flex'; 
    loadBlogs();
  } else {
    alert('Invalid username or password.');
  }
});

// Log Out
logoutBtn.addEventListener('click', function () {
  blogFeatures.style.display = 'none';
  navbar.style.display = 'none'; 
  signupForm.style.display = 'block';
  selectedBlog.innerHTML = ''; 
});

// Toggle Blog List Dropdown
menuToggle.addEventListener('click', function () {
  blogListDropdown.style.display = blogListDropdown.style.display === 'block' ? 'none' : 'block';
});

// Load Blogs
function loadBlogs() {
  const blogs = JSON.parse(localStorage.getItem('blogs')) || [];
  updateBlogMenu(blogs); 
}

// Update Blog Menu
function updateBlogMenu(blogs) {
  blogListDropdown.innerHTML = ''; 
  blogs.forEach(blog => {
    const blogLink = document.createElement('a');
    blogLink.href = '#';
    blogLink.textContent = blog.title;
    blogLink.addEventListener('click', () => showSelectedBlog(blog));
    blogListDropdown.appendChild(blogLink);
  });
}

// Show Selected Blog Content
function showSelectedBlog(blog) {
  selectedBlog.innerHTML = `
    <h3>${blog.title}</h3>
    <div class="blog-date">${blog.date}</div>
    <p>${blog.content}</p>
    <button class="delete-btn" onclick="deleteBlog('${blog.id}')">Delete</button>
  `;
}

// Generate Unique ID
function generateId() {
  return Math.random().toString(36).substr(2, 9);
}

// Get Current Date
function getCurrentDate() {
  const now = new Date();
  return now.toLocaleString();
}

// Add Blog
blogForm.addEventListener('submit', function (e) {
  e.preventDefault();

  const title = document.getElementById('title').value;
  const content = document.getElementById('content').value;

  if (title && content) {
    const blog = {
      id: generateId(),
      title,
      content,
      date: getCurrentDate(),
    };

    saveBlog(blog);
    updateBlogMenu(JSON.parse(localStorage.getItem('blogs')) || []);
    blogForm.reset();
  }
});

// Save Blog
function saveBlog(blog) {
  const blogs = JSON.parse(localStorage.getItem('blogs')) || [];
  blogs.push(blog);
  localStorage.setItem('blogs', JSON.stringify(blogs));
}

// Delete Blog
function deleteBlog(id) {
  let blogs = JSON.parse(localStorage.getItem('blogs')) || [];
  blogs = blogs.filter(blog => blog.id !== id);
  localStorage.setItem('blogs', JSON.stringify(blogs));
  selectedBlog.innerHTML = ''; 
  loadBlogs(); 
}