Building a blogging app provides a platform for individuals or organizations to share their thoughts, knowledge, and expertise with a wider audience. Tailwind CSS provides a powerful utility-first approach to styling, allowing us to make a responsive user interface. JavaScript is used for dynamic content and interactivity.
Output Preview: Let us have a look at how the final output will look like.
Preview
Approach to create Blog Platform:
- Create an index.html file and set up the basic structure of the blogging platform. Include links to necessary stylesheets and scripts. Integrate TailwindCSS via CDN Link.
- Utilize Tailwind’s utility classes to the style various components of blogging platform such as headers, navigation bars, post cards and footers. The Tailwind’s extensive documentation and pre-designed components make this process straightforward.
- An array of blog objects containing information such as title, description, image URL, etc.
-
The displayBlogs()dynamically generates blog cards based on search queries and categories.The openModal() ddisplays detailed information about a blog in the modal dialog.The closeModal() hides the modal dialog. -
Attach event listeners to category links, search button, and search input to trigger the corresponding functions when clicked or typed in the
displayBlogs()function to initially populate the page with blog cards.
Example: Implementation of Blogging Platform in Tailwind CSS and JavaScript.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blogging Platform</title>
<link href=
rel="stylesheet">
</head>
<body class="bg-gray-100">
<nav class="bg-gray-800 text-white p-4">
<div class="container mx-auto flex
justify-between items-center">
<h1 class="text-xl font-bold">
Blogging Platform
</h1>
<div class="space-x-4">
<a href="#" class="category-link" data-category="HTML">
HTML Blogs
</a>
<a href="#" class="category-link" data-category="DSA">
DSA Blogs
</a>
<a href="#" class="category-link" data-category="PHP">
PHP Blogs
</a>
</div>
<div class="flex">
<input type="text"
id="searchInput"
placeholder="Search blogs..."
class="w-full px-4 py-2 rounded-md border
border-gray-300 focus:outline-none
focus:border-blue-500 text-gray-800">
<button id="searchButton"
class="px-4 py-2 ml-2 bg-blue-500 text-white
rounded-md hover:bg-blue-600
focus:outline-none">
Search
</button>
</div>
</div>
</nav>
<div class="container mx-auto mt-4">
<div id="blogCards" class="grid grid-cols-1 sm:grid-cols-2
lg:grid-cols-3 gap-8">
</div>
</div>
<div id="myModal" class="hidden fixed z-50 inset-0 bg-black
bg-opacity-50 flex justify-center
items-center">
<div class="modal-content bg-white rounded-md
p-8 max-w-lg w-full relative">
<span class="close absolute top-2 right-2
text-gray-600 text-2xl
cursor-pointer">
×
</span>
<img id="modalImage"
src="#"
alt="Blog Image"
class="w-full h-32 object-cover mb-4">
<h2 id="modalTitle"
class="text-lg font-semibold mb-2">
</h2>
<div id="modalContent"
class="text-gray-600 mb-4"></div>
<div id="authorDetails"
class="text-sm text-gray-500 flex items-center">
</div>
</div>
</div>
<script>
const blogs = [
{
id: 1, category: "HTML", title: "Introduction to HTML",
description:
"Learn the basics of HTML and its importance in web development.", content: "HTML content goes here...",
imageUrl:
date: "2024-02-17", authorName: "John Doe", authorImage:
},
{
id: 2, category: "DSA",
title: "Introduction to Data Structures",
description: "Explore different data structures and their applications.",
content: "DSA content goes here...",
imageUrl:
link:
date: "2024-02-18", authorName: "Jane Smith", authorImage:
},
{
id: 3, category: "PHP", title: "Getting Started with PHP",
description: "Learn the fundamentals of PHP programming language.",
content: "PHP content goes here...", imageUrl:
date: "2024-02-19", authorName: "Alex Johnson",
authorImage: "https://randomuser.me/api/portraits/men/3.jpg"
}
];
const blogCardsContainer = document.getElementById("blogCards");
const modal = document.getElementById("myModal");
const modalImage = document.getElementById("modalImage");
const modalTitle = document.getElementById("modalTitle");
const modalContent = document.getElementById("modalContent");
const authorDetails = document.getElementById("authorDetails");
const closeModalBtn = document.querySelector(".close");
function displayBlogs(query = "", category = "") {
blogCardsContainer.innerHTML = "";
const filteredBlogs = blogs.filter(blog => {
return blog.title.toLowerCase()
.includes(query.toLowerCase()) &&
(category === "" || blog.category === category);
});
filteredBlogs.forEach(blog => {
const card = document.createElement("div");
card.classList.add("bg-white", "p-4", "rounded-md", "shadow-md",
"cursor-pointer", "fadeIn", "transform",
"hover:scale-105", "transition-all", "duration-300");
card.innerHTML = `
<img src="${blog.imageUrl}"
alt="Blog Image"
class="w-full h-32 object-cover mb-4">
<h2 class="text-lg font-semibold mb-2">
${blog.title}
</h2>
<p class="text-gray-600 mb-4">${blog.description}</p>
<div class="text-sm text-gray-500">
${blog.date} by ${blog.authorName}
</div>
<button class="read-more-btn bg-blue-500
text-white py-1 px-2 mt-2
rounded hover:bg-blue-600
focus:outline-none">
Read More
</button>
`;
card.addEventListener("click", function () {
openModal(blog);
});
blogCardsContainer.appendChild(card);
});
}
function openModal(blog) {
modalImage.src = blog.imageUrl;
modalTitle.textContent = blog.title;
modalContent.textContent = blog.content;
authorDetails.innerHTML = `<img src="${blog.authorImage}"
alt="Author Image"
class="w-6 h-6 rounded-full mr-2">
${blog.authorName}`;
modal.classList.remove("hidden");
}
function closeModal() {
modal.classList.add("hidden");
}
closeModalBtn.addEventListener("click", closeModal);
document.querySelectorAll(".category-link").forEach(link => {
link.addEventListener("click", function (event) {
event.preventDefault();
const category = this.getAttribute("data-category");
displayBlogs("", category);
});
});
document.getElementById("searchButton")
.addEventListener("click", function () {
const query = document.getElementById("searchInput").value;
displayBlogs(query);
});
document.getElementById("searchInput")
.addEventListener("input", function () {
const query = this.value;
displayBlogs(query);
});
displayBlogs();
</script>
</body>
</html>
|
Output:
Output
Recommended Articles