HTML/CSS - weather Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>Weather App</title>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    </head>
    <body>
    <center>
    <div id="topbar">WeatherAPP<span id="searchicon">🔍</span></div>
    
    <div id="searchbox">
        <input type="text" id="search" placeholder="Enter City Name">
        <button>Search</button>
        
    </div>
        <div id="mainbody">
            <img>
            <span id="city"></span>
            <br /><br /><br /><br />
            <span id="temp"></span>
            <span id="cond">&nbsp;</span>
            <br /><br /><br />
            <center>
            <div id="more">
            <span id="label">Chance of Rain: </span><span id="chanceofrain">&nbsp;</span>
            </div>
            <div id="more">
            <span id="label">Feel Like: </span><span id="feel">&nbsp;</span>

css

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab&display=swap');
body {
    font-family: 'Zilla Slab', sans-serif;
    background-color:  #0096c9;
}
input, button {
    font-family: 'Zilla Slab', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color:  white;
}
#topbar, #searchbox, #more, #forecastlabel, #forecast #date, #footer {
    background-color:  #373737;
    color:  white;
}
#topbar {
    font-size: 25px;
    font-weight: bold;
    color:  white;
    padding: 8px;
}
#searchbox {
    padding: 10px;
    display: none;

var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var i= 0;
var d ='', day='';
var url = "https://api.weatherapi.com/v1/forecast.json";
var key = "8a1362221e524488b3e112953200305";
$(document).ready(function(){
    weather('South Ofankor');
});
function weather(city) {
var api = url+'?key='+key+'&q='+city+'&days=3';
$.getJSON(api, function(result) {
        $("#city").html(result.location.name);
        $("#mainbody img").attr("src", 'https:'+result.current.condition.icon);
        $("#temp").html(result.current.temp_c+' °C');
        $("#chanceofrain").html(result.forecast.forecastday[0].day.daily_chance_of_rain+' %');
        $("#cond").html(result.current.condition.text);
        $("#humidity").html(result.current.humidity+' %');
        $("#feel").html(result.current.feelslike_c+' °C');
        $("#wind").html(result.current.wind_kph+' km/h');
        $("#direction").html(result.current.wind_dir);
        $("#update").html(result.current.last_updated);
        $("#mainbody").show();
        for(i=0;i<=2;i++) {
        var date = result.forecast.forecastday[i].date;
        var avgtemp = result.forecast.forecastday[i].day.avgtemp_c+' °C';

BROWSER

Console