EcoCycle is a simple educational web application designed to help people understand how to recycle materials properly. The website provides information on different types of recyclable materials, explains how they should be prepared before recycling, helps users locate nearby recycling centers, and includes an interactive quiz to test recycling knowledge.
The project focuses on promoting environmental awareness through a clean, user-friendly interface and interactive components built with basic web technologies.
Live Website:
https://etor01.github.io/HCI/
EcoCycle was designed as a lightweight educational platform that encourages responsible waste management. The website aims to make recycling knowledge accessible and engaging through structured content and simple interactive features.
The platform provides:
- Educational information on recyclable materials
- Guidance on proper recycling preparation
- A feature to locate recycling centers
- An interactive quiz to test user knowledge
The interface emphasizes clarity, minimal design, and ease of navigation to ensure users can quickly access the information they need.
The recycling guide provides categorized information about different recyclable materials. Each material category expands to display instructions on how to recycle it properly.
Materials covered include:
- Plastic
- Wood
- Metal
- Organic (Food and Yard Waste)
- Glass
Users can click on each category to view recycling guidelines and preparation tips.
The website includes a section that helps users locate nearby recycling centers. A "Locate Now" button is provided which can be extended to integrate with mapping services such as Google Maps or browser geolocation APIs.
This feature is intended to make it easier for users to identify where they can properly dispose of recyclable materials. It is under development for now, kindly check back frequently to see updates 🙂
EcoCycle includes a short quiz that tests users’ knowledge about recycling practices.
The quiz:
- Contains multiple-choice questions
- Evaluates user responses
- Displays the final score after submission
- Allows users to reset and retake the quiz
This feature encourages learning through engagement and helps reinforce recycling concepts.
The website was built using fundamental web technologies:
HTML5
Used to structure the content and layout of the webpage.
CSS3
Used for styling, layout design, and responsive formatting.
JavaScript (Vanilla JS)
Used to implement interactivity including:
- Accordion functionality
- Quiz scoring logic
- Button actions
- Dynamic content display
No external frameworks or libraries were used.
EcoCycle/ │ ├── index.html ├── style.css ├── script.js └── README.md
index.html
Contains the structure and content of the webpage.
style.css
Defines the visual design including layout, colors, spacing, and responsive behavior.
script.js
Handles all interactive behavior such as accordion toggling and quiz evaluation.
README.md
Provides documentation and explanation of the project.
The design of EcoCycle focuses on:
- Simplicity and clarity
- Minimalist eco-themed aesthetics
- Easy navigation
- Educational accessibility
The layout uses a clean structure with soft green color tones to visually reinforce the environmental theme.
The project is deployed using GitHub Pages.
GitHub Pages allows static websites to be hosted directly from a GitHub repository without requiring a separate hosting service.
Live site:
https://etor01.github.io/HCI/
Possible future enhancements include:
- Integrating a real map API for recycling center locations
- Adding more recycling categories and detailed instructions
- Implementing a searchable recycling database
- Adding animations for smoother interactions
- Improving accessibility features
- Expanding the quiz with more questions and feedback
Etornam Kordzo Ahiataku
Student ID: 336**22
Designed and developed as part of an academic project.
This project is intended for educational purposes.