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

Adds Temperature API #390

Merged
merged 3 commits into from
Aug 9, 2024
Merged

Adds Temperature API #390

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
fa7d77f
Adds Temperature API
SanskarSinghiit Aug 8, 2024
0b7beec
Update README.md
SanskarSinghiit Aug 8, 2024
94a60b9
Merge branch 'master' into master
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
4 changes: 3 additions & 1 deletion New_APIs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@
[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|
|[Payment API](./Payment_API/)|This demonstrates how to integrate PayPal API for online payments. It handles payment success and cancellation scenarios.|
|[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|
|[Voice_Recognition_API](./Voice_Recognition_API/)|This demonstrates how a meachine retrieve user engagement only Voice
|[Temperature_API](./Temperature_API/)| Real-time global temperature data via HTTP requests from reliable weather sources
|[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|




13 changes: 13 additions & 0 deletions New_APIs/Temperature_API/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Temperature App
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.


## Technologies that are used to build this project:
- HTML
- CSS
- Bootstrap
- JS
- API


`Live Link`: https://temperature-api-indol.vercel.app/
Binary file added New_APIs/Temperature_API/images/2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions New_APIs/Temperature_API/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!doctype html>
<html lang="en">

<head>
<title>Temperature App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/603/603463.png" type="image/x-icon">


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
body {
background: url(images/2.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
</style>
</head>

<body>
<div class="container">
<form class="col-md-6 m-auto py-5">
<div class="input-group mb-3">
<input id="input-field" type="text" class="form-control" placeholder="Enter a location for Weather ...">
<div class="input-group-append">
<button onclick="searchTemperature()" type="button" class="btn btn-danger">Search</button>
</div>
</div>
</form>
<div class="weather-status text-white text-center">
<img id="weather-icon" src="https://openweathermap.org/img/wn/02d@2x.png" alt="">
<h1 id="city">Dhaka</h1>
<h3><span id="temp">38.06</span>&deg;C</h3>
<h1 id="weather" class="lead">Clouds</h1>
</div>
</div>

<script src="js/app.js"></script>
</body>

</html>
26 changes: 26 additions & 0 deletions New_APIs/Temperature_API/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
const API_KEY = '233ee7523c96a40605e5ad29972a5e45';

const searchTemperature = () => {
const city = document.getElementById('input-field').value;
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
//&units=matrics dile temperature ta degree ta pabo
console.log(url);
fetch(url)
.then(res => res.json())
.then(data => displayTemperature(data))
}

const setInnerText = (id, text) => {
document.getElementById(id).innerText = text;
}
const displayTemperature = city => {
console.log(city);
setInnerText('city', city.name);
setInnerText('temp', city.main.temp);
setInnerText('weather', city.weather[0].main);
// setInnerText('weather',city.)
//set weather icon
const url = `https://openweathermap.org/img/wn/${city.weather[0].icon}@2x.png`;
const imgIcon = document.getElementById('weather-icon');
imgIcon.setAttribute('src', url);
}
Loading