🌿 Plant Catalog

Welcome to the Plant Catalog! This project is an Angular application that showcases a beautiful catalog of plants. Each plant in the catalog is presented with an image and description. Users can click on a plant to view more details about it.

This project was generated with Angular CLI version 18.0.3.

Features

• Home Page: Displays a catalog of plants with their images and names.
• Details Page: Provides more detailed information about each plant.
• Responsive Design: The application is optimized for both desktop and mobile devices.
• Interactive UI: Hover effects on plant images reveal additional details.

Tech Stack

• Angular: Framework for building the web application.
• TypeScript: Used for writing type-safe JavaScript.
• CSS: Custom styles for a visually appealing design.
• Bootstrap: For responsive design and layout.

Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/9elmaz9/Plant_Catalog_Angular.git
   cd Plant_Catalog_Angular
   

2. Install dependencies: npm install

3. Run the application: ng serve --open

Project Structure

• src/app: Contains the main application code.
• plant-list: Component for displaying the list of plants.
• plant-details: Component for displaying detailed information about a specific plant.
• plant.ts: Model for plant data.
• app.routes.ts: Application routes configuration.
• app.component.ts: Main application component.
• public/assets: Contains images of the plants.

##Details Page

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please create an issue or submit a pull request.

Feel free to customize this README to better suit your project's needs and style!