Untitled

document.addEventListener('DOMContentLoaded', () => {
    const loginButton = document.getElementById('login-button');
    const registerButton = document.getElementById('register-button');
    const logoutButton = document.getElementById('logout-button');
    const loginSection = document.getElementById('login-section');
    const registerSection = document.getElementById('register-section');
    const createPostSection = document.getElementById('create-post');
    const postsSection = document.getElementById('posts');

    const postForm = document.getElementById('post-form');
    const postsContainer = document.getElementById('posts-container');
    const loginForm = document.getElementById('login-form');
    const registerForm = document.getElementById('register-form');

    let posts = JSON.parse(localStorage.getItem('posts')) || [];
    let users = JSON.parse(localStorage.getItem('users')) || [];
    let currentUser = localStorage.getItem('currentUser');
    let editIndex = null;

    const checkAuth = () => {
        if (currentUser) {
            loginSection.style.display = 'none';
            registerSection.style.display = 'none';
            createPostSection.style.display = 'block';
            postsSection.style.display = 'block';
            logoutButton.style.display = 'inline-block';
            loginButton.style.display = 'none';
            registerButton.style.display = 'none';
        } else {
            loginSection.style.display = 'none';
            registerSection.style.display = 'none';
            createPostSection.style.display = 'none';
            postsSection.style.display = 'none';
            logoutButton.style.display = 'none';
            loginButton.style.display = 'inline-block';
            registerButton.style.display = 'inline-block';
        }
    };

    checkAuth();

    loginButton.addEventListener('click', () => {
        loginSection.style.display = 'block';
        registerSection.style.display = 'none';
    });

    registerButton.addEventListener('click', () => {
        loginSection.style.display = 'none';
        registerSection.style.display = 'block';
    });

    logoutButton.addEventListener('click', () => {
        currentUser = null;
        localStorage.removeItem('currentUser');
        checkAuth();
    });

    registerForm.addEventListener('submit', (event) => {
        event.preventDefault();

        const username = document.getElementById('register-username').value;
        const password = document.getElementById('register-password').value;

        if (users.some(user => user.username === username)) {
            alert('Username already exists.');
        } else {
            users.push({ username, password });
            localStorage.setItem('users', JSON.stringify(users));
            alert('Registration successful. Please login.');
            registerForm.reset();
        }
    });

    loginForm.addEventListener('submit', (event) => {
        event.preventDefault();

        const username = document.getElementById('login-username').value;
        const password = document.getElementById('login-password').value;

        const user = users.find(user => user.username === username && user.password === password);

        if (user) {
            currentUser = username;
            localStorage.setItem('currentUser', currentUser);
            checkAuth();
        } else {
            alert('Invalid username or password.');
        }
    });

    postForm.addEventListener('submit', (event) => {
        event.preventDefault();

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

        if (editIndex !== null) {
            posts[editIndex] = { title, content, author: currentUser };
            editIndex = null;
        } else {
            posts.push({ title, content, author: currentUser });
        }

        localStorage.setItem('posts', JSON.stringify(posts));
        postForm.reset();
        displayPosts();
    });

    function displayPosts() {
        postsContainer.innerHTML = '';

        posts.forEach((post, index) => {
            const postElement = document.createElement('div');
            postElement.classList.add('post');

            const postTitle = document.createElement('h3');
            postTitle.textContent = post.title;

            const postContent = document.createElement('p');
            postContent.textContent = post.content;

            const postAuthor = document.createElement('p');
            postAuthor.textContent = `Author: ${post.author}`;
            postAuthor.style.fontStyle = 'italic';
            postAuthor.style.fontSize = '0.8em';

            const postButtons = document.createElement('div');
            postButtons.classList.add('post-buttons');

            if (post.author === currentUser) {
                const editButton = document.createElement('button');
                editButton.textContent = 'Edit';
                editButton.addEventListener('click', () => editPost(index));

                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.addEventListener('click', () => deletePost(index));

                postButtons.appendChild(editButton);
                postButtons.appendChild(deleteButton);
            }

            postElement.appendChild(postTitle);
            postElement.appendChild(postContent);
            postElement.appendChild(postAuthor);
            postElement.appendChild(postButtons);

            postsContainer.appendChild(postElement);
        });
    }

    function editPost(index) {
        const post = posts[index];
        document.getElementById('title').value = post.title;
        document.getElementById('content').value = post.content;
        editIndex = index;
    }

    function deletePost(index) {
        posts.splice(index, 1);
        localStorage.setItem('posts', JSON.stringify(posts));
        displayPosts();
    }

    displayPosts();
});