Build a Weather App With AJAX i started this way and i only want to work AJAX some of my code JS----const APIKEY= "524b5afdee461d22befd422e329cd441"$.ajax({url:`http://api.openweathermap.org/data/2.5/forecast?api_key=${APIKEY}`}).then((data) => {console.log(data)}) HTML--<!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <metaname="viewport" content="width=device-width, initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible" content="ie=edge"> <title>OpenWeatherMap Api</title> <linkrel="stylesheet" href="style.css"> </head> <body>  <divclass="input"> <inputtype="text" placeholder="Enter the city" class="input_text"> <inputtype="submit" value="Submit" class="submit"> </div> </div> <divclass="container"> <divclass="card"> <h1class="name" id="name"></h1> <pclass="temp"></p> <pclass="clouds"></p> <pclass="desc"></p> </div> </div> <script src="app.js"></script> </body> </html> CSS--*{ margin:0; padding:0; box-sizing: border-box; } body{ font-family:"Nunito",sans-serif; background:#f8f8f8; } .input{ text-align: center; margin:100px auto; } input[type="submit"]{ padding:15px30px; background:#e7e7e7; border: none; border-radius:1px; font-family:"Nunito",sans-serif; font-weight:bold; font-size:20px; } .input input[type="text"]{ width:600px; height:55px; padding:5px10px; background:#e7e7e7; border: none; border-radius:1px; font-family:"Nunito",sans-serif; font-weight:bold; font-size:20px; } .card{ width:50%; background:#e7e7e7; height:40vh; margin:50px auto; border-radius:2px; } .close{ float: right; margin-top:-2px; cursor: pointer; margin-right:20px; } .card h1{ padding:5px0; text-align: center; } .card p{ text-align: center; margin:40px0; font-size:20px; }

I have created separate html, CSS and js file. Check it by creating a project directory including…

Answered: Build a Weather App With AJAX

7th Edition

ISBN:9780133594140

Author:James Kurose, Keith Ross

Publisher:James Kurose, Keith Ross

Chapter1: Computer Networks And The Internet

Section: Chapter Questions

Problem R1RQ: What is the difference between a host and an end system? List several different types of end...

Related questions

Question

Build a Weather App With AJAX

i started this way and i only want to work AJAX

some of my code

JS----

const APIKEY= "524b5afdee461d22befd422e329cd441"

$.ajax({

url:`http://api.openweathermap.org/data/2.5/forecast?api_key=${APIKEY}`

}).then((data) => {

console.log(data)

}

)

HTML--

<!DOCTYPE html>
	<html lang="en">
	<head>
	<metacharset="UTF-8">
	<metaname="viewport" content="width=device-width, initial-scale=1.0">
	<metahttp-equiv="X-UA-Compatible" content="ie=edge">
	<title>OpenWeatherMap Api</title>
	<linkrel="stylesheet" href="style.css">
	</head>
	<body>
	<!-- <div class="main">
	<div class="header">
	<h1>OpenWeatherMap API</h1>
	<p>Enter any city name in the input box below to get the data</p>
	</div> -->

	<divclass="input">
	<inputtype="text" placeholder="Enter the city" class="input_text">
	<inputtype="submit" value="Submit" class="submit">
	</div>
	</div>

	<divclass="container">
	<divclass="card">
	<h1class="name" id="name"></h1>
	<pclass="temp"></p>
	<pclass="clouds"></p>
	<pclass="desc"></p>
	</div>
	</div>
	<script src="app.js"></script>
	</body> </html>

CSS--

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

	body{
	font-family:"Nunito",sans-serif;
	background:#f8f8f8;
	}

	.input{
	text-align: center;
	margin:100px auto;
	}

	input[type="submit"]{
	padding:15px30px;
	background:#e7e7e7;
	border: none;
	border-radius:1px;
	font-family:"Nunito",sans-serif;
	font-weight:bold;
	font-size:20px;
	}

	.input input[type="text"]{
	width:600px;
	height:55px;
	padding:5px10px;
	background:#e7e7e7;
	border: none;
	border-radius:1px;
	font-family:"Nunito",sans-serif;
	font-weight:bold;
	font-size:20px;
	}

	.card{
	width:50%;
	background:#e7e7e7;
	height:40vh;
	margin:50px auto;
	border-radius:2px;
	}


	.close{
	float: right;
	margin-top:-2px;
	cursor: pointer;
	margin-right:20px;
	}

	.card h1{
	padding:5px0;
	text-align: center;
	}

	.card p{
	text-align: center;
	margin:40px0;
	font-size:20px;
	}