কিভাবে একটি weather web page তৈরি করতে পারি api key দিয়ে । How To Create Weather Web Page By Api Key
.png "How To Create Weather Web Page By Api Key") |
How To Create Weather Web Page By Api Key |
প্রিয় বন্ধুরা,
আমি সুদীপ কুমার রায়। আশা করি সকলেই ভালো ও সুস্থ রয়েছেন।
আজকে আমি কোন ওয়েব ডিজাইন নিয়ে টিউন করতেছি হয়ত এতক্ষনে ধারনা করে ফেলেছেন।
তো বন্ধুরা শুরু করা যাক...
একটি ওয়েবপেজ তৈরি করার জন্য আপনার একটি ওয়েদার API কী থাকা আবশ্যক। API থেকে সরবরাহ করা ডেটা ব্যবহার করে আপনি ওয়েদার তথ্য দেখানোর জন্য ওয়েবপেজটি তৈরি করতে পারেন।
একটি weather web page তৈরি করতে নিম্নলিখিত ধাপগুলো অনুসরণ করুনঃ-
১. HTML ফাইল তৈরি করুন: প্রথমে, একটি HTML ফাইল তৈরি করুন। ফাইলের মধ্যে ওয়েবপেজের স্ট্রাকচার সংরক্ষণ করুন।
২. CSS অ্যাড করুন: আপনার ওয়েবপেজের ডিজাইন কাস্টমাইজ করতে CSS ব্যবহার করুন। উদাহরণস্বরূপ, আপনি ফন্ট, রঙ, প্রশংসা ইত্যাদি নির্বাচন করতে পারেন।
৩. JavaScript যোগ করুন: API থেকে ডেটা আরওয়া করতে JavaScript ব্যবহার করুন। আপনি একটি HTTP অনুরোধ পাঠাতে পারেন যা API থেকে ওয়েদার তথ্য পেতে সহায়তা করে।
৪. API থেকে ওয়েদার ডেটা গ্রহণ করুন: আপনার API কী দিয়ে ওয়েদার তথ্য অর্জন করুন। API থেকে একটি HTTP অনুরোধ পাঠিয়ে সার্ভার থেকে ডেটা গ্রহণ করুন।
৫. ওয়েদার তথ্য প্রদর্শন করুন: আপনার ওয়েবপেজে ওয়েদার তথ্য প্রদর্শন করুন।
বর্তমান তাপমাত্রা, আবহাওয়া বর্ণনা, আরও লক্ষ্য করুন যে, আপনি যেখানে Requiest করে API থেকে পেয়ে এসেছেন ডেটা সঠিকভাবে প্রদর্শিত করছেন।
এইভাবে একটি weather web page এর জন্য আপনি করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো কিছু কোডের মাধ্যমেঃ-
# Html Code
<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Weather App Project | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="script.js" defer></script>
</head>
<body>
<header class="bg-success text-center py-3">
<h1 class="fw-bold h3 text-white my-1">Weather Dashboard</h1>
</header>
<div class="container-fluid my-4 weather-data">
<div class="row">
<div class="col-xxl-3 col-md-4 px-lg-4">
<h5 class="fw-bold">Enter a City Name</h5>
<input type="text" id="city-input" class="py-2 form-control" placeholder="E.g., New York, London, Tokyo">
<button id="search-btn" class="btn btn-success py-2 w-100 mt-3 mb-2">Search</button>
</div>
<div class="col-xxl-9 col-md-8 mt-md-1 mt-4 pe-lg-4">
<div class="current-weather bg-success text-white py-2 px-4 rounded-3">
<div class="mt-3 d-flex justify-content-between">
<div>
<h3 class="fw-bold">_______ ( ______ )</h3>
<h6 class="my-3 mt-3">Temperature: __°C</h6>
<h6 class="my-3">Wind: __ M/S</h6>
<h6 class="my-3">Humidity: __%</h6>
</div>
</div>
</div>
<h4 class="fw-bold my-4">5-Day Forecast</h4>
<div class="days-forecast row row-cols-1 row-cols-sm-2 row-cols-lg-4 row-cols-xl-5 justify-content-between">
<div class="col mb-3">
<div class="card border-0 bg-secondary text-white">
<div class="card-body p-3 text-white">
<h5 class="card-title fw-semibold">( ______ )</h5>
<h6 class="card-text my-3 mt-3">Temp: __°C</h6>
<h6 class="card-text my-3">Wind: __ M/S</h6>
<h6 class="card-text my-3">Humidity: __%</h6>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card border-0 bg-secondary text-white">
<div class="card-body p-3 text-white">
<h5 class="card-title fw-semibold">( ______ )</h5>
<h6 class="card-text my-3 mt-3">Temp: __°C</h6>
<h6 class="card-text my-3">Wind: __ M/S</h6>
<h6 class="card-text my-3">Humidity: __%</h6>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card border-0 bg-secondary text-white">
<div class="card-body p-3 text-white">
<h5 class="card-title fw-semibold">( ______ )</h5>
<h6 class="card-text my-3 mt-3">Temp: __°C</h6>
<h6 class="card-text my-3">Wind: __ M/S</h6>
<h6 class="card-text my-3">Humidity: __%</h6>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card border-0 bg-secondary text-white">
<div class="card-body p-3 text-white">
<h5 class="card-title fw-semibold">( ______ )</h5>
<h6 class="card-text my-3 mt-3">Temp: __°C</h6>
<h6 class="card-text my-3">Wind: __ M/S</h6>
<h6 class="card-text my-3">Humidity: __%</h6>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card border-0 bg-secondary text-white">
<div class="card-body p-3 text-white">
<h5 class="card-title fw-semibold">( ______ )</h5>
<h6 class="card-text my-3 mt-3">Temp: __°C</h6>
<h6 class="card-text my-3">Wind: __ M/S</h6>
<h6 class="card-text my-3">Humidity: __%</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
# Css Code
/* Import Google font - Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');
* {
font-family: 'Open Sans', sans-serif;
}
.current-weather img {
max-width: 120px;
margin-top: -15px;
}
#Javascript Code
const cityInput = document.querySelector("#city-input");
const searchButton = document.querySelector("#search-btn");
const currentWeatherDiv = document.querySelector(".current-weather");
const daysForecastDiv = document.querySelector(".days-forecast");
const API_KEY = "PASTE-YOUR-API-KEY"; // Paste your API here
// Create weather card HTML based on weather data
const createWeatherCard = (cityName, weatherItem, index) => {
if(index === 0) {
return `<div class="mt-3 d-flex justify-content-between">
<div>
<h3 class="fw-bold">${cityName} (${weatherItem.dt_txt.split(" ")[0]})</h3>
<h6 class="my-3 mt-3">Temperature: ${((weatherItem.main.temp - 273.15).toFixed(2))}°C</h6>
<h6 class="my-3">Wind: ${weatherItem.wind.speed} M/S</h6>
<h6 class="my-3">Humidity: ${weatherItem.main.humidity}%</h6>
</div>
<div class="text-center me-lg-5">
<img src="https://openweathermap.org/img/wn/${weatherItem.weather[0].icon}@4x.png" alt="weather icon">
<h6>${weatherItem.weather[0].description}</h6>
</div>
</div>`;
} else {
return `<div class="col mb-3">
<div class="card border-0 bg-secondary text-white">
<div class="card-body p-3 text-white">
<h5 class="card-title fw-semibold">(${weatherItem.dt_txt.split(" ")[0]})</h5>
<img src="https://openweathermap.org/img/wn/${weatherItem.weather[0].icon}.png" alt="weather icon">
<h6 class="card-text my-3 mt-3">Temp: ${((weatherItem.main.temp - 273.15).toFixed(2))}°C</h6>
<h6 class="card-text my-3">Wind: ${weatherItem.wind.speed} M/S</h6>
<h6 class="card-text my-3">Humidity: ${weatherItem.main.humidity}%</h6>
</div>
</div>
</div>`;
}
}
// Get weather details of passed latitude and longitude
const getWeatherDetails = (cityName, latitude, longitude) => {
const WEATHER_API_URL = `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`;
fetch(WEATHER_API_URL).then(response => response.json()).then(data => {
const forecastArray = data.list;
const uniqueForecastDays = new Set();
const fiveDaysForecast = forecastArray.filter(forecast => {
const forecastDate = new Date(forecast.dt_txt).getDate();
if (!uniqueForecastDays.has(forecastDate) && uniqueForecastDays.size < 6) {
uniqueForecastDays.add(forecastDate);
return true;
}
return false;
});
cityInput.value = "";
currentWeatherDiv.innerHTML = "";
daysForecastDiv.innerHTML = "";
fiveDaysForecast.forEach((weatherItem, index) => {
const html = createWeatherCard(cityName, weatherItem, index);
if (index === 0) {
currentWeatherDiv.insertAdjacentHTML("beforeend", html);
} else {
daysForecastDiv.insertAdjacentHTML("beforeend", html);
}
});
}).catch(() => {
alert("An error occurred while fetching the weather forecast!");
});
}
// Get coordinates of entered city name
const getCityCoordinates = () => {
const cityName = cityInput.value.trim();
if (cityName === "") return;
const API_URL = `https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${API_KEY}`;
fetch(API_URL).then(response => response.json()).then(data => {
if (!data.length) return alert(`No coordinates found for ${cityName}`);
const { lat, lon, name } = data[0];
getWeatherDetails(name, lat, lon);
}).catch(() => {
alert("An error occurred while fetching the coordinates!");
});
}
searchButton.addEventListener("click", () => getCityCoordinates());
উল্লেখ্য যে, এটি একটি সাধারণ উদাহরণ এবং আপনার ওয়েদার API এবং এটির আপনার ডেটা স্ট্রাকচারের উপর ভিত্তি করে অনুযায়ী সংশোধন করতে হবে। আপনার API ও ডেটা স্ট্রাকচারের মাধ্যমে উপযুক্তভাবে কোডটি অনুসরণ করুন।
প্রিয় বন্ধুরা আশা করি আজকের টিউন আপনাদের অনেক অনেক উপকারে আসবে। তো বন্ধুরা আজকের মত এখানেই বিদায় নিচ্ছি। ভালো থাকবেন সুস্থ থাকবেন।
ধন্যবাদ। টাটা।
ক্রেডিট বাইঃ- SMsudipBD.Com
|
SMsudipBD.Com
Web Development & Design. |
টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!