diff --git a/New_APIs/README.md b/New_APIs/README.md index 16362ad..015aa72 100644 --- 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 new file mode 100644 index 0000000..0aa6593 --- /dev/null +++ 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/ \ No newline at end of file diff --git a/New_APIs/Temperature_API/images/2.jpg b/New_APIs/Temperature_API/images/2.jpg new file mode 100644 index 0000000..376d25d Binary files /dev/null and b/New_APIs/Temperature_API/images/2.jpg differ diff --git a/New_APIs/Temperature_API/index.html b/New_APIs/Temperature_API/index.html new file mode 100644 index 0000000..ae01030 --- /dev/null +++ b/New_APIs/Temperature_API/index.html @@ -0,0 +1,44 @@ + + + + + Temperature App + + + + + + + + + + + + +
+
+
+ +
+ +
+
+
+
+ +

Dhaka

+

38.06°C

+

Clouds

+
+
+ + + + + \ No newline at end of file diff --git a/New_APIs/Temperature_API/js/app.js b/New_APIs/Temperature_API/js/app.js new file mode 100644 index 0000000..4347675 --- /dev/null +++ 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); +}