Please can any code experts review and improve my code?
HTML
<!DOCTYPE html>
<html>
<head>
<title>API</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=font1|font2|etc" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="test"></h1>
<div class="weather-container">
<img id="icon">
<h1 id="weather"></h1>
<p>Description: <span id="desc"></span></p>
<p>Temperature: <span id="temp"></span></p>
</div>
<script src="mousetrap.js"></script>
<script src="moment.js"></script>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
That's the HTML. It is just mostly tags with id to output info.
JavaScript
var ask = prompt("Type in your city or town that you want the weather for. Please make sure you write the first letter as capital letter and you spell it right.");
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q="+ask+"&units=metric&appid=32b8cd17f2ff5d84d72342dd7408bab2", function(data) {
console.log(data);
var icon = "https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var weather = data.weather[0].main;
var desc = data.weather[0].description;
var temp = data.main.temp;
var temp1 = temp + "℃"
$("#icon").attr("src", icon);
document.getElementById('weather').innerHTML = weather;
document.getElementById('desc').innerHTML = desc;
document.getElementById('temp').innerHTML = temp1;
});
If there is any other language than jQquery that I can use to get JSON files from API, please let me know because I find jQuery quite confusing.