Skip to content

[Feature Request] Add Eco Tips Page (eco-tips.html) #263

Description

@Riya-Kharade

💡 The Problem

Currently, EcoPulse focuses on pollution visualization and analytics, but it does not provide actionable guidance for users to reduce their environmental impact.

Users can understand pollution trends, but they are not given practical sustainability tips to apply in daily life.

This limits the platform’s educational and awareness value.


🚀 Proposed Solution

Create a new page called eco-tips.html that provides daily sustainability tips and interactive awareness content.

The page should include:

  • 🌿 Daily sustainability tips
  • 📂 Expandable accordion sections (categorized tips)
  • 🎲 "Tip of the Day" generator (randomized using JavaScript)

This page will be built using:

  • HTML for structure
  • Tailwind CSS for styling
  • Vanilla JavaScript for:
    • Random tip generation
    • Accordion toggle functionality

No backend required.


🎨 Visual Representation

The eco-tips.html page should include:

1️⃣ Hero Section

  • Heading: "Small Actions, Big Impact"
  • Short motivational tagline

2️⃣ Tip of the Day Section

  • Highlighted card
  • Random tip displayed on page load
  • "Generate New Tip" button
  • Smooth fade animation when tip changes

3️⃣ Categorized Accordion Sections

Categories such as:

  • 🚗 Travel & Transportation
  • ⚡ Energy Saving
  • 🥗 Sustainable Diet
  • ♻ Waste Management
  • 💧 Water Conservation

Each category:

  • Expand/collapse accordion style
  • Smooth transition animation
  • Clean eco-themed design

🛠️ Implementation Details

  • New File: eco-tips.html
  • Logic: Static JS array containing tips
  • Random Generator: Math.random() based selection
  • Accordion: Vanilla JS toggle with CSS transitions
  • Responsive Layout: Tailwind grid and spacing utilities
  • No new dependencies required

🎯 Impact

This feature will:

  • Increase educational value
  • Provide actionable environmental guidance
  • Improve user engagement
  • Strengthen awareness mission of EcoPulse
  • Make the platform more complete and purpose-driven

It transforms EcoPulse from a visualization tool into an awareness and action-driven sustainability platform.

Assign this issue to me under ECWOC'26

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions