blog.js

const modal = document.getElementById("modal");
const addBtn = document.getElementById("addBlogBtn");
const blogContainer = document.getElementById("blogContainer");
const content = document.getElementById("content");
const searchInput = document.getElementById("searchInput");


let blogs = JSON.parse(localStorage.getItem("blogs")) || [];
renderBlogs();


addBtn.onclick = () => {
    modal.style.display = "flex";
};

function closeModal() {
    modal.style.display = "none";
}


function addBlog() {
    const title = document.getElementById("title").value;
    const image = document.getElementById("image").value;
    const text = content.value;

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

    blogs.push({ title, image, text });
    localStorage.setItem("blogs", JSON.stringify(blogs));

    renderBlogs();
    modal.style.display = "none";

    document.getElementById("title").value = "";
    document.getElementById("image").value = "";
    content.value = "";
}


function renderBlogs() {
    blogContainer.innerHTML = "";

    blogs.forEach(blog => {
        const card = document.createElement("div");
        card.className = "blog-card";

        card.innerHTML = `
            <img src="${blog.image}" />
            <h2>${blog.title}</h2>
            <p>${blog.text}</p>
            <button class="like-btn">❤️ Like</button>
        `;

        blogContainer.appendChild(card);
    });
}


function formatText(type) {
    if (type === "bold") {
        content.style.fontWeight = "bold";
    } else if (type === "italic") {
        content.style.fontStyle = "italic";
    }
}

function changeFont(font) {
    content.style.fontFamily = font;
}


searchInput.addEventListener("keyup", function () {
    const searchText = searchInput.value.toLowerCase();
    const blogCards = document.querySelectorAll(".blog-card");

    let visibleCount = 0;

    blogCards.forEach(card => {
        const title = card.querySelector("h2").innerText.toLowerCase();

        if (title.includes(searchText)) {
            card.style.display = "block";
            visibleCount++;
        } else {
            card.style.display = "none";
        }
    });

    
    if (visibleCount === 0) {
        blogCards.forEach(card => {
            card.style.display = "block";
        });
    }
});