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

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 2 years ago

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

HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Clock</title> <link rel="stylesheet" href="clock.css"> <script src="clock.js"></script> </head> <body> <main> <h1>Digital clock</h1> <fieldset> <legend>Clock</legend> <span id="hours"> </span>: <span id="minutes"> </span>: <span id="seconds"> </span>  <span id="ampm"> </span> </fieldset> </main> </body> </html> CSS: body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 450px; border: 3px solid blue; padding: 0 2em 1em; } h1 { color: blue; } label { float: left; width: 11em; text-align: right; padding-bottom: .5em; } input { margin-left: 1em; margin-bottom: .5em; } fieldset {...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */ #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ } header h1 { text-align: center; } nav { text-align: center; background: rgb(175, 196, 206); } address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...

<!DOCTYPE html> <html lang="en"> <head> <title>Form Display Example</title> <script type="text/javascript"> function display() {...

<!DOCTYPE html> <html lang="en"> <head> <title>Form Display Example</title> <script type="text/javascript"> function display() { dispWin = window.open('','NewWin','toolbar=no,status=no,width=300,height=200') message = "<ul><li>NAME:" + document.form1.name.value; message += "<li>ADDRESS:" + document.form1.address.value; message += "<li>PHONE:" + document.form1.phone.value; message += "</ul>"; dispWin.document.write(message); } </script> </head> <body> <h1>Form Display Example</h1> <p>Enter the following information. When you press the Display button, the data you entered will be displayed in a pop-up.</p> <form name="form1" method="get" action=""> ...