Hello, how do I do a Javascript where you click on different tabs for the weather where one tab would display for Today, another for Tomorrow and another for Onward? Here’s the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Today {background-color: red;}
#Tomorrow {background-color: green;}
#Onward{background-color: blue;}
</style>
</head>
<body>
<button class="tablink" onclick="openPage('Today', this, 'red')" id="defaultOpen">Today</button>
<button class="tablink" onclick="openPage('Tomorrow', this, 'green')">Tomorrow</button>
<button class="tablink" onclick="openPage('Onward', this, 'blue')">Onward</button>
<p id="properties-generated"></p>
<div class="flex-it" id="properties-periods">
</div>
<script type="text/html" id="periodTemplate">
<div class="weather-period">
<div>{name}</div>
<img src='{icon}' />
<div>{temperature}</div>
<div>{windSpeed} {windDirection}</div>
<div>{shortForecast}</div>
</div>
</script>
<div id="Today" class="tabcontent">
<h3>Today</h3>
<script>
var farSymbol = "℉";
var celSymbol = "℃";
$(function(){
$.get( "https://api.weather.gov/gridpoints/OAX/82,59/forecast")
.done(function(data) {
console.info(data);
$("#properties-generated").text(new Date(data.properties.generatedAt));
var template = $("#periodTemplate").html();
for(var idx = 0 ; idx < data.properties.periods.length ; idx++){
var period = data.properties.periods[idx];
$("#properties-periods").append(
template
.replace(/{name}/, period.name)
.replace(/{temperature}/, period.temperature + (period.temperatureUnit.toUpperCase() === "F"
? farSymbol
: celSymbol) )
.replace(/{windSpeed}/, period.windSpeed)
.replace(/{windDirection}/, period.windDirection)
.replace(/{icon}/, period.icon)
.replace(/{shortForecast}/, period.shortForecast)
)
}
})
.fail(function(responseText, textStatus, req) {
console.info(arguments);
alert( textStatus );
})
.always(function() {
console.log( "finished, wether it worked or not. (See what I did there?)" );
});
});
</script>
</div>
<div id="Tomorrow" class="tabcontent">
<h3>Tomorrow</h3>
<script>
var farSymbol = "℉";
var celSymbol = "℃";
$(function(){
$.get( "https://api.weather.gov/gridpoints/OAX/82,59/forecast")
.done(function(data) {
console.info(data);
$("#properties-generated").text(new Date(data.properties.generatedAt));
var template = $("#periodTemplate").html();
for(var idx = 0 ; idx < data.properties.periods.length ; idx++){
var period = data.properties.periods[idx];
$("#properties-periods").append(
template
.replace(/{name}/, period.name)
.replace(/{temperature}/, period.temperature + (period.temperatureUnit.toUpperCase() === "F"
? farSymbol
: celSymbol) )
.replace(/{windSpeed}/, period.windSpeed)
.replace(/{windDirection}/, period.windDirection)
.replace(/{icon}/, period.icon)
.replace(/{shortForecast}/, period.shortForecast)
)
}
})
.fail(function(responseText, textStatus, req) {
console.info(arguments);
alert( textStatus );
})
.always(function() {
console.log( "finished, wether it worked or not. (See what I did there?)" );
});
});
</script>
</div>
<div id="Onward" class="tabcontent">
<h3>Onward</h3>
<script>
var farSymbol = "℉";
var celSymbol = "℃";
$(function(){
$.get( "https://api.weather.gov/gridpoints/OAX/82,59/forecast")
.done(function(data) {
console.info(data);
$("#properties-generated").text(new Date(data.properties.generatedAt));
var template = $("#periodTemplate").html();
for(var idx = 0 ; idx < data.properties.periods.length ; idx++){
var period = data.properties.periods[idx];
$("#properties-periods").append(
template
.replace(/{name}/, period.name)
.replace(/{temperature}/, period.temperature + (period.temperatureUnit.toUpperCase() === "F"
? farSymbol
: celSymbol) )
.replace(/{windSpeed}/, period.windSpeed)
.replace(/{windDirection}/, period.windDirection)
.replace(/{icon}/, period.icon)
.replace(/{shortForecast}/, period.shortForecast)
)
}
})
.fail(function(responseText, textStatus, req) {
console.info(arguments);
alert( textStatus );
})
.always(function() {
console.log( "finished, wether it worked or not. (See what I did there?)" );
});
});
</script>
</div>
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>