Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Weather_Forecast_API #388

Merged
merged 3 commits into from
Aug 9, 2024
Merged

Weather_Forecast_API #388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d8f8474
Weather_Forecast_API is added
pallasivasai Aug 8, 2024
2327278
Merge branch 'master' into weather8384
pallasivasai Aug 8, 2024
faeac3c
Merge branch 'master' into weather8384
Kritika30032002 Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions New_APIs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,7 @@
|[Social Media Analytics API](./Social_Media_Analytics_AP/)|This demonstrates how to create a Social Media Analytics API to retrieve user engagement data like posts, likes, comments, and shares.|
|[Voice_Recognition_API](./Voice_Recognition_API/)|This demonstrates how a meachine retrieve user engagement only Voice|
|[Cryptocurrency_API](./Cryptocurrency_API/)|This demonstrates how a convert Cryptocurrency and spefic currency to dollars only|
|[Weather_Forecast_API](./Weather_Forecast_API/)|This demonstrates we can know weather report via api and spefic locactions only|



34 changes: 34 additions & 0 deletions New_APIs/Weather_Forecast_API/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# Weather Forecast API

This project is a simple web application that fetches and displays the current weather information for a specified city using the OpenWeatherMap API.

## Features

- Input a city name to fetch its current weather, including temperature and description.
- Display the fetched data on the web page.

## Technologies Used

- HTML
- CSS
- JavaScript
- [OpenWeatherMap API](https://openweathermap.org/api)

## How to Run

1. Clone the repository or download the files.
2. Replace `YOUR_API_KEY` in `script.js` with your OpenWeatherMap API key.
3. Open the `index.html` file in your web browser.
4. Enter a city name (e.g., `New York`, `London`) in the input box and click the "Get Weather" button to see the current weather.

## Example Usage

- Input: `London`
- Output:
- City: London
- Temperature: 15°C
- Weather: clear sky

## License

This project is open-source and available under the MIT License.
18 changes: 18 additions & 0 deletions New_APIs/Weather_Forecast_API/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Forecast API</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Weather Forecast API</h1>
<input type="text" id="cityInput" placeholder="Enter City Name">
<button onclick="fetchWeatherData()">Get Weather</button>
<div id="weatherData"></div>
</div>
<script src="script.js"></script>
</body>
</html>
23 changes: 23 additions & 0 deletions New_APIs/Weather_Forecast_API/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
function fetchWeatherData() {
const city = document.getElementById('cityInput').value;
const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

fetch(url)
.then(response => response.json())
.then(data => {
if (data.cod === 200) {
document.getElementById('weatherData').innerHTML = `
<p><strong>City:</strong> ${data.name}</p>
<p><strong>Temperature:</strong> ${data.main.temp} °C</p>
<p><strong>Weather:</strong> ${data.weather[0].description}</p>
`;
} else {
document.getElementById('weatherData').innerHTML = `<p>City not found. Please try again.</p>`;
}
})
.catch(error => {
document.getElementById('weatherData').innerHTML = `<p>There was an error fetching the data.</p>`;
console.error('Error fetching the weather data:', error);
});
}
51 changes: 51 additions & 0 deletions New_APIs/Weather_Forecast_API/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
text-align: center;
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
margin-bottom: 20px;
color: #333;
}

input[type="text"] {
padding: 10px;
font-size: 16px;
width: 250px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#weatherData {
margin-top: 20px;
font-size: 18px;
color: #555;
}
Loading