Merge pull request #390 from SanskarSinghiit/master

Adds Temperature API
dishamodi0910 · Aug 9, 2024 · 44c094b · 44c094b
2 parents 8c2d1d7 + 94a60b9
commit 44c094b
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 1 deletion.
diff --git a/New_APIs/README.md b/New_APIs/README.md
@@ -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|
 
 
 
+
diff --git a/New_APIs/Temperature_API/README.md b/New_APIs/Temperature_API/README.md
@@ -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/
diff --git a/New_APIs/Temperature_API/images/2.jpg b/New_APIs/Temperature_API/images/2.jpg
diff --git a/New_APIs/Temperature_API/index.html b/New_APIs/Temperature_API/index.html
@@ -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>
diff --git a/New_APIs/Temperature_API/js/app.js b/New_APIs/Temperature_API/js/app.js
@@ -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);
+}