This is a simple and interactive weather forecasting application. It allows users to search for the current weather in any city, use their current location to get weather information, and toggle between metric and imperial units.
- Search for weather information by city name.
- Use current location to get weather details.
- Toggle between metric (Celsius) and imperial (Fahrenheit) units.
- Displays temperature, humidity, wind speed, and weather conditions.
- User-friendly interface with icons representing weather conditions.
- HTML5
- CSS3
- JavaScript (ES6+)
- OpenWeatherMap API
To get a local copy up and running, follow these simple steps.
- Web browser (e.g., Chrome, Firefox)
- Internet connection
-
Clone the repository: git clone
https://github.com/yourusername/weather-app.git -
Navigate to the project directory: bash
cd weather-app -
Open
index.htmlin your preferred web browser.
- Search by City:
-
Enter the name of the city in the search input field.
-
Click on the search button.
-
The weather information for the specified city will be displayed.
- Use Current Location:
-
Click on the current location button.
-
Allow the browser to access your location.
-
The weather information for your current location will be displayed.
- Toggle Units:
-
Use the units dropdown to switch between metric and imperial units.
-
The temperature and wind speed will be updated accordingly.
The HTML structure consists of a container that holds the search box, weather information, and the unit toggle.
The CSS file (style.css) contains styles for the layout, search box, weather information, and icons.
The JavaScript file (script.js) handles the following:
- Fetching weather data from the OpenWeatherMap API.
- Updating the DOM with the fetched weather information.
- Handling search and current location functionalities.
- Toggling between metric and imperial units.
The app uses the OpenWeatherMap API to fetch weather data. You need an API key to access the weather data. Replace YOUR_API_KEY in the script.js file with your actual API key.
https://github.com/alka485/SBA-308A-JavaScript-Web-Application.git
https://alka485.github.io/SBA-308A-JavaScript-Web-Application/