Write renderBlog(blog)
S
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
Save
Comments
Log in to leave a comment.
