Question

In: Computer Science

Sign up for an API Key to consume OpenWeathermap.org and using their Weather API, using Bootstrap,...

Sign up for an API Key to consume OpenWeathermap.org and using their Weather API, using Bootstrap, axios, jQuery create an application that returns weather information for a given Zip Code (see https://openweathermap.org/current#zip), I.e. a form with a zip code input and button that when i click the button it returns the weather information on the DOM.

Even extra points if you handle the loading state so that the user is aware something is loading.

  • Submission should be through github, you should “submit” a link to the github repository
  • The repository should be a single HTML page, a single JavaScript file and optional CSS file(s)
  • As always, HTML, JavaScript and CSS must be valid.
  • As always, JavaScript must not produce any errors.

You can use https://getbootstrap.com/docs/4.4/getting-started/introduction/#starter-template as a starting point

Solutions

Expert Solution

CODE :

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Live Weather App Using jQuery (Open Weather API) </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 leading-normal my-10" style="background:#edf2f6;">
<div class="flex mb-4">
<div class="w-full text-center">
<h1 class="text-4xl">Live Weather App Using jQuery (Open Weather API)</h1>
</div>
</div>
<div class="flex items-center justify-center p-8">
<div class="flex mb-4">
<div class="w-full text-center">
<div class="max-w-sm bg-white shadow-lg rounded p-3">
<div class="timeBlock border border-gray-100 my-2 p-2">
<h4>Date and Time</h4>
<span id="date"></span> | <span id="time"></span>
</div>
<form>
<div class="max-w-sm my-3">
<input id="location" class="w-full h-12 px-3 rounded mb-2 focus:outline-none focus:shadow-outline text-md shadow-md" type="search" placeholder="Search your location...">
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Search Location</button>
</div>
</form>
<div class="w-full text-center">
<div class="justify-center"><img src="img/weather.png" width="170px" style="margin: 0 auto;" /></div>
<span id="temperature" class="text-6xl"></span><span id="unit">°C</span>
<div id="status" class="text-2xl"></div>
</div>
<table class="w-full text-center border-collapse">
<!--Border collapse doesn't work on this site yet but it's available in newer tailwind versions -->
<tbody>
<tr class="hover:bg-grey-lighter">
<td class="py-4 px-6 border-b border-grey-light"><img width="30px" src="img/wind.png" style="margin: 0 auto;" /><span class="windSpeed"></span> <span class="windSpeedUnit">km/h</span></td>
<td class="py-4 px-6 border-b border-grey-light"><img width="30px" src="img/pressure.png" style="margin: 0 auto;" /><span class="pressure"></span></td>
</tr>
<tr class="hover:bg-grey-lighter">
<td class="py-4 px-6 border-b border-grey-light"><img width="30px" src="img/windsock.png" style="margin: 0 auto;" /><span class="windDirection"></span></td>
<td class="py-4 px-6 border-b border-grey-light"><img width="30px" src="img/humidity.png" style="margin: 0 auto;" /><span class="humidity"></span></td>
</tr>
</tbody>
</table>
<div class="w-full text-center my-3">
<input id="celsius_F" type="checkbox" class="checkbox">
<label for="celsius_F" class="text-1xl">Celsius</label>
</div>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="script.js"></script>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

script.js:

var unit = "C";
$(".checkbox").prop("checked", "checked");
function getLocation() {
$.get("https://ipapi.co/json", function(data) {
getWeather(data.city);
});
}
function getWeather(city) {
var api = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?q=";
var units = "&units=metric";
var appid = "&APPID=061f24cf3cde2f60644a8240302983f2";
var $http = api + city + units + appid;
$.getJSON($http, function(data) {
console.log(data);
temp = data.main.temp.toFixed(0);
status = data.weather[0].description;
iconId = data.weather[0].id;
pressure = data.main.pressure ? Math.round(data.main.pressure) : "N/A ";
humidity = data.main.humidity ? Math.round(data.main.humidity) : "N/A ";
windSpeed = data.wind.speed ? (data.wind.speed * 3.6).toFixed(0) : "N/A ";
windDirection = data.wind.deg ? data.wind.deg.toFixed(0) : "N/A ";
city = data.name;
country = data.sys.country;
var hours = new Date().getHours();
var dayOrNight = hours > 6 && hours < 22 ? "day" : "night";
inputTextValue = city + ", " + country;
$("#location").val(inputTextValue);
$(".forecast-status")
.find(".wi")
.addClass("wi-owm-" + dayOrNight + "-" + iconId);
$("#temperature").text(temp);
$("#status").text(status[0].toUpperCase() + status.slice(1));
$(".pressure").text(pressure + " hPa");
$(".humidity").text(humidity + " %");
$(".windSpeed").text(windSpeed);
$(".windDirection").text(
windDirection + "deg " + degToCompass(windDirection)
);
$(".wi-wind").addClass("towards-" + windDirection + "-deg");
changeBackground(iconId);
});
}
function degToCompass(num) {
var val = Math.floor(num / 22.5 + 0.5);
var arr = [
"(N)",
"(NNE)",
"(NE)",
"(ENE)",
"(E)",
"(ESE)",
"(SE)",
"(SSE)",
"(S)",
"(SSW)",
"(SW)",
"(WSW)",
"(W)",
"(WNW)",
"(NW)",
"(NNW)"
];
return arr[val % 16] || "";
}
function celsius_F() {
if (unit == "F") {
unit = "C";
windSpeedUnit = "km/h";
temp = Math.round((temp - 32) * 5 / 9 * 10 / 10);
windSpeed = Math.round(windSpeed * 1.609344 * 10 / 10);
} else if (unit == "C") {
unit = "F";
windSpeedUnit = "mph";
temp = Math.round((temp * (9 / 5) + 32) * 10 / 10);
windSpeed = Math.round(windSpeed * 0.62137119223733 * 10 / 10);
}
$("#temperature").text(temp);
$("#unit").text("°" + unit);
$(".windSpeed").text(windSpeed);
$(".windSpeedUnit").text(windSpeedUnit);
}
function getDate() {
var d = new Date();
var date = d.toLocaleDateString();
$("#date").html(date);
}
function getClock() {
var d = new Date(),
h = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds();
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
$("#time").text(h + ":" + m + ":" + s);
var t = setTimeout(getClock, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
getDate();
getClock();
getLocation();
window.onkeyup = keyup;
var inputTextValue;
function keyup(e) {
//setting your input text to the global Javascript Variable for every key press
inputTextValue = e.target.value;
if (e.keyCode == 13) {
console.log(inputTextValue);
if (~inputTextValue.indexOf(",")) inputTextValue = "";
getWeather(inputTextValue);
}
}
$(document).ready(function() {
$("#location").on("click", function() {
$(this).val("");
inputTextValue = "";
});
$('form').submit(function() {
if (~inputTextValue.indexOf(",")) inputTextValue = "";
getWeather(inputTextValue);
return false;
});
$("#celsius_F").on("change", function() {
celsius_F();
});
$(".beforeText, .forecast-temp").on("click", function() {
$(".checkbox").prop("checked", function(idx, oldProp) {
return !oldProp;
});
celsius_F();
});
});

Thank you...

venereology answered 4 hours ago
Next > < Previous

Related Solutions

i want to create a weather api. which is pullling out information of all the cities(for...
i want to create a weather api. which is pullling out information of all the cities(for the whole world)  using their names or by their zipcode. and it should change the background image as the temperature is, cold, or hot, or mild etc. i need in help in making this weather api and also it can be in any language. please help me out
Create a Weather API.(ANY LANUGUAGE). " that pulls out information from web and stores the data...
Create a Weather API.(ANY LANUGUAGE). " that pulls out information from web and stores the data in back end. in which users can enter location: city or zip code to get the weather of that city or state. weather info should be in degree farenhit and centigrade. it should show the images as you see in you phone for weather and speed, etc. and it should change picture according to weather. for example, rain, cloudy, sunny, night, thunder. SHOW THE...
Bill’s Bootstrap is analyzing whether to go ahead with a project to set up a pop-up...
Bill’s Bootstrap is analyzing whether to go ahead with a project to set up a pop-up store at the Calgary Stampede, which would be operational for the next three years. Question 19 Part A. The mini building would cost the company $600,000 today and would be sold at the end of the three years for $0 and have no tax consequences thereafter. With a CCA rate of d = 25%, what are the CCA deductions for the three years of...
Using the weather Markov chain simulate the weather over 10 days by flipping a coin to...
Using the weather Markov chain simulate the weather over 10 days by flipping a coin to determine the chances of sunny or cloudy weather the next day according to the Markov chain's transition probabilities. If currently sunny, flip once and a head means sunny the next day and a tail means cloudy the next day. If currently cloudy flip twice and when either flip is a head it is sunny the next day and when both flips are tails it...
Why are the advantages to using Bootstrap and ASP.NET and discuss the importance of generating HTML...
Why are the advantages to using Bootstrap and ASP.NET and discuss the importance of generating HTML dynamically by coding HTML elements.
Do not answer using a percent sign, a dollar sign or with a number containing commas....
Do not answer using a percent sign, a dollar sign or with a number containing commas. For the questions involving rates, you can answer as a percent (for example 10) or as a decimal (for example 0.1). 1.4 Assume you purchased a share of stock for $80 on January 1, 2008 and sold the share of stock for $30 on December 31, 2012. If the stock paid no dividends what your average yearly growth rate? 1.5 Suppose the average growth...
Do not answer using a percent sign, a dollar sign or with a number containing commas....
Do not answer using a percent sign, a dollar sign or with a number containing commas. For the questions involving rates, you can answer as a percent (for example 10) or as a decimal (for example 0.1). 1.1 Suppose you purchased 100 shares of stock for $40 on January 1, 2003 and sold the share of stock for $100 on December 31, 2012. If the stock paid no dividends what is your holding period return? 1.2 Suppose you purchased 100...
Why is it in the providers' interest to sign up with MCOs, for the Class? How...
Why is it in the providers' interest to sign up with MCOs, for the Class? How do providers select the MCO which best suits their interests? By establishing a provider network, it will help contract cost for care or services, the quality of it (that is being provided), and it also creates drug formulary (pharmaceutical) or tiering cost of the drug for the patients. This network of provider sort of acts as a bundle where all services that are being...
A purple beam is hinged to a wall to hold up a blue sign. The beam...
A purple beam is hinged to a wall to hold up a blue sign. The beam has a mass of mb = 6.3 kg and the sign has a mass of ms = 15.1 kg. The length of the beam is L = 2.74 m. The sign is attached at the very end of the beam, but the horizontal wire holding up the beam is attached 2/3 of the way to the end of the beam. The angle the wire...
A purple beam is hinged to a wall to hold up a blue sign. The beam...
A purple beam is hinged to a wall to hold up a blue sign. The beam has a mass of mb = 6.2 kg and the sign has a mass of ms = 17.4 kg. The length of the beam is L = 2.57 m. The sign is attached at the very end of the beam, but the horizontal wire holding up the beam is attached 2/3 of the way to the end of the beam. The angle the wire...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT