/B12A06-Green-Earth

WELCOME TO ( সহজ সরল সিম্পল ) ASSIGNMENT-006

📅 Deadline For 60 marks: 9th September, 2025 (11:59 pm ⏱️)

📅 Deadline For 50 marks : 13th September , 2025 (6:00 pm⏱️)

📅 Deadline For 30 marks: Any time after 13the September , 2025 (6:01 pm⏱️).

Green Earth

Private Repository: https://classroom.github.com/a/nVZrg5R9

Alternative Private Repository: https://classroom.github.com/a/KCGI14ST

Alternative Private Repository: https://classroom.github.com/a/JMuIYqgK

🌴 API Endpoints

  1. Get 🌴All Plants
https://openapi.programming-hero.com/api/plants
  1. Get 🌴All categories 
https://openapi.programming-hero.com/api/categories
  1. Get 🌴plants by categories 
https://openapi.programming-hero.com/api/category/${id}
https://openapi.programming-hero.com/api/category/1
  1. Get 🌴Plants Detail 
https://openapi.programming-hero.com/api/plant/${id}
https://openapi.programming-hero.com/api/plant/1

✅ Main Requirements

1) Navbar

  • Website logo/name on the left
  • Menu items in the center
  • Plant a Tree button on the right

2) Banner

  • A background image
  • A title and subtitle
  • A centered button

3) About Campaign

  • Section heading
  • Image on the left, text on the right

4) Our Impact Section

  • Show 3 cards with campaign statistics

5) Plant a Tree Today Section & Footer

  • Form: Name, Email, Number of Trees
  • Footer with copyright info

6) Responsiveness

  • Website must be mobile responsive

7) Create a README file to answer the following question-

1) What is the difference between var, let, and const?

2) What is the difference between map(), forEach(), and filter()?

3) What are arrow functions in ES6?

4) How does destructuring assignment work in ES6?

5) Explain template literals in ES6. How are they different from string concatenation?

⚙️ Functionalities

  1. Category Loading Load Tree Categories dynamically on the left side.

  2. Category Click → Tree Data On clicking a category: load trees of that category.

Display in a 3-column card layout.

  1. Card Contents Each card includes:

     - Image

 -  Name

 - Short description

 - Category

 - Price

 - Add to Cart button

  2. Modal on Card Click Clicking a tree name on a card opens a modal with full tree details.

🧪 Challenges

1) Add to Cart 
Clicking Add to Cart: - Adds the tree to Cart List
                      - Shows tree name 

2) Total Calculation 
Calculate total price of trees in cart.

3) Remove from Cart 
Clicking ❌ removes tree and deducts price from total.

4) Loading Spinner
Show spinner while data is loading.

5) Active Button State 
Highlight active category button when selected.

🧰 Technology Stack:

    HTML

    CSS (Vanilla / Tailwind / DaisyUI)

    JavaScript (Vanilla only, no frameworks)

📌 Rules ✅ At least 5 meaningful commits

❌ No dummy text or Lorem Ipsum — must use relevant content

🔗 Submission

  • Live Link : YOUR_DEPLOYED_URL_HERE
  • GitHub Private Repository: YOUR_REPO_URL_HERE