Here’s a complete Blog System project (HTML + CSS + JavaScript) with all basic features:
✅ Create Post
✅ Edit Post
✅ Delete Post
✅ Display Blogs
✅ Search Blog
✅ Uses LocalStorage
💻 Full Source Code
📄 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog System</title>
<link rel="stylesheet" href="style.css">
</head>
<body> <div class="container">
<h1>📝 Blog System</h1> <!-- Form -->
<form id="blogForm">
<input type="text" id="title" placeholder="Enter Title" required>
<textarea id="content" placeholder="Enter Content" required></textarea>
<button type="submit">Save Post</button>
</form> <!-- Search -->
<input type="text" id="search" placeholder="Search blog..."> <!-- Blog List -->
<div id="blogList"></div>
</div> <script src="script.js"></script>
</body>
</html>🎨 style.css
body {
font-family: Arial;
background: #f4f4f4;
margin: 0;
padding: 20px;
}.container {
max-width: 700px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
}h1 {
text-align: center;
}form input, form textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
}button {
padding: 10px 15px;
background: black;
color: white;
border: none;
cursor: pointer;
}.blog {
border: 1px solid #ddd;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
}.blog h3 {
margin: 0;
}.actions button {
margin-right: 5px;
background: gray;
}⚙️ script.js
let blogs = JSON.parse(localStorage.getItem("blogs")) || [];
let editIndex = -1;const form = document.getElementById("blogForm");
const blogList = document.getElementById("blogList");
const search = document.getElementById("search");form.addEventListener("submit", function(e) {
e.preventDefault(); const title = document.getElementById("title").value;
const content = document.getElementById("content").value; const blog = { title, content }; if (editIndex === -1) {
blogs.push(blog);
} else {
blogs[editIndex] = blog;
editIndex = -1;
} localStorage.setItem("blogs", JSON.stringify(blogs));
form.reset();
displayBlogs();
});function displayBlogs(filter = "") {
blogList.innerHTML = ""; blogs
.filter(blog => blog.title.toLowerCase().includes(filter.toLowerCase()))
.forEach((blog, index) => {
blogList.innerHTML += `
<div class="blog">
<h3>${blog.title}</h3>
<p>${blog.content}</p>
<div class="actions">
<button onclick="editBlog(${index})">Edit</button>
<button onclick="deleteBlog(${index})">Delete</button>
</div>
</div>
`;
});
}function deleteBlog(index) {
blogs.splice(index, 1);
localStorage.setItem("blogs", JSON.stringify(blogs));
displayBlogs();
}function editBlog(index) {
document.getElementById("title").value = blogs[index].title;
document.getElementById("content").value = blogs[index].content;
editIndex = index;
}search.addEventListener("input", function() {
displayBlogs(this.value);
});displayBlogs();
