Welcome to Codingfizz,
In this tutorial, we will walk through the process of creating a dynamic weather app using HTML, CSS, JavaScript, and Weather API. We will start by setting up the basic structure of the app using HTML and CSS and then move on to connecting to a weather API to retrieve and display the current weather conditions. Along the way, we will cover key concepts such as API calls, asynchronous JavaScript, and dynamic updates to the page.
Whether you're a beginner or an experienced developer, this tutorial is a great introduction to building interactive web applications using modern web development technologies.
Here is the link to the Weather API: https://rapidapi.com/apininjas/api/weather-by-api-ninjas/
In addition to learning the basics of web development, this tutorial will also cover some more advanced topics such as working with API keys, handling errors, and optimizing performance. We will also explore ways to style the app using CSS and JavaScript, including responsive design techniques to make the app look great on any device.
By the end of this tutorial, you will have a solid understanding of how to create a weather app that is both functional and visually appealing. You can take this knowledge and apply it to your projects, whether you're building a weather app or something completely different.
Overall, this tutorial will provide a hands-on, step-by-step approach to learning web development and building a real-world application using HTML, CSS, JavaScript, and Weather API. Whether you are a beginner looking to learn web development or an experienced developer looking to expand your skills, this tutorial is a great resource for anyone interested in building interactive web applications.
Here is the entire code of the Weather Application
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="./icon.jpg">
<title>Weather</title>
</head>
<body style="background-image: url(./bg.jpg);">
<div class="container">
<h1 class="text-center my-5">Weather Information</h1>
<h4 class="text-center"><i>"Sunshine is delicious, rain is refreshing, wind braces us up, snow is exhilarating; there is really no such thing as bad weather, only different kinds of good weather."</i></h4>
<nav class="navbar navbar-light bg-light my-5 rounded-3">
<div class="container-fluid">
<a class="navbar-brand">Weather in</a>
<form class="d-flex">
<input id="city" class="form-control me-2" type="search" placeholder="Delhi" aria-label="Search">
<button class="btn btn-outline-secondary" type="submit" id="submit">Search</button>
</form>
</div>
</nav>
<main>
<div class="row row-cols-1 row-cols-md-3 mb-5 text-center">
<div class="col">
<div class="card mb-5 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Temperature</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><span id="temp2"></span><small class="text-muted fw-light">°C</small></h1>
<ul class="list-unstyled mt-4 mb-4">
<li>Temperature is <span id="temp"></span></li>
<li>Min Temperature is <span id="min_temp"></span></li>
<li>Max Temperature is <span id="max_temp"></span></li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card mb-5 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Humidity</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><span id="humidity2"></span><small class="text-muted fw-light">%</small></h1>
<ul class="list-unstyled mt-4 mb-4">
<li>Cloud PCT is <span id="cloud_pct"></span></li>
<li>Feels Like is <span id="feels_like"></span></li>
<li>Humidity is <span id="humidity"></span></li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card mb-5 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Sun/Wind</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><span id="wind_speed2"></span><small class="text-muted fw-light">km/hr</small></h1>
<ul class="list-unstyled mt-4 mb-4">
<li>Wind Speed is <span id="wind_speed"></span></li>
<!-- <li>Wind Degree is <span id="wind_degrees"></span></li> -->
<li>Sunrise time is <span id="sunrise"></span></li>
<li>Sunset time is <span id="sunset"></span></li>
</ul>
</div>
</div>
</div>
</div>
</main>
</div>
<footer class="text-center">Codingfizz @ 2023-24</footer>
</body>
<script src="./script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</html>
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": "f3691a7dd6msh6c83bb1618b7a65p10f0b7jsn3e72ff8ef452",
"X-RapidAPI-Host": "weather-by-api-ninjas.p.rapidapi.com",
},
};
const getWeather = (city)=>{
fetch(
"https://weather-by-api-ninjas.p.rapidapi.com/v1/weather?city="+city,
options
)
.then((response) => response.json())
.then((response) => {
cloud_pct.innerHTML = response.cloud_pct;
temp.innerHTML = response.temp;
temp2.innerHTML = response.temp;
feels_like.innerHTML = response.feels_like;
humidity.innerHTML = response.humidity;
humidity2.innerHTML = response.humidity;
min_temp.innerHTML = response.min_temp;
max_temp.innerHTML = response.max_temp;
wind_speed.innerHTML = response.wind_speed;
wind_speed2.innerHTML = response.wind_speed;
// wind_degrees.innerHTML = response.wind_degrees;
sunrise.innerHTML = response.sunrise;
sunset.innerHTML = response.sunset;
console.log(response);
})
.catch((err) => console.error(err));
}
submit.addEventListener("click",(e)=>{
e.preventDefault()
getWeather(city.value)
})
getWeather("Delhi")
0 Comments