https://github.com/ayokanmi-adejola/interactive-comments-section
A fully responsive and feature-rich comment system built as a Frontend Mentor challenge solution. Featuring real-time CRUD operations, upvote/downvote functionality, nested comment threading, user authentication simulation, and persistent data storage using localStorage. Built using HTML5, CSS3 , Vanilla JavaScript (ES6+), localStorage API
https://github.com/ayokanmi-adejola/interactive-comments-section
css3 flexbox-layout html5 localstorage-api mobile-first-workflow vanilla-js
Last synced: 8 months ago
JSON representation
A fully responsive and feature-rich comment system built as a Frontend Mentor challenge solution. Featuring real-time CRUD operations, upvote/downvote functionality, nested comment threading, user authentication simulation, and persistent data storage using localStorage. Built using HTML5, CSS3 , Vanilla JavaScript (ES6+), localStorage API
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/interactive-comments-section
- Owner: Ayokanmi-Adejola
- Created: 2025-07-28T16:44:03.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-29T21:15:47.000Z (11 months ago)
- Last Synced: 2025-09-30T00:00:36.912Z (9 months ago)
- Topics: css3, flexbox-layout, html5, localstorage-api, mobile-first-workflow, vanilla-js
- Language: JavaScript
- Homepage: https://interactive-comments-section-mauve-eta.vercel.app
- Size: 357 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Interactive Comments Section
A fully responsive and interactive comments system built with vanilla JavaScript, featuring real-time CRUD operations, voting functionality, and persistent data storage
## 🎯 Overview
This project is a solution to the [Interactive Comments Section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9). The challenge focuses on building a dynamic comment system that allows users to create, read, update, and delete comments and replies with a modern, responsive interface.
### The Challenge
Users should be able to:
- ✅ View the optimal layout for the app on any device screen size
- ✅ See hover states for all interactive elements
- ✅ Create, read, update, and delete comments and replies
- ✅ Upvote and downvote comments with real-time score updates
- ✅ Reply to comments with nested threading
- ✅ Edit their own comments with inline editing
- ✅ Delete comments with confirmation modal
- ✅ Persist data using localStorage (bonus feature)
- ✅ Responsive design for mobile and desktop
## ✨ Features
### Core Functionality
- **Full CRUD Operations**: Create, read, update, and delete comments and replies
- **Real-time Voting System**: Upvote and downvote with instant score updates
- **Nested Comment Threading**: Reply to comments with proper nesting
- **User Authentication Simulation**: Distinguish between current user and others
- **Confirmation Modals**: Safe deletion with user confirmation
### Technical Features
- **Responsive Design**: Mobile-first approach with seamless desktop scaling
- **Data Persistence**: localStorage integration for data retention
- **Accessibility**: Keyboard navigation and focus management
- **Performance Optimized**: Efficient DOM manipulation and event handling
- **Clean Architecture**: Modular JavaScript with separation of concerns
### UI/UX Features
- **Smooth Animations**: Hover effects and transitions
- **Interactive Elements**: Visual feedback for all user actions
- **Modern Design**: Clean, professional interface following design specifications
- **Cross-browser Compatibility**: Works across all modern browsers
## 🛠 Technologies Used
- **HTML5**: Semantic markup and accessibility features
- **CSS3**:
- Custom properties (CSS variables)
- Flexbox and CSS Grid
- Mobile-first responsive design
- Smooth transitions and animations
- **Vanilla JavaScript (ES6+)**:
- DOM manipulation
- Event delegation
- localStorage API
- Modular functions
- Arrow functions and template literals
## 📦 Installation
1. **Clone the repository**
```bash
git clone https://github.com/Ayokanmi-Adejola/interactive-comments-section.git
cd interactive-comments-section
```
2. **Open the project**
```bash
# Option 1: Open directly in browser
open index.html
# Option 2: Use a local server (recommended)
npx http-server
# or
python -m http.server 8000
```
3. **View in browser**
- Navigate to `http://localhost:8000` (if using local server)
- Or open `index.html` directly in your browser
## 🎮 Usage
### Adding Comments
1. Type your comment in the textarea at the bottom
2. Click the "SEND" button
3. Your comment appears at the top of the list
### Voting on Comments
- Click the **+** button to upvote
- Click the **-** button to downvote
- Scores update in real-time
### Replying to Comments
1. Click the "Reply" button on any comment
2. Type your reply in the form that appears
3. Click "REPLY" to submit
### Editing Comments
1. Click "Edit" on your own comments (marked with "you" badge)
2. Modify the text in the inline editor
3. Click "UPDATE" to save changes
### Deleting Comments
1. Click "Delete" on your own comments
2. Confirm deletion in the modal that appears
3. Comment is permanently removed
## 📁 Project Structure
```
interactive-comments-section/
├── index.html # Main HTML file
├── style.css # Complete CSS styling
├── script-clean.js # Main JavaScript functionality
├── data.json # Initial comment data
├── images/ # Assets and avatars
│ ├── avatars/ # User avatar images
│ └── *.svg # Icon files
├── design/ # Design reference files
└── README.md # Project documentation
```
## 🧠 Key Learnings
### JavaScript Concepts Mastered
- **DOM Manipulation**: Efficient element creation and management
- **Event Handling**: Delegation and dynamic event binding
- **Data Management**: localStorage integration and state management
- **Modular Programming**: Clean, reusable function architecture
### CSS Techniques Applied
- **CSS Custom Properties**: Maintainable design system
- **Responsive Design**: Mobile-first methodology
- **Flexbox & Grid**: Modern layout techniques
- **Accessibility**: Focus states and keyboard navigation
### Problem-Solving Highlights
- Implemented nested comment threading with proper data structure
- Created smooth user experience with real-time updates
- Solved data persistence challenges with localStorage
- Optimized performance with efficient rendering strategies
## 🚀 Future Enhancements
- [ ] **Backend Integration**: Connect to a real database
- [ ] **User Authentication**: Implement proper user login system
- [ ] **Real-time Updates**: WebSocket integration for live comments
- [ ] **Rich Text Editor**: Markdown support and formatting options
- [ ] **Image Uploads**: Allow users to attach images to comments
- [ ] **Notification System**: Alert users of replies and mentions
- [ ] **Comment Search**: Search and filter functionality
- [ ] **Moderation Tools**: Admin controls for content management
## 👨💻 Author
- Frontend Mentor: [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)
## 🙏 Acknowledgments
- [Frontend Mentor](https://www.frontendmentor.io) for providing the design challenge
- The Frontend Mentor community for inspiration and feedback
- [Google Fonts](https://fonts.google.com) for the Rubik font family# Interactive-Comments-Section