---

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

2. Get 🌴All categories
   

https://openapi.programming-hero.com/api/categories

3. Get 🌴plants by categories
   

https://openapi.programming-hero.com/api/category/${id}

https://openapi.programming-hero.com/api/category/1

4. 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?

---

ans1: var is function scope and let and constant in block scope . let value is changeable in block scope but const is not change able.

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

---

Ans:

mao() return New array with transformed elements forEach() returns undefined filter()returns New array with filtered elements

3) What are arrow functions in ES6?

---

Ans3: Arrow functions provide a shorter syntax and don't have their own this, arguments, super, or new.target.

4) How does destructuring assignment work in ES6?

---

Ans4: Destructuring allows extracting values from arrays or properties from objects into distinct variables.

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

---

Ans5: Template literals provide an easy way to create strings with embedded expressions and multi-line strings.

⚙️ 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.

3. Card Contents Each card includes:

    - Image
   
    -  Name
   
    - Short description
   
    - Category
   
    - Price
   
    - Add to Cart button
   

4. 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 : https://heroic-kleicha-be3a01.netlify.app/
• GitHub Private Repository: https://github.com/ashrafulislam65/green-earth

---