TRWeather TRWeather is a weather application built using React. It allows users to check the current weather information for a selected city, including temperature, humidity, wind speed, and weather conditions.
Features Check weather data for a specific location.
View current temperature, humidity, wind speed, and weather conditions.
Clean and responsive design with an easy-to-use interface.
Technologies Used React - Frontend framework
CSS - For styling the app
OpenWeather API - For fetching weather data (You will need to set up an API key)
Getting Started Follow these steps to get your development environment running:
Prerequisites Node.js installed on your computer. You can download it from Node.js.
npm or yarn for package management.
Installation Clone the repository:
git clone https://github.com/emreozturken/TRWeather.git Navigate to the project folder:
cd TRWeather Install the dependencies:
Using npm: npm install Or using yarn:
yarn install Setting Up the OpenWeather API You will need an API key from OpenWeatherMap to fetch weather data. Here’s how you can get one:
Go to OpenWeatherMap and create an account.
Get your API key by signing up for their API service.
Add the API key to your project:
In the App.js or wherever you're fetching the weather data, replace YOUR_API_KEY with your actual API key.
Run the App Once everything is set up, run the app locally:
npm start Or using yarn:
yarn start This will start the development server and open the app in your default browser at http://localhost:3000.
Folder Structure TRWeather/ ├── public/ │ ├── index.html # Main HTML file │ ├── logo.svg # The logo and favicon ├── src/ │ ├── App.js # Main React component │ ├── App.css # CSS styles for the app │ ├── index.js # Entry point for React └── README.md # This file Styling The project uses CSS for styling the components. In particular:
Flexbox is used to center the button in the middle of the screen.
A large button is created to make it user-friendly, similar to the Google search button style.
CSS Classes button-container: A flex container that centers the button both horizontally and vertically.
get-weather-btn: The main button, styled with a blue background and white text.
License This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments OpenWeatherMap API for weather data.
This project was built using Create React App.
You can replace the placeholder YOUR_API_KEY in your app with your actual OpenWeather API key and run the app as mentioned. Feel free to add any specific sections or details about the app.