Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michle99/sba_321_expense_tracker
Expense Tracker for Angular SBA 321 assessment.
https://github.com/michle99/sba_321_expense_tracker
angular-cli angularv17 expense-tracker typscript
Last synced: about 1 month ago
JSON representation
Expense Tracker for Angular SBA 321 assessment.
- Host: GitHub
- URL: https://github.com/michle99/sba_321_expense_tracker
- Owner: Michle99
- Created: 2024-01-08T02:24:48.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-01-08T23:07:24.000Z (12 months ago)
- Last Synced: 2024-01-09T07:36:21.322Z (12 months ago)
- Topics: angular-cli, angularv17, expense-tracker, typscript
- Language: TypeScript
- Homepage:
- Size: 211 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Expense Tracker Angular App
## Overview
The Expense Tracker Angular App is a simple web application built with Angular that allows users to track their expenses. It provides features to add new expenses, view a list of existing expenses, and navigate through different sections of the application.
## Screenshot
## Table of Contents
- [Expense Tracker Angular App](#expense-tracker-angular-app)
- [Overview](#overview)
- [Screenshot](#screenshot)
- [Table of Contents](#table-of-contents)
- [Features](#features)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
## Features
1. **Add Expense:** Users can add new expenses by providing a description and amount.
2. **View Expenses:** Users can view a list of all recorded expenses.
3. **Delete Expense:** Users can delete specific expenses from the list.
4. **Navigation:** The app includes a navigation bar with links to different sections, such as Home, Expenses, and About.
5. **Routing:** Angular routing is used to navigate between different views, creating a seamless single-page application experience.
6. **Styling:** Component-specific styling is implemented using Angular's view encapsulation, and attribute and structural directives are used for dynamic styling and class binding.
7. **Custom Directive:** A custom directive, `appHighlight`, is created and used to dynamically highlight certain elements.
8. **Angular Forms:** Angular forms are utilized for capturing and validating user input.
## Getting Started
### Prerequisites
Make sure you have the following installed on your machine:
- [Node.js](https://nodejs.org/)
- [Angular CLI](https://cli.angular.io/)
### Installation
1. Clone the repository:
```bash
git clone https://github.com/Michle99/expense-tracker-angular.git
```
2. Navigate to the project directory:
```bash
cd expense-tracker-angular
```
3. Install dependencies:
```bash
npm install
```
## Usage
1. Start the Angular development server:
```bash
ng serve
```
2. Open your browser and go to `http://localhost:4200` to view the app.
3. Use the navigation links to explore different sections of the app.