Scribd
Upload
36 views

Weather App HTML

This document contains the code for a weather app. It includes sections for a top banner with a search form, an ajax section to display search results, and a footer. The JavaScript code handles form submissions by fetching weather data from an API and adding new list items to the results display with the city name, temperature, icon, and description. Any duplicate city searches return a message instead of refetching the data.

Uploaded by

India Server
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
36 views

Weather App HTML

This document contains the code for a weather app. It includes sections for a top banner with a search form, an ajax section to display search results, and a footer. The JavaScript code handles form submissions by fetching weather data from an API and adding new list items to the results display with the city name, temperature, icon, and description. Any duplicate city searches return a message instead of refetching the data.

Uploaded by

India Server
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!-- Created by Nishant<3 ! !

-->
<!DOCTYPE html>
<html>
<head>
<title>Weather Forcast</title>
</head>
<body>
<section class="top-banner">
<div class="container">
<h1 class="heading">Weather App</h1>
<form>
<input type="text" placeholder="Search for a city" autofocus>
<button type="submit">SUBMIT</button>
<span class="msg"></span>
</form>
</div>
</section>
<section class="ajax-section">
<div class="container">
<ul class="cities"></ul>
</div>
</section>
<footer class="page-footer">
<div class="container">

</div>
</footer>

<script type="text/javascript">
const form = document.querySelector(".top-banner form");
const input = document.querySelector(".top-banner input");
const msg = document.querySelector(".top-banner .msg");
const list = document.querySelector(".ajax-section .cities");
const apiKey = "4d8fb5b93d4af21d66a2948710284366";

form.addEventListener("submit", e => {
e.preventDefault();
let inputVal = input.value;

const listItems = list.querySelectorAll(".ajax-section .city");


const listItemsArray = Array.from(listItems);

if (listItemsArray.length > 0) {
const filteredArray = listItemsArray.filter(el => {
let content = "";
if (inputVal.includes(",")) {
if (inputVal.split(",")[1].length > 2) {
inputVal = inputVal.split(",")[0];
content = el
.querySelector(".city-name span")
.textContent.toLowerCase();
} else {
content = el.querySelector(".city-name").dataset.name.toLowerCase();
}
} else {
content = el.querySelector(".city-name span").textContent.toLowerCase();
}
return content == inputVal.toLowerCase();
});
if (filteredArray.length > 0) {
msg.textContent = `You already know the weather for ${
filteredArray[0].querySelector(".city-name span").textContent
} ...otherwise be more specific by providing the country code as well`;
form.reset();
input.focus();
return;
}
}
const url = `https://api.openweathermap.org/data/2.5/weather?q=$
{inputVal}&appid=${apiKey}&units=metric`;

fetch(url)
.then(response => response.json())
.then(data => {
const { main, name, sys, weather } = data;
const icon = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/${
weather[0]["icon"]
}.svg`;

const li = document.createElement("li");
li.classList.add("city");
const markup = `
<h2 class="city-name" data-name="${name},${sys.country}">
<span>${name}</span>
<sup>${sys.country}</sup>
</h2>
<div class="city-temp">${Math.round(main.temp)}<sup>°C</sup></div>
<figure>
<img class="city-icon" src="${icon}" alt="${
weather[0]["description"]
}">
<figcaption>${weather[0]["description"]}</figcaption>
</figure>
`;
li.innerHTML = markup;
list.appendChild(li);
})
.catch(() => {
msg.textContent = "Please search for a valid city";
});

msg.textContent = "";
form.reset();
input.focus();
});
</script>
</body>
</html>

You might also like