Question

In: Computer Science

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet"...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App </title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="app-wrap">
<header>
<input type="text" autocomplete="on" class="search-box" placeholder="Enter your location..." />
</header>
<main>
<section class= "location">
<div class="city">Hyderabad, IN</div>
<div class="date">Thursday 23 July 2020</div>
</section>
<div class="current">
<div class="temp">25<span>°c</span></div>
<div class="weather">Rainy</div>
<div class="hi-low">20°c / 23°c</div>
</div>
</main>
</div>
<script src="main.js"></script>
</body>
</html>

MAIN.js

const api = {
key="091ff564240e0e16c46ae680b188ca3e"
base: "https://api.openweathermap.org/data/2.5"
};
const searchbox = document.querySelector(".search-box");
searchbox.addEventListener("keypress", setQuery);

function setQuery(evt) {
if (evt.keyCode == 13) {
getResults(searchbox.value);
}
}

let now = new Date();
let date = document.querySelector(".location .date");
date.innerText = dateBuilder(now);

let temp = document.querySelector(".current .temp");
temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`;

let weather_el = document.querySelector(".current .weather");
weather_el.innerText = weather.weather[0].main;

let day = days[d.getDay()];
let date = d.getDate();
let month = months[d.getMonth()];
let year = d.getFullYear();

return `${day} ${date} ${month} ${year}`;
}

main.css

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

body {
font-family: "montserrat", sans-serif;
background-image: url("bg1.gif");
background-size: cover;
background-position: top center;
}

.app-wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.9),
rgba(0, 0, 0, 0.1)
);
}
header {
display: flex;
justify-content: center;
align-items: center;
padding: 50px 15px 15px;
}
header input {
width: 100%;
max-width: 280px;
padding: 10px 15px;
border: none;
outline: none;
background-color: rgba(59, 104, 85, 0.3);
border-radius: 0px 16px 0 16px;
border-bottom: 3px solid rgb(31, 56, 31);
color: #fff;
font-size: 25px;
font-weight: 500;
text-align: center;
transition: 0.2s ease-out;
}

header input:focus {
background-color: rgba(255, 255, 255, 0.6);
}
main{
flex: 1 1 100%;
padding: 25px 25px 50px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.location .city {
color: #fff;
font-size: 32px;
font-weight: 500;
margin-bottom: 5px;
}
.location .date{
color: #fff;
font-size: 16px;
}
.current .temp{
color: #fff;
font-size: 102px;
font-weight: 700;
margin: 30px 0;
text-shadow: 2px 5px rgba(0, 0 ,0 , 0.5);
}
.current .temp .span{
font-weight: 500;
}
.current .weather {
color: #fff;
font-size: 32px;
font-weight: 700;
font-style: italic;
margin-bottom: 15px;
text-shadow: 0px 3px rgba(0,0,0,0.4);
}
.current .hi-low{
color: #fff;
font-size: 24px;
font-weight: 500;
text-shadow: 0px 4px rgba(0,0,0,0.4);
}

THis is a code for weatherapi. i tried to put in my api key and the url. but when i tried to search a location it wont work i dont know what i did wrong. can some one please help me out

Solutions

Expert Solution

There is problem with Your Main.js file which i highlighted below.

Main.js

const api = {

key: "091ff564240e0e16c46ae680b188ca3e",

base: "https://api.openweathermap.org/data/2.5"

};

const searchbox = document.querySelector(".search-box");

searchbox.addEventListener("keypress", setQuery);

function setQuery(evt) {

if (evt.keyCode == 13) {

getResults(searchbox.value);

}

function getResults(query) {

fetch(`${api.base}/weather?q=${query}&units=metric&APPID=${api.key}`)

.then((weather) => {

return weather.json();

})

.then(displayResults);

}

function displayResults(weather) {

let city = document.querySelector(".location .city");

city.innerText = `${weather.name}, ${weather.sys.country}`;

let now = new Date();

let date = document.querySelector(".location .date");

date.innerText = dateBuilder(now);

let temp = document.querySelector(".current .temp");

temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`;

let weather_el = document.querySelector(".current .weather");

weather_el.innerText = weather.weather[0].main;

let hilow = document.querySelector(".hi-low");

hilow.innerText = `${Math.round(weather.main.temp_min)}°c / ${Math.round(

weather.main.temp_max

)}°c`;

}

function dateBuilder(d) {

let months = [

"January",

"February",

"March",

"April",

"May",

"June",

"July",

"August",

"September",

"October",

"November",

"December",

];

let days = [

"Sunday",

"Monday",

"Tuesday",

"Wednesday",

"Thursday",

"Friday",

"Saturday",

];

let day = days[d.getDay()];

let date = d.getDate();

let month = months[d.getMonth()];

let year = d.getFullYear();

return `${day} ${date} ${month} ${year}`;

}

venereology answered 1 year ago

Next > < Previous

Question

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet"...

Solutions

Expert Solution

Related Solutions

HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Clock</title> <link rel="stylesheet" href="clock.css"> &n