Weather App

Quick Access

Explore the live Weather App at https://bethsirak.github.io/weatherCfgProject/.

Table of Contents

• Introduction
• Features
• Getting Started
• API Key
• Styling
• Ignored Files
• Contributions
• How to Use
• Feedback and Future Improvements
• Quick Access

Introduction

This is a simple Weather App that allows users to get current weather information for different locations.

Features

• Search by Location: Users can enter a location name in the search bar to get weather information for that location.
• Dynamic Background: The app's background changes based on the temperature. If the temperature is greater than 16°C, a sunset background is displayed; otherwise, a mountains background is shown.

Getting Started

To run the Weather App on your local machine, follow these steps:

1. Clone the repository to your local machine:

git clone <repository-url> npm install npm start

The app should now be running on http://localhost:3000.

API Key

Please note that this app uses the OpenWeatherMap API to fetch weather data. To run the app successfully, you need to obtain your API key from OpenWeatherMap and replace the existing API key in App.js.

Styling

The app uses custom CSS for styling, which is defined in the index.css file.

Ignored Files

The following files and directories are ignored by Git:

• /node_modules: The folder containing the installed npm packages.
• /build: Folder containing production build files.
• .DS_Store: macOS system file that stores folder attributes.
• .env.local, .env.development.local, .env.test.local, .env.production.local: Environment variable files specific to different environments.
• npm-debug.log*, yarn-debug.log*, yarn-error.log*: Logs from npm or yarn.

Contributions

Contributions to the project are welcome! If you find any bugs or have suggestions for improvements, feel free to open an issue or submit a pull request.

Thank you for using the Weather App! If you have any questions or need further assistance, please don't hesitate to reach out. Happy coding!

How to Use

Set Budget:

1. Enter the total budget amount in the input field under "Set Budget" and click the "Set Budget" button.

Add Expenses:

1. Enter the expense name and amount in the input fields under "Add Expenses."
2. Click the "Add Expense" button to add the expense to the list.

Edit or Delete Expenses:

1. Each expense in the list has edit and delete buttons.
2. Click the "Edit" button to modify the expense name and amount.
3. Click the "Delete" button to remove the expense from the list.

Track Expenses:

The app will display the total expenses and the remaining balance based on the set budget.

Contributions

Contributions to the project are welcome! If you find any bugs or have suggestions for improvements, feel free to open an issue or submit a pull request.

Quick Access

You can quickly access the deployed version of the Budget App by clicking here.

Feedback and Future Improvements

I found this project to be a great learning experience while working with React and managing budget and expenses. Some future improvements that I have in mind for the Budget App are:

• Enhancing the user interface with more intuitive styling and visual feedback.
• Adding user authentication to allow multiple users to have their separate budgets and expenses.
• Implementing data persistence to store budget and expense data even after the user closes the app.

I am open to any feedback and ideas for improvement. Feel free to reach out if you have any suggestions!

Thank you for using the Budget App! Happy budgeting!