Mixing
Skycons will not work when auto fetching data from darksky api
0
I seem to have a problem where the skycons are working nicely when I hard code the "class" attribute for the "canvas" elements. When I have it try to fetch the icon data from the Dark Sky api the icon will not show up. It seems like the skycons script runs before the icon data is received.
I am very novice at the coding so I am sure there are more efficient ways I could code this so please don't laugh too hard. Everything has to be in the HTML page. I would separate everything if I could for the application I am using this for.
Here is my codepen
https://codepen.io/scott-pussehl/pen/GPyvPZ
<!DOCTYPE html>
<HTML>
<HEAD>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js"></script>
<TITLE></TITLE>
<STYLE>
a{text-decoration:none;}
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
padding:0;
margin:0;
font-family: 'Raleway', Helvetica, Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
p{
margin:0;
}
.content-top {
background: white;
padding: 20px;
color: #0C1147;
}
.current{
float:left;
width:18%;
text-align:left;
padding: .75%;
}
.day{
float:left;
width:14%;
text-align:left;
border-left:2px solid #0C1147;
padding: .75%;
}
.left{
float:left;
width:50%;
text-align:center;
margin: 0;
}
.right{
float:right;
width:50%;
text-align:center;
margin: 0;
}
h6{
font-size: 25px;
margin-bottom: 15px
}
.current p{
font-size: 25pt;
}
p{
font-size: 20pt;
font-weight: bold;
color: #0C1147;
}
.h {
color: LightGray;
}
</STYLE>
<script> /* Scotts Javascript */
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/01c70afc31b9faa06047d80cf607b364/45.164393,-84.930449?exclude=minutely,hourly,flags,alerts?units=us", true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
ctemp = Math.round(response.currently.temperature) + '°';
atmax = Math.round(response.daily.data[0].temperatureMax) + '°';
atmin = Math.round(response.daily.data[0].temperatureMin) + '°';
btmax = Math.round(response.daily.data[1].temperatureMax) + '°';
btmin = Math.round(response.daily.data[1].temperatureMin) + '°';
ctmax = Math.round(response.daily.data[2].temperatureMax) + '°';
ctmin = Math.round(response.daily.data[2].temperatureMin) + '°';
dtmax = Math.round(response.daily.data[3].temperatureMax) + '°';
dtmin = Math.round(response.daily.data[3].temperatureMin) + '°';
etmax = Math.round(response.daily.data[4].temperatureMax) + '°';
etmin = Math.round(response.daily.data[4].temperatureMin) + '°';
document.getElementById("cctemp").innerHTML = ctemp;
document.getElementById("00tmax").innerHTML = atmax;
document.getElementById("00tmin").innerHTML = atmin;
document.getElementById("11tmax").innerHTML = btmax;
document.getElementById("11tmin").innerHTML = btmin;
document.getElementById("22tmax").innerHTML = ctmax;
document.getElementById("22tmin").innerHTML = ctmin;
document.getElementById("33tmax").innerHTML = dtmax;
document.getElementById("33tmin").innerHTML = dtmin;
document.getElementById("44tmax").innerHTML = etmax;
document.getElementById("44tmin").innerHTML = etmin;
document.getElementsByTagName("canvas")[0].className = response.currently.icon;
document.getElementsByTagName("canvas")[1].className = response.daily.data[0].icon;
document.getElementsByTagName("canvas")[2].className = response.daily.data[1].icon;
document.getElementsByTagName("canvas")[3].className = response.daily.data[2].icon;
document.getElementsByTagName("canvas")[4].className = response.daily.data[3].icon;
document.getElementsByTagName("canvas")[5].className = response.daily.data[4].icon;
var d = new Date();
var weekday = new Array(7);
weekday[0] = "SUN";
weekday[1] = "MON";
weekday[2] = "TUE";
weekday[3] = "WED";
weekday[4] = "THU";
weekday[5] = "FRI";
weekday[6] = "SAT";
var n = d.getDay();
da = n;
document.getElementById("1da").innerHTML = weekday[da];
n = d.getDay() + 1;
if (n > 6) {n = 0};
db = n;
document.getElementById("1db").innerHTML = weekday[db];
n = n + 1;
if (n > 6) {n = 0};
dc = n;
document.getElementById("1dc").innerHTML = weekday[dc];
n = n + 1;
if (n > 6) {n = 0};
dd = n;
document.getElementById("1dd").innerHTML = weekday[dd];
n = n + 1;
if (n > 6) {n = 0};
de = n;
document.getElementById("1de").innerHTML = weekday[de];
}
}
</SCRIPT>
</HEAD>
<BODY>
<div class="content-top">
<div class="current">
<div class="left">
<h6>CURRENTLY</h6>
<p id="cctemp"></p>
</div>
<div class="right">
<canvas width="80" height="80" class="rain"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1da"></h6>
<p><span id="00tmax"></span> <span class="h" id="00tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="snow"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1db"></h6>
<p><span id="11tmax"></span> <span class="h" id="11tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="sleet"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dc"></h6>
<p><span id="22tmax"></span> <span class="h" id="22tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="partly-cloudy-day"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dd"></h6>
<p><span id="33tmax"></span> <span class="h" id="33tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-day" ></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1de"></h6>
<p><span id="44tmax"></span> <span class="h" id="44tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-night" ></canvas>
</div>
</div>
<div class="clear"></div>
</div>
<script>
var icons = new Skycons({
"color": "#888"
}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for (i = list.length; i--;) {
var weatherType = list[i],
elements = document.getElementsByClassName(weatherType);
for (e = elements.length; e--;) {
icons.set(elements[e], weatherType);
}
}
icons.play();
</script>
</BODY>
</HTML>javascript html
asked Jan 2 at 18:46
Scott PussehlScott Pussehl
217
add a comment |
0
I seem to have a problem where the skycons are working nicely when I hard code the "class" attribute for the "canvas" elements. When I have it try to fetch the icon data from the Dark Sky api the icon will not show up. It seems like the skycons script runs before the icon data is received.
I am very novice at the coding so I am sure there are more efficient ways I could code this so please don't laugh too hard. Everything has to be in the HTML page. I would separate everything if I could for the application I am using this for.
Here is my codepen
https://codepen.io/scott-pussehl/pen/GPyvPZ
<!DOCTYPE html>
<HTML>
<HEAD>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js"></script>
<TITLE></TITLE>
<STYLE>
a{text-decoration:none;}
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
padding:0;
margin:0;
font-family: 'Raleway', Helvetica, Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
p{
margin:0;
}
.content-top {
background: white;
padding: 20px;
color: #0C1147;
}
.current{
float:left;
width:18%;
text-align:left;
padding: .75%;
}
.day{
float:left;
width:14%;
text-align:left;
border-left:2px solid #0C1147;
padding: .75%;
}
.left{
float:left;
width:50%;
text-align:center;
margin: 0;
}
.right{
float:right;
width:50%;
text-align:center;
margin: 0;
}
h6{
font-size: 25px;
margin-bottom: 15px
}
.current p{
font-size: 25pt;
}
p{
font-size: 20pt;
font-weight: bold;
color: #0C1147;
}
.h {
color: LightGray;
}
</STYLE>
<script> /* Scotts Javascript */
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/01c70afc31b9faa06047d80cf607b364/45.164393,-84.930449?exclude=minutely,hourly,flags,alerts?units=us", true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
ctemp = Math.round(response.currently.temperature) + '°';
atmax = Math.round(response.daily.data[0].temperatureMax) + '°';
atmin = Math.round(response.daily.data[0].temperatureMin) + '°';
btmax = Math.round(response.daily.data[1].temperatureMax) + '°';
btmin = Math.round(response.daily.data[1].temperatureMin) + '°';
ctmax = Math.round(response.daily.data[2].temperatureMax) + '°';
ctmin = Math.round(response.daily.data[2].temperatureMin) + '°';
dtmax = Math.round(response.daily.data[3].temperatureMax) + '°';
dtmin = Math.round(response.daily.data[3].temperatureMin) + '°';
etmax = Math.round(response.daily.data[4].temperatureMax) + '°';
etmin = Math.round(response.daily.data[4].temperatureMin) + '°';
document.getElementById("cctemp").innerHTML = ctemp;
document.getElementById("00tmax").innerHTML = atmax;
document.getElementById("00tmin").innerHTML = atmin;
document.getElementById("11tmax").innerHTML = btmax;
document.getElementById("11tmin").innerHTML = btmin;
document.getElementById("22tmax").innerHTML = ctmax;
document.getElementById("22tmin").innerHTML = ctmin;
document.getElementById("33tmax").innerHTML = dtmax;
document.getElementById("33tmin").innerHTML = dtmin;
document.getElementById("44tmax").innerHTML = etmax;
document.getElementById("44tmin").innerHTML = etmin;
document.getElementsByTagName("canvas")[0].className = response.currently.icon;
document.getElementsByTagName("canvas")[1].className = response.daily.data[0].icon;
document.getElementsByTagName("canvas")[2].className = response.daily.data[1].icon;
document.getElementsByTagName("canvas")[3].className = response.daily.data[2].icon;
document.getElementsByTagName("canvas")[4].className = response.daily.data[3].icon;
document.getElementsByTagName("canvas")[5].className = response.daily.data[4].icon;
var d = new Date();
var weekday = new Array(7);
weekday[0] = "SUN";
weekday[1] = "MON";
weekday[2] = "TUE";
weekday[3] = "WED";
weekday[4] = "THU";
weekday[5] = "FRI";
weekday[6] = "SAT";
var n = d.getDay();
da = n;
document.getElementById("1da").innerHTML = weekday[da];
n = d.getDay() + 1;
if (n > 6) {n = 0};
db = n;
document.getElementById("1db").innerHTML = weekday[db];
n = n + 1;
if (n > 6) {n = 0};
dc = n;
document.getElementById("1dc").innerHTML = weekday[dc];
n = n + 1;
if (n > 6) {n = 0};
dd = n;
document.getElementById("1dd").innerHTML = weekday[dd];
n = n + 1;
if (n > 6) {n = 0};
de = n;
document.getElementById("1de").innerHTML = weekday[de];
}
}
</SCRIPT>
</HEAD>
<BODY>
<div class="content-top">
<div class="current">
<div class="left">
<h6>CURRENTLY</h6>
<p id="cctemp"></p>
</div>
<div class="right">
<canvas width="80" height="80" class="rain"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1da"></h6>
<p><span id="00tmax"></span> <span class="h" id="00tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="snow"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1db"></h6>
<p><span id="11tmax"></span> <span class="h" id="11tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="sleet"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dc"></h6>
<p><span id="22tmax"></span> <span class="h" id="22tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="partly-cloudy-day"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dd"></h6>
<p><span id="33tmax"></span> <span class="h" id="33tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-day" ></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1de"></h6>
<p><span id="44tmax"></span> <span class="h" id="44tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-night" ></canvas>
</div>
</div>
<div class="clear"></div>
</div>
<script>
var icons = new Skycons({
"color": "#888"
}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for (i = list.length; i--;) {
var weatherType = list[i],
elements = document.getElementsByClassName(weatherType);
for (e = elements.length; e--;) {
icons.set(elements[e], weatherType);
}
}
icons.play();
</script>
</BODY>
</HTML>javascript html
asked Jan 2 at 18:46
Scott PussehlScott Pussehl
217
add a comment |
0
0
0
I seem to have a problem where the skycons are working nicely when I hard code the "class" attribute for the "canvas" elements. When I have it try to fetch the icon data from the Dark Sky api the icon will not show up. It seems like the skycons script runs before the icon data is received.
I am very novice at the coding so I am sure there are more efficient ways I could code this so please don't laugh too hard. Everything has to be in the HTML page. I would separate everything if I could for the application I am using this for.
Here is my codepen
https://codepen.io/scott-pussehl/pen/GPyvPZ
<!DOCTYPE html>
<HTML>
<HEAD>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js"></script>
<TITLE></TITLE>
<STYLE>
a{text-decoration:none;}
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
padding:0;
margin:0;
font-family: 'Raleway', Helvetica, Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
p{
margin:0;
}
.content-top {
background: white;
padding: 20px;
color: #0C1147;
}
.current{
float:left;
width:18%;
text-align:left;
padding: .75%;
}
.day{
float:left;
width:14%;
text-align:left;
border-left:2px solid #0C1147;
padding: .75%;
}
.left{
float:left;
width:50%;
text-align:center;
margin: 0;
}
.right{
float:right;
width:50%;
text-align:center;
margin: 0;
}
h6{
font-size: 25px;
margin-bottom: 15px
}
.current p{
font-size: 25pt;
}
p{
font-size: 20pt;
font-weight: bold;
color: #0C1147;
}
.h {
color: LightGray;
}
</STYLE>
<script> /* Scotts Javascript */
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/01c70afc31b9faa06047d80cf607b364/45.164393,-84.930449?exclude=minutely,hourly,flags,alerts?units=us", true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
ctemp = Math.round(response.currently.temperature) + '°';
atmax = Math.round(response.daily.data[0].temperatureMax) + '°';
atmin = Math.round(response.daily.data[0].temperatureMin) + '°';
btmax = Math.round(response.daily.data[1].temperatureMax) + '°';
btmin = Math.round(response.daily.data[1].temperatureMin) + '°';
ctmax = Math.round(response.daily.data[2].temperatureMax) + '°';
ctmin = Math.round(response.daily.data[2].temperatureMin) + '°';
dtmax = Math.round(response.daily.data[3].temperatureMax) + '°';
dtmin = Math.round(response.daily.data[3].temperatureMin) + '°';
etmax = Math.round(response.daily.data[4].temperatureMax) + '°';
etmin = Math.round(response.daily.data[4].temperatureMin) + '°';
document.getElementById("cctemp").innerHTML = ctemp;
document.getElementById("00tmax").innerHTML = atmax;
document.getElementById("00tmin").innerHTML = atmin;
document.getElementById("11tmax").innerHTML = btmax;
document.getElementById("11tmin").innerHTML = btmin;
document.getElementById("22tmax").innerHTML = ctmax;
document.getElementById("22tmin").innerHTML = ctmin;
document.getElementById("33tmax").innerHTML = dtmax;
document.getElementById("33tmin").innerHTML = dtmin;
document.getElementById("44tmax").innerHTML = etmax;
document.getElementById("44tmin").innerHTML = etmin;
document.getElementsByTagName("canvas")[0].className = response.currently.icon;
document.getElementsByTagName("canvas")[1].className = response.daily.data[0].icon;
document.getElementsByTagName("canvas")[2].className = response.daily.data[1].icon;
document.getElementsByTagName("canvas")[3].className = response.daily.data[2].icon;
document.getElementsByTagName("canvas")[4].className = response.daily.data[3].icon;
document.getElementsByTagName("canvas")[5].className = response.daily.data[4].icon;
var d = new Date();
var weekday = new Array(7);
weekday[0] = "SUN";
weekday[1] = "MON";
weekday[2] = "TUE";
weekday[3] = "WED";
weekday[4] = "THU";
weekday[5] = "FRI";
weekday[6] = "SAT";
var n = d.getDay();
da = n;
document.getElementById("1da").innerHTML = weekday[da];
n = d.getDay() + 1;
if (n > 6) {n = 0};
db = n;
document.getElementById("1db").innerHTML = weekday[db];
n = n + 1;
if (n > 6) {n = 0};
dc = n;
document.getElementById("1dc").innerHTML = weekday[dc];
n = n + 1;
if (n > 6) {n = 0};
dd = n;
document.getElementById("1dd").innerHTML = weekday[dd];
n = n + 1;
if (n > 6) {n = 0};
de = n;
document.getElementById("1de").innerHTML = weekday[de];
}
}
</SCRIPT>
</HEAD>
<BODY>
<div class="content-top">
<div class="current">
<div class="left">
<h6>CURRENTLY</h6>
<p id="cctemp"></p>
</div>
<div class="right">
<canvas width="80" height="80" class="rain"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1da"></h6>
<p><span id="00tmax"></span> <span class="h" id="00tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="snow"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1db"></h6>
<p><span id="11tmax"></span> <span class="h" id="11tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="sleet"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dc"></h6>
<p><span id="22tmax"></span> <span class="h" id="22tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="partly-cloudy-day"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dd"></h6>
<p><span id="33tmax"></span> <span class="h" id="33tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-day" ></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1de"></h6>
<p><span id="44tmax"></span> <span class="h" id="44tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-night" ></canvas>
</div>
</div>
<div class="clear"></div>
</div>
<script>
var icons = new Skycons({
"color": "#888"
}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for (i = list.length; i--;) {
var weatherType = list[i],
elements = document.getElementsByClassName(weatherType);
for (e = elements.length; e--;) {
icons.set(elements[e], weatherType);
}
}
icons.play();
</script>
</BODY>
</HTML>javascript html
asked Jan 2 at 18:46
Scott PussehlScott Pussehl
217
I seem to have a problem where the skycons are working nicely when I hard code the "class" attribute for the "canvas" elements. When I have it try to fetch the icon data from the Dark Sky api the icon will not show up. It seems like the skycons script runs before the icon data is received.
I am very novice at the coding so I am sure there are more efficient ways I could code this so please don't laugh too hard. Everything has to be in the HTML page. I would separate everything if I could for the application I am using this for.
Here is my codepen
https://codepen.io/scott-pussehl/pen/GPyvPZ
<!DOCTYPE html>
<HTML>
<HEAD>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js"></script>
<TITLE></TITLE>
<STYLE>
a{text-decoration:none;}
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
padding:0;
margin:0;
font-family: 'Raleway', Helvetica, Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
p{
margin:0;
}
.content-top {
background: white;
padding: 20px;
color: #0C1147;
}
.current{
float:left;
width:18%;
text-align:left;
padding: .75%;
}
.day{
float:left;
width:14%;
text-align:left;
border-left:2px solid #0C1147;
padding: .75%;
}
.left{
float:left;
width:50%;
text-align:center;
margin: 0;
}
.right{
float:right;
width:50%;
text-align:center;
margin: 0;
}
h6{
font-size: 25px;
margin-bottom: 15px
}
.current p{
font-size: 25pt;
}
p{
font-size: 20pt;
font-weight: bold;
color: #0C1147;
}
.h {
color: LightGray;
}
</STYLE>
<script> /* Scotts Javascript */
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/01c70afc31b9faa06047d80cf607b364/45.164393,-84.930449?exclude=minutely,hourly,flags,alerts?units=us", true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
ctemp = Math.round(response.currently.temperature) + '°';
atmax = Math.round(response.daily.data[0].temperatureMax) + '°';
atmin = Math.round(response.daily.data[0].temperatureMin) + '°';
btmax = Math.round(response.daily.data[1].temperatureMax) + '°';
btmin = Math.round(response.daily.data[1].temperatureMin) + '°';
ctmax = Math.round(response.daily.data[2].temperatureMax) + '°';
ctmin = Math.round(response.daily.data[2].temperatureMin) + '°';
dtmax = Math.round(response.daily.data[3].temperatureMax) + '°';
dtmin = Math.round(response.daily.data[3].temperatureMin) + '°';
etmax = Math.round(response.daily.data[4].temperatureMax) + '°';
etmin = Math.round(response.daily.data[4].temperatureMin) + '°';
document.getElementById("cctemp").innerHTML = ctemp;
document.getElementById("00tmax").innerHTML = atmax;
document.getElementById("00tmin").innerHTML = atmin;
document.getElementById("11tmax").innerHTML = btmax;
document.getElementById("11tmin").innerHTML = btmin;
document.getElementById("22tmax").innerHTML = ctmax;
document.getElementById("22tmin").innerHTML = ctmin;
document.getElementById("33tmax").innerHTML = dtmax;
document.getElementById("33tmin").innerHTML = dtmin;
document.getElementById("44tmax").innerHTML = etmax;
document.getElementById("44tmin").innerHTML = etmin;
document.getElementsByTagName("canvas")[0].className = response.currently.icon;
document.getElementsByTagName("canvas")[1].className = response.daily.data[0].icon;
document.getElementsByTagName("canvas")[2].className = response.daily.data[1].icon;
document.getElementsByTagName("canvas")[3].className = response.daily.data[2].icon;
document.getElementsByTagName("canvas")[4].className = response.daily.data[3].icon;
document.getElementsByTagName("canvas")[5].className = response.daily.data[4].icon;
var d = new Date();
var weekday = new Array(7);
weekday[0] = "SUN";
weekday[1] = "MON";
weekday[2] = "TUE";
weekday[3] = "WED";
weekday[4] = "THU";
weekday[5] = "FRI";
weekday[6] = "SAT";
var n = d.getDay();
da = n;
document.getElementById("1da").innerHTML = weekday[da];
n = d.getDay() + 1;
if (n > 6) {n = 0};
db = n;
document.getElementById("1db").innerHTML = weekday[db];
n = n + 1;
if (n > 6) {n = 0};
dc = n;
document.getElementById("1dc").innerHTML = weekday[dc];
n = n + 1;
if (n > 6) {n = 0};
dd = n;
document.getElementById("1dd").innerHTML = weekday[dd];
n = n + 1;
if (n > 6) {n = 0};
de = n;
document.getElementById("1de").innerHTML = weekday[de];
}
}
</SCRIPT>
</HEAD>
<BODY>
<div class="content-top">
<div class="current">
<div class="left">
<h6>CURRENTLY</h6>
<p id="cctemp"></p>
</div>
<div class="right">
<canvas width="80" height="80" class="rain"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1da"></h6>
<p><span id="00tmax"></span> <span class="h" id="00tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="snow"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1db"></h6>
<p><span id="11tmax"></span> <span class="h" id="11tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="sleet"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dc"></h6>
<p><span id="22tmax"></span> <span class="h" id="22tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="partly-cloudy-day"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dd"></h6>
<p><span id="33tmax"></span> <span class="h" id="33tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-day" ></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1de"></h6>
<p><span id="44tmax"></span> <span class="h" id="44tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-night" ></canvas>
</div>
</div>
<div class="clear"></div>
</div>
<script>
var icons = new Skycons({
"color": "#888"
}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for (i = list.length; i--;) {
var weatherType = list[i],
elements = document.getElementsByClassName(weatherType);
for (e = elements.length; e--;) {
icons.set(elements[e], weatherType);
}
}
icons.play();
</script>
</BODY>
</HTML><!DOCTYPE html>
<HTML>
<HEAD>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js"></script>
<TITLE></TITLE>
<STYLE>
a{text-decoration:none;}
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
padding:0;
margin:0;
font-family: 'Raleway', Helvetica, Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
p{
margin:0;
}
.content-top {
background: white;
padding: 20px;
color: #0C1147;
}
.current{
float:left;
width:18%;
text-align:left;
padding: .75%;
}
.day{
float:left;
width:14%;
text-align:left;
border-left:2px solid #0C1147;
padding: .75%;
}
.left{
float:left;
width:50%;
text-align:center;
margin: 0;
}
.right{
float:right;
width:50%;
text-align:center;
margin: 0;
}
h6{
font-size: 25px;
margin-bottom: 15px
}
.current p{
font-size: 25pt;
}
p{
font-size: 20pt;
font-weight: bold;
color: #0C1147;
}
.h {
color: LightGray;
}
</STYLE>
<script> /* Scotts Javascript */
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/01c70afc31b9faa06047d80cf607b364/45.164393,-84.930449?exclude=minutely,hourly,flags,alerts?units=us", true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
ctemp = Math.round(response.currently.temperature) + '°';
atmax = Math.round(response.daily.data[0].temperatureMax) + '°';
atmin = Math.round(response.daily.data[0].temperatureMin) + '°';
btmax = Math.round(response.daily.data[1].temperatureMax) + '°';
btmin = Math.round(response.daily.data[1].temperatureMin) + '°';
ctmax = Math.round(response.daily.data[2].temperatureMax) + '°';
ctmin = Math.round(response.daily.data[2].temperatureMin) + '°';
dtmax = Math.round(response.daily.data[3].temperatureMax) + '°';
dtmin = Math.round(response.daily.data[3].temperatureMin) + '°';
etmax = Math.round(response.daily.data[4].temperatureMax) + '°';
etmin = Math.round(response.daily.data[4].temperatureMin) + '°';
document.getElementById("cctemp").innerHTML = ctemp;
document.getElementById("00tmax").innerHTML = atmax;
document.getElementById("00tmin").innerHTML = atmin;
document.getElementById("11tmax").innerHTML = btmax;
document.getElementById("11tmin").innerHTML = btmin;
document.getElementById("22tmax").innerHTML = ctmax;
document.getElementById("22tmin").innerHTML = ctmin;
document.getElementById("33tmax").innerHTML = dtmax;
document.getElementById("33tmin").innerHTML = dtmin;
document.getElementById("44tmax").innerHTML = etmax;
document.getElementById("44tmin").innerHTML = etmin;
document.getElementsByTagName("canvas")[0].className = response.currently.icon;
document.getElementsByTagName("canvas")[1].className = response.daily.data[0].icon;
document.getElementsByTagName("canvas")[2].className = response.daily.data[1].icon;
document.getElementsByTagName("canvas")[3].className = response.daily.data[2].icon;
document.getElementsByTagName("canvas")[4].className = response.daily.data[3].icon;
document.getElementsByTagName("canvas")[5].className = response.daily.data[4].icon;
var d = new Date();
var weekday = new Array(7);
weekday[0] = "SUN";
weekday[1] = "MON";
weekday[2] = "TUE";
weekday[3] = "WED";
weekday[4] = "THU";
weekday[5] = "FRI";
weekday[6] = "SAT";
var n = d.getDay();
da = n;
document.getElementById("1da").innerHTML = weekday[da];
n = d.getDay() + 1;
if (n > 6) {n = 0};
db = n;
document.getElementById("1db").innerHTML = weekday[db];
n = n + 1;
if (n > 6) {n = 0};
dc = n;
document.getElementById("1dc").innerHTML = weekday[dc];
n = n + 1;
if (n > 6) {n = 0};
dd = n;
document.getElementById("1dd").innerHTML = weekday[dd];
n = n + 1;
if (n > 6) {n = 0};
de = n;
document.getElementById("1de").innerHTML = weekday[de];
}
}
</SCRIPT>
</HEAD>
<BODY>
<div class="content-top">
<div class="current">
<div class="left">
<h6>CURRENTLY</h6>
<p id="cctemp"></p>
</div>
<div class="right">
<canvas width="80" height="80" class="rain"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1da"></h6>
<p><span id="00tmax"></span> <span class="h" id="00tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="snow"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1db"></h6>
<p><span id="11tmax"></span> <span class="h" id="11tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="sleet"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dc"></h6>
<p><span id="22tmax"></span> <span class="h" id="22tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="partly-cloudy-day"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dd"></h6>
<p><span id="33tmax"></span> <span class="h" id="33tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-day" ></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1de"></h6>
<p><span id="44tmax"></span> <span class="h" id="44tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-night" ></canvas>
</div>
</div>
<div class="clear"></div>
</div>
<script>
var icons = new Skycons({
"color": "#888"
}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for (i = list.length; i--;) {
var weatherType = list[i],
elements = document.getElementsByClassName(weatherType);
for (e = elements.length; e--;) {
icons.set(elements[e], weatherType);
}
}
icons.play();
</script>
</BODY>
</HTML><!DOCTYPE html>
<HTML>
<HEAD>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js"></script>
<TITLE></TITLE>
<STYLE>
a{text-decoration:none;}
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
padding:0;
margin:0;
font-family: 'Raleway', Helvetica, Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
p{
margin:0;
}
.content-top {
background: white;
padding: 20px;
color: #0C1147;
}
.current{
float:left;
width:18%;
text-align:left;
padding: .75%;
}
.day{
float:left;
width:14%;
text-align:left;
border-left:2px solid #0C1147;
padding: .75%;
}
.left{
float:left;
width:50%;
text-align:center;
margin: 0;
}
.right{
float:right;
width:50%;
text-align:center;
margin: 0;
}
h6{
font-size: 25px;
margin-bottom: 15px
}
.current p{
font-size: 25pt;
}
p{
font-size: 20pt;
font-weight: bold;
color: #0C1147;
}
.h {
color: LightGray;
}
</STYLE>
<script> /* Scotts Javascript */
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/01c70afc31b9faa06047d80cf607b364/45.164393,-84.930449?exclude=minutely,hourly,flags,alerts?units=us", true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
ctemp = Math.round(response.currently.temperature) + '°';
atmax = Math.round(response.daily.data[0].temperatureMax) + '°';
atmin = Math.round(response.daily.data[0].temperatureMin) + '°';
btmax = Math.round(response.daily.data[1].temperatureMax) + '°';
btmin = Math.round(response.daily.data[1].temperatureMin) + '°';
ctmax = Math.round(response.daily.data[2].temperatureMax) + '°';
ctmin = Math.round(response.daily.data[2].temperatureMin) + '°';
dtmax = Math.round(response.daily.data[3].temperatureMax) + '°';
dtmin = Math.round(response.daily.data[3].temperatureMin) + '°';
etmax = Math.round(response.daily.data[4].temperatureMax) + '°';
etmin = Math.round(response.daily.data[4].temperatureMin) + '°';
document.getElementById("cctemp").innerHTML = ctemp;
document.getElementById("00tmax").innerHTML = atmax;
document.getElementById("00tmin").innerHTML = atmin;
document.getElementById("11tmax").innerHTML = btmax;
document.getElementById("11tmin").innerHTML = btmin;
document.getElementById("22tmax").innerHTML = ctmax;
document.getElementById("22tmin").innerHTML = ctmin;
document.getElementById("33tmax").innerHTML = dtmax;
document.getElementById("33tmin").innerHTML = dtmin;
document.getElementById("44tmax").innerHTML = etmax;
document.getElementById("44tmin").innerHTML = etmin;
document.getElementsByTagName("canvas")[0].className = response.currently.icon;
document.getElementsByTagName("canvas")[1].className = response.daily.data[0].icon;
document.getElementsByTagName("canvas")[2].className = response.daily.data[1].icon;
document.getElementsByTagName("canvas")[3].className = response.daily.data[2].icon;
document.getElementsByTagName("canvas")[4].className = response.daily.data[3].icon;
document.getElementsByTagName("canvas")[5].className = response.daily.data[4].icon;
var d = new Date();
var weekday = new Array(7);
weekday[0] = "SUN";
weekday[1] = "MON";
weekday[2] = "TUE";
weekday[3] = "WED";
weekday[4] = "THU";
weekday[5] = "FRI";
weekday[6] = "SAT";
var n = d.getDay();
da = n;
document.getElementById("1da").innerHTML = weekday[da];
n = d.getDay() + 1;
if (n > 6) {n = 0};
db = n;
document.getElementById("1db").innerHTML = weekday[db];
n = n + 1;
if (n > 6) {n = 0};
dc = n;
document.getElementById("1dc").innerHTML = weekday[dc];
n = n + 1;
if (n > 6) {n = 0};
dd = n;
document.getElementById("1dd").innerHTML = weekday[dd];
n = n + 1;
if (n > 6) {n = 0};
de = n;
document.getElementById("1de").innerHTML = weekday[de];
}
}
</SCRIPT>
</HEAD>
<BODY>
<div class="content-top">
<div class="current">
<div class="left">
<h6>CURRENTLY</h6>
<p id="cctemp"></p>
</div>
<div class="right">
<canvas width="80" height="80" class="rain"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1da"></h6>
<p><span id="00tmax"></span> <span class="h" id="00tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="snow"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1db"></h6>
<p><span id="11tmax"></span> <span class="h" id="11tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="sleet"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dc"></h6>
<p><span id="22tmax"></span> <span class="h" id="22tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="partly-cloudy-day"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dd"></h6>
<p><span id="33tmax"></span> <span class="h" id="33tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-day" ></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1de"></h6>
<p><span id="44tmax"></span> <span class="h" id="44tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-night" ></canvas>
</div>
</div>
<div class="clear"></div>
</div>
<script>
var icons = new Skycons({
"color": "#888"
}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for (i = list.length; i--;) {
var weatherType = list[i],
elements = document.getElementsByClassName(weatherType);
for (e = elements.length; e--;) {
icons.set(elements[e], weatherType);
}
}
icons.play();
</script>
</BODY>
</HTML>javascript html
javascript html
asked Jan 2 at 18:46
Scott PussehlScott Pussehl
217
asked Jan 2 at 18:46
Scott PussehlScott Pussehl
217
asked Jan 2 at 18:46
Scott PussehlScott Pussehl
217
asked Jan 2 at 18:46
Scott PussehlScott Pussehl
217
asked Jan 2 at 18:46
Scott PussehlScott Pussehl
217
217
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011596%2fskycons-will-not-work-when-auto-fetching-data-from-darksky-api%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011596%2fskycons-will-not-work-when-auto-fetching-data-from-darksky-api%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
