Skip to content

Commit 44c094b

Browse files
Kritika30032002Kritika30032002
authored
Merge pull request #390 from SanskarSinghiit/master
Adds Temperature API
2 parents 8c2d1d7 + 94a60b9 commit 44c094b

File tree

5 files changed

+86
-1
lines changed

5 files changed

+86
-1
lines changed

‎New_APIs/README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@
1818
[Result-marks Data api ](./Result-marks_API/)|this is for those who want to make college management project they can simple take this api and connect to project easily|
1919
|[Payment API](./Payment_API/)|This demonstrates how to integrate PayPal API for online payments. It handles payment success and cancellation scenarios.|
2020
|[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.|
21-
|[Voice_Recognition_API](./Voice_Recognition_API/)|This demonstrates how a meachine retrieve user engagement only Voice|
21+
|[Voice_Recognition_API](./Voice_Recognition_API/)|This demonstrates how a meachine retrieve user engagement only Voice
22+
|[Temperature_API](./Temperature_API/)| Real-time global temperature data via HTTP requests from reliable weather sources
2223
|[Cryptocurrency_API](./Cryptocurrency_API/)|This demonstrates how a convert Cryptocurrency and spefic currency to dollars only|
2324
|[Weather_Forecast_API](./Weather_Forecast_API/)|This demonstrates we can know weather report via api and spefic locactions only|
2425

2526

2627

28+

‎New_APIs/Temperature_API/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Temperature App
2+
This an API Project with JavaScript DOM. User will get the temperature by searching their city. It shows the real time data of current weather.
3+
4+
5+
## Technologies that are used to build this project:
6+
- HTML
7+
- CSS
8+
- Bootstrap
9+
- JS
10+
- API
11+
12+
13+
`Live Link`: https://temperature-api-indol.vercel.app/

‎New_APIs/Temperature_API/images/2.jpg‎

887 KB
Loading

‎New_APIs/Temperature_API/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Temperature App</title>
6+
<!-- Required meta tags -->
7+
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9+
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/603/603463.png" type="image/x-icon">
10+
11+
12+
<!-- Bootstrap CSS -->
13+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
14+
<style>
15+
body {
16+
background: url(images/2.jpg) no-repeat;
17+
background-size: cover;
18+
height: 100vh;
19+
}
20+
</style>
21+
</head>
22+
23+
<body>
24+
<div class="container">
25+
<form class="col-md-6 m-auto py-5">
26+
<div class="input-group mb-3">
27+
<input id="input-field" type="text" class="form-control" placeholder="Enter a location for Weather ...">
28+
<div class="input-group-append">
29+
<button onclick="searchTemperature()" type="button" class="btn btn-danger">Search</button>
30+
</div>
31+
</div>
32+
</form>
33+
<div class="weather-status text-white text-center">
34+
<img id="weather-icon" src="https://openweathermap.org/img/wn/[email protected]" alt="">
35+
<h1 id="city">Dhaka</h1>
36+
<h3><span id="temp">38.06</span>&deg;C</h3>
37+
<h1 id="weather" class="lead">Clouds</h1>
38+
</div>
39+
</div>
40+
41+
<script src="js/app.js"></script>
42+
</body>
43+
44+
</html>

‎New_APIs/Temperature_API/js/app.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const API_KEY = '233ee7523c96a40605e5ad29972a5e45';
2+
3+
const searchTemperature = () => {
4+
const city = document.getElementById('input-field').value;
5+
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
6+
//&units=matrics dile temperature ta degree ta pabo
7+
console.log(url);
8+
fetch(url)
9+
.then(res => res.json())
10+
.then(data => displayTemperature(data))
11+
}
12+
13+
const setInnerText = (id, text) => {
14+
document.getElementById(id).innerText = text;
15+
}
16+
const displayTemperature = city => {
17+
console.log(city);
18+
setInnerText('city', city.name);
19+
setInnerText('temp', city.main.temp);
20+
setInnerText('weather', city.weather[0].main);
21+
// setInnerText('weather',city.)
22+
//set weather icon
23+
const url = `https://openweathermap.org/img/wn/${city.weather[0].icon}@2x.png`;
24+
const imgIcon = document.getElementById('weather-icon');
25+
imgIcon.setAttribute('src', url);
26+
}

0 commit comments

Comments
 (0)