Skip to content

alka485/SBA-308A-JavaScript-Web-Application

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Weather App

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.

Features

  • 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.

Technologies Used

  • HTML5
  • CSS3
  • JavaScript (ES6+)
  • OpenWeatherMap API

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

  • Web browser (e.g., Chrome, Firefox)
  • Internet connection

Installation

  1. Clone the repository: git clone https://github.com/yourusername/weather-app.git

  2. Navigate to the project directory: bash cd weather-app

  3. Open index.htmlin your preferred web browser.

Usage

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

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

  1. Toggle Units:
  • Use the units dropdown to switch between metric and imperial units.

  • The temperature and wind speed will be updated accordingly.

Code Overview

HTML

The HTML structure consists of a container that holds the search box, weather information, and the unit toggle.

CSS

The CSS file (style.css) contains styles for the layout, search box, weather information, and icons.

JavaScript

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.

API Integration

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.

Github URL

https://github.com/alka485/SBA-308A-JavaScript-Web-Application.git

Deployed Website

https://alka485.github.io/SBA-308A-JavaScript-Web-Application/

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published