A simple weather application that provides current weather information based on the user's location or a searched city.
- Fetches current weather data for the user's location using geolocation.
- Allows users to search for weather information by city name.
- Displays temperature, weather conditions, humidity, and wind speed.
- User-friendly interface.
- Forecast of Next 3 Days
- HTML
- TailWind Css
- JavaScript
- OpenWeatherMap API
-
Clone the repository:
git clone https://github.com/SohamDeshmukh1/Weather-App.git
-
Navigate to the project directory:
cd Weather-App
-
Open
index.html
in your preferred web browser.
- Upon loading, the app will attempt to fetch the current weather data based on your location.
- To search for a specific city's weather, enter the city name in the search box and click the search button.
To customize the styles of the application, you can edit the CSS files directly:
- Open the
output.css
file located in the project directory. - Make your desired changes to the CSS rules.
- Save the file and refresh your browser to see the changes.
To start using Tailwind CSS:
-
Install Tailwind CSS via npm:
npm install tailwindcss
-
Create a
tailwind.config.js
file:npx tailwindcss init
-
Configure your template paths in
tailwind.config.js
:module.exports = { content: ["./*.html"], theme: { extend: {}, }, plugins: [], }
-
Create a
styles.css
file and import Tailwind's base, components, and utilities:@tailwind base; @tailwind components; @tailwind utilities;
-
Build your CSS:
npx tailwindcss -i ./styles.css -o ./output.css --watch
-
Include the compiled
output.css
in yourindex.html
file:<link href="output.css" rel="stylesheet">
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch
). - Make your changes and commit them (
git commit -m 'Add new feature'
). - Push to the branch (
git push origin feature-branch
). - Open a Pull Request.
This project is licensed under the MIT License.
- OpenWeatherMap for providing the weather data API.