🌿 CleanCity+ Building Cleaner, Greener Cities — One Item at a Time. 🧭 Overview
CleanCity+ is a modern, web-based application designed to promote sustainability and inspire eco-friendly habits. It empowers individuals and communities to track recycling efforts, learn about waste categories, earn achievement badges, and make pledges toward a cleaner, greener future.
With a smooth, responsive interface built on Bootstrap 5, CleanCity+ combines educational content and interactivity to turn environmental awareness into meaningful action.
✨ Features 🏠 Home Page
A welcoming landing page featuring:
A bold hero section with a call to action.
Inspiring recycling facts and visuals.
An introduction to CleanCity+’s mission and goals.
🗑️ Waste Categories
Learn about:
Plastic, Paper, Organic, E-waste, and Glass waste.
Proper disposal methods for each category.
Environmental impacts and recycling tips.
♻️ Recycling Tracker
An interactive tool that allows users to:
Log recycling activities by category and quantity.
Sort, search, and delete entries easily.
View progress using Chart.js visualizations.
Earn milestone badges such as Recycling Starter or Eco Champion.
🌍 Pledge Section
Users can:
Commit to sustainable habits (e.g., “Recycle 5 bottles weekly”).
Track progress based on logged recycling items.
Receive motivational feedback to stay consistent.
📱 Responsive Design
Fully optimized for both desktop and mobile using Bootstrap 5.3.3, ensuring a smooth experience across devices.
🧰 Technologies Used Technology Purpose HTML5 Semantic structure and layout. CSS3 Custom styling and responsive design. Bootstrap 5.3.3 Framework for responsiveness and components. JavaScript (ES6) Interactivity, DOM manipulation, and animations. Chart.js Bar charts for visualizing recycling totals. Font Awesome Icons for social media and contact links. 🗂️ Project Structure CleanCity+/ │ ├── assets/ │ ├── cleancity-workers.jfif # About section image │ ├── hero-image.jpg # Hero section background image │ ├── codes/ │ ├── index.html # Home page │ ├── categories.html # Waste categories page │ ├── tracker.html # Recycling tracker page │ ├── pledge.html # Pledge commitment page │ ├── styles.css # Custom styles │ ├── scripts.js # JavaScript for interactivity ├── README.md # This file └── LICENSE # MIT License (optional)
⚙️ Installation & Setup
Follow these simple steps to run CleanCity+ locally:
1️⃣ Clone the Repository git clone https://github.com/kontractour/CleanCity+.git cd CleanCity+
2️⃣ Dependencies
No server setup required — CleanCity+ runs directly in your browser. Ensure your internet connection is active to load:
Bootstrap,
Chart.js, and
Font Awesome (via CDNs).
3️⃣ Launch the Application
Open index.html in your preferred browser:
Double-click the file, or
Use a local dev server (e.g., live-server via npm).
🚀 Usage Guide 🧭 Navigation
Use the top navigation bar to access:
Home
Waste Categories
Recycling Tracker
Pledge
📊 Tracker
Input a waste category and quantity to log recycling items.
Sort, search, or delete entries with ease.
Watch your chart and achievement badges update automatically.
🌱 Pledge
Make a recycling commitment and track your progress.
View motivational prompts tied to your recycling data.
📩 Contact
Use the footer links to:
Connect on social media,
Send an email, or
Learn more about the developer.
🤝 Development & Contributing
Contributions are welcome! Follow these steps to contribute to CleanCity+:
1️⃣ Fork the Repository
Create your own copy of the project on GitHub.
2️⃣ Clone Your Fork git clone https://github.com/yourusername/CleanCity+.git
3️⃣ Create a New Branch git checkout -b feature/your-feature-name
4️⃣ Make and Commit Changes git add . git commit -m "Describe your feature or fix"
5️⃣ Push and Submit a Pull Request git push origin feature/your-feature-name
Then open a Pull Request on the original repo and describe your update.
📜 License
This project is licensed under the MIT License. See the LICENSE file for full details.
📧 Contact
Developer: Godswill Okereke
📩 Email: okerekegodswill7@gmail.com
🌐 LinkedIn: linkedin.com/in/godswillokereke
📞 Phone: +234 810 553 3755
🌟 Acknowledgments
CleanCity+ is inspired by the global movement toward sustainability, climate action, and environmental awareness. Every small recycling step contributes to a massive collective change. 🌍💚
🔮 Future Improvements
🔐 User authentication for personalized tracking.
💾 Persistent data storage via localStorage or backend database.
📱 Enhanced mobile responsiveness with touch gestures.
🌐 Integration of real-time community statistics and leaderboards.
💚 “CleanCity+ — Because every bottle, bag, and battery counts.”