$(document).ready(function() {
$("#submitForecast").click(function() {
return getForecast();
});
});
function getForecast() {
var city = $("#city").val();
var days = $("#days").val();
if (city != '' && days != '') {
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/forecast/daily?q=' + city + "&units=metric" + "&cnt=" + days + "&APPID=c10bb3bd22f90d636baa008b1529ee25",
type: "GET",
dataType: "jsonp",
success: function(data) {
var table = '';
var header = '<h2 style="font-weight:bold; font-size:30px; margin-top:20px;">Weather forecast for ' + data.city.name + ', ' + data.city.country + '</h2>'
for (var i = 0; i < data.list.length; i++) {
table += "<tr>";
table += "<td><img src='http://openweathermap.org/img/w/" + data.list[i].weather[0].icon + ".png'></td>";
table += "<td>" + data.list[i].weather[0].main + "</td>";
table += "<td>" + data.list[i].weather[0].description + "</td>";
table += "<td>" + data.list[i].temp.morn + "°C</td>";
table += "<td>" + data.list[i].temp.night + "°C</td>";
table += "<td>" + data.list[i].temp.min + "°C</td>";
table += "<td>" + data.list[i].temp.max + "°C</td>";
table += "<td>" + data.list[i].pressure + "hpa</td>";
table += "<td>" + data.list[i].humidity + "%</td>";
table += "<td>" + data.list[i].speed + "m/s</td>";
table += "<td>" + data.list[i].deg + "°</td>";
table += "</tr>";
}
$("#forecastWeather").html(table);
$("#header").html(header);
$("#city").val('');
$("#days").val('')
}
});
} else {
$("#error").html("<div class='alert alert-danger' id='errorCity'><a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a>City field cannot be empty</div>");
}
}body {
font-family: 'Tangerine', serif;
background-color: #ffffff;
font-size: 20px;
margin: 0;
padding: 0;
}
#nav_bar {
margin-bottom: 0px;
padding: 0;
background-color: white;
border: none;
}
... // Omitted for brevity
.menu {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
list-style:none;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Weather App - Forecast</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="headers">
<nav class="navbars">
<div class="navbar-container">
<div class="logo">Mike Peavy</div>
<ul class="menu">
<li><a href="#bio">Bio</a></li>
<li><a href="#quiz">Portfolio</a></li>
<li><a href="https://github.com/Mike4141" target="_blank"> Github</a></li>
</ul>
</div>
</nav>
</header>
... // Omitted for brevity
</body>
</html>I'm fairly new to web development, and I'm looking for someone experienced to help me with a problem I'm having. I bought a course on Udemy on building a weather app. I want to make changes to it and do what I think would make it look nicer. How would I get my results to display in a row and still look good on desktops? If I need to provide a better description, please let you know if you need more details.