Weather App Using HTML CSS and JavaScript

Sunday
18 September 2023

22°C

Overcast Clouds

Search

NAME
United Kingdom

TEMP
23°C

HUMIDITY
2%

WIND SPEED
2.92 Km/h

Sat
23°C



Sat
23°C



Sat
23°C



Sat
23°C

Style Your Weather App

Add styles to your weather app by editing the style.css file. You can style it as you like to make it visually appealing.

@import url("fonts.googleapis.com/css2?family=Poppins:wg..");

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background-color: #37474f;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "poppins", sans-serif;
}

.container {
max-width: 800px;
width: 100%;
background-color: #232931;
color: #fff;
border-radius: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}

.wrapper {
display: grid;
grid-template-columns: 3fr 4fr;
grid-gap: 1rem;
}

.img_section {
border-radius: 25px;
background-image: url("../img/bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
transform: scale(1.03) perspective(200px);
}

.img_section::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #5c6bc0 10%, #0d47a1 100%);
opacity: 0.5;
z-index: -1;
border-radius: 25px;
}

.default_info {
padding: 1.5rem;
text-align: center;
}

.default_info img {
width: 80%;
object-fit: cover;
margin: 0 auto;
}

.default_info h2 {
font-size: 3rem;
}

.default_info h3 {
font-size: 1.3rem;
text-transform: capitalize;
}

.weather_temp {
font-size: 4rem;
font-weight: 800;
}

/* content section */
.content_section {
padding: 1.5rem;
}

.content_section form {
margin: 1.5rem 0;
position: relative;
}

.content_section form input {
width: 84%;
outline: none;
background: transparent;
border: 1px solid #37474f;
border-radius: 5px;
padding: 0.7rem 1rem;
font-family: inherit;
color: #fff;
font-size: 1rem;
}

.content_section form button {
position: absolute;
top: 0;
right: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 1rem 0.7rem;
font-family: inherit;
font-size: 0.8rem;
outline: none;
border: none;
background: #5c6bc0;
color: #fff;
cursor: pointer;
}

.day_info .content {
display: flex;
justify-content: space-between;
padding: 0.4rem 0;
}

.day_info .content .title {
font-weight: 600;
}

.list_content ul {
display: flex;
justify-content: space-between;
align-items: center;
list-style-type: none;
margin: 3rem 0rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}

.list_content ul li {
padding: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 1rem;
transition: all 0.3s ease-in;
}

.list_content ul li:hover {
transform: scale(1.1);
background-color: #fff;
color: #232931;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
cursor: pointer;
}

.list_content ul li img {
width: 50%;
object-fit: cover;
}

.icons {
opacity: 0;
}

.icons.fadeIn {
animation: 0.5s fadeIn forwards;
animation-delay: 0.7s;
}

@keyframes fadeIn {
to {
transition: all 0.5s ease-in;
opacity: 1;
}
}

Fetch Weather Data with JavaScript

In your script.js file, you’ll use JavaScript to fetch weather data from a weather API. For this example, we’ll use the OpenWeatherMap API. You’ll need to sign up for a free API key at OpenWeatherMap to use their service.

"use strict";

const API = "YOUR API KEY";

const dayEl = document.querySelector(".default_day");
const dateEl = document.querySelector(".default_date");
const btnEl = document.querySelector(".btn_search");
const inputEl = document.querySelector(".input_field");

const iconsContainer = document.querySelector(".icons");
const dayInfoEl = document.querySelector(".day_info");
const listContentEl = document.querySelector(".list_content ul");

const days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];

// display the day
const day = new Date();
const dayName = days[day.getDay()];
dayEl.textContent = dayName;

// display date
let month = day.toLocaleString("default", { month: "long" });
let date = day.getDate();
let year = day.getFullYear();

console.log();
dateEl.textContent = date + " " + month + " " + year;

// add event
btnEl.addEventListener("click", (e) => {
e.preventDefault();

// check empty value
if (inputEl.value !== "") {
const Search = inputEl.value;
inputEl.value = "";
findLocation(Search);
} else {
console.log("Please Enter City or Country Name");
}
});

async function findLocation(name) {
iconsContainer.innerHTML = "";
dayInfoEl.innerHTML = "";
listContentEl.innerHTML = "";
try {
const API_URL = `api.openweathermap.org/data/2.5/weather?q=${name}&appid=${API}`;
const data = await fetch(API_URL);
const result = await data.json();
console.log(result);

if (result.cod !== "404") {
// display image content
const ImageContent = displayImageContent(result);

// display right side content
const rightSide = rightSideContent(result);

// forecast function
displayForeCast(result.coord.lat, result.coord.lon);

setTimeout(() => {
iconsContainer.insertAdjacentHTML("afterbegin", ImageContent);
iconsContainer.classList.add("fadeIn");
dayInfoEl.insertAdjacentHTML("afterbegin", rightSide);
}, 1500);
} else {
const message = `

${result.cod}

${result.message}

`;
iconsContainer.insertAdjacentHTML("afterbegin", message);
}
} catch (error) {}
}

// display image content and temp
function displayImageContent(data) {
return `

${Math.round(data.main.temp - 275.15)}°C

${data.weather[0].description}

`;
}

// display the right side content
function rightSideContent(result) {
return `

NAME

${result.name}

TEMP

${Math.round(result.main.temp - 275.15)}°C

HUMIDITY

${result.main.humidity}%

WIND SPEED

${result.wind.speed} Km/h

`;
}

async function displayForeCast(lat, long) {
const ForeCast_API = `api.openweathermap.org/data/2.5/forecast?la..{lat}&lon=${long}&appid=${API}`;
const data = await fetch(ForeCast_API);
const result = await data.json();
// filter the forecast
const uniqeForeCastDays = [];
const daysForecast = result.list.filter((forecast) => {
const forecastDate = new Date(forecast.dt_txt).getDate();
if (!uniqeForeCastDays.includes(forecastDate)) {
return uniqeForeCastDays.push(forecastDate);
}
});
console.log(daysForecast);

daysForecast.forEach((content, indx) => {
if (indx <= 3) {
listContentEl.insertAdjacentHTML("afterbegin", forecast(content));
}
});
}

// forecast html element data
function forecast(frContent) {
const day = new Date(frContent.dt_txt);
const dayName = days[day.getDay()];
const splitDay = dayName.split("", 3);
const joinDay = splitDay.join("");

// console.log(dayName);

return `

${joinDay}
${Math.round(frContent.main.temp - 275.15)}°C

`;
}

Open your index.html file in a web browser, and you should have a basic weather app that allows users to input a location and fetch weather data from the OpenWeatherMap API.

Remember to replace 'YOUR_API_KEY' it with your actual API key from OpenWeatherMap.

You May Also Like:

• To-do List in JavaScript with Local Storage
• Quiz App with HTML, CSS, and JavaScript
• How to Create QR Code Generator in JavaScript
• Create a Modal in HTML CSS and JavaScript

This is a simple example, and you can expand on it by adding more features, like displaying weather icons or forecasts, handling errors gracefully, and improving the user interface.

Deployment

Once you are satisfied with your weather app, it’s time to deploy it to the web. You can choose from various hosting options, including free hosting services or deploying to your own server. Make sure to secure your app by using HTTPS.

Future Enhancements

A weather app is a project that can always be improved and expanded. Consider adding features like weather alerts, historical weather data, or integration with other services like Google Maps for a richer user experience.

Conclusion

Building a weather app with HTML CSS and JavaScript is not only a great way to apply your web development skills but also a practical project that can benefit users worldwide. By following the steps outlined in this article, you can create a dynamic and visually appealing weather app that provides accurate and timely weather information.

Remember that web development is an ever-evolving field, so explore new technologies and techniques to enhance your app further. With dedication and creativity, your weather app can become a valuable tool for users and a testament to your web development abilities. Happy coding!