Skip to content

emreozturken/TRWeather

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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. 1_1

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published