Skip to content

Write renderBlog(blog)

S
skipPro
9/28/2026 · 8 views
function renderBlog(blog) {
    const article = document.createElement("article");
    article.classList.add("blog-detail");

    const title = document.createElement("h1");
    title.textContent = blog.title;

    const date = document.createElement("p");
    date.classList.add("blog-date");
    date.textContent = new Date(blog.publishedAt || blog.createdAt).toLocaleDateString();

    article.append(date, title);

    if (blog.coverImageUrl) {
        const cover = document.createElement("img");
        cover.classList.add("blog-cover");
        cover.src = blog.coverImageUrl.startsWith("/") ? API + blog.coverImageUrl : blog.coverImageUrl;
        cover.alt = blog.title;
        article.append (cover);
    }

    const tags = document.createElement("div");
    tags.classList.add("blog-tags");

    blog.tags.forEach((tag) => {
        const span = document.createElement("span");
        span.classList.add("blog-tag");
        span.textContent = tag;
        tags.append(span);
    });

    const stats = document.createElement("p");
    stats.classList.add("blog-stats");
    stats.textContent = `❤️ ${blog.likeCount}  👁️ ${blog.viewCount}`;

    const content = document.createElement("div");
    content.classList.add("blog-content");
    // renderContent (blog.content, content); // turn this on in Part 8

    article.append(tags, stats, content); blogContainer.append(article);
    blogContainer.append(article)
}

async function loadBlog() {
    const blog = await getBlog(slug);
    renderBlog(blog)
}

loadBlog()

enjoy

Comments

Log in to leave a comment.