A simple client-side blog application built with HTML, CSS, JavaScript, and Bootstrap 5, featuring a dark/light theme toggle and localStorage persistence for posts. Users can create, edit, and delete posts directly in the browser without a backend.
- Create, Edit, Delete Posts – All posts are saved in
localStorage. - Dynamic Blog Cards – Posts are rendered dynamically as Bootstrap cards.
- Dark/Light Theme Toggle – Switch between dark and light themes with a responsive icon.
- Modal Form – Create or edit posts using a Bootstrap modal.
- Persistent Storage – Posts remain available even after page reloads.
/blog
│
├── index.html # Main HTML file
├── style.css # Custom styles
├── index.js # JavaScript logic
├── screenshots
│ ├── desktop.png # Desktop screenshot
│ └── mobile.png # Mobile screenshot
└── README.md # Project documentation
- Open
index.htmlin your browser. - Click Create Post to open the modal.
- Enter a Title and Content, then click Save Post.
- Your post appears as a card in the main area.
- Edit or delete posts directly using the buttons on each card.
- Toggle between Dark/Light theme using the sun/moon icon.
🌐 Live Demo: Click Here for Live Demo
💻 Repository: View Source on GitHub
- HTML5 & CSS3
- JavaScript (ES6+)
- Bootstrap 5
- Bootstrap Icons
- LocalStorage API
- This project is purely client-side; there is no backend.
- Data persists via localStorage, so clearing browser data will remove all posts.
- The theme preference is saved in localStorage to persist user choice.
- MDN Web Docs – Event Propagation
- MDN Web Docs – Window: localStorage
- Bootstrap – Modal
- Google-Fonts
Developed by Abenezer
Junior developer