Commit 4db4ac55 authored by Zach Knox's avatar Zach Knox
Browse files

Closes #6, makes color CSS work

Someone still needs to make real colors for it though, it's all grays right now
parent a8218202
...@@ -27,9 +27,6 @@ ...@@ -27,9 +27,6 @@
<section class="mdl-layout__tab-panel" id="korea"> <section class="mdl-layout__tab-panel" id="korea">
<div class="page-content">{{> weather}}</div> <div class="page-content">{{> weather}}</div>
</section> </section>
<section class="mdl-layout__tab-panel" id="saudi">
<div class="page-content">{{> weather}}</div>
</section>
</div> </div>
{{> footer}} {{> footer}}
</main> </main>
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</div> </div>
{{/if}} {{/if}}
<div class="mdl-cell mdl-cell--12-col"> <div class="mdl-cell mdl-cell--12-col">
<div class="weather-card mdl-card mdl-shadow--4dp"> <div class="{{getColorStyle (roundNumber weatherData.data.currently.temperature)}} weather-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title"> <div class="mdl-card__title">
<h1 class="mdl-card__title-text">Current Conditions<br /></h1> <h1 class="mdl-card__title-text">Current Conditions<br /></h1>
</div> </div>
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
</div> </div>
{{#each dayWeather in weatherData.data.daily.data}} {{#each dayWeather in weatherData.data.daily.data}}
<div class="mdl-cell mdl-cell--4-col"> <div class="mdl-cell mdl-cell--4-col">
<div class="{{getColorStyle roundNumber dayWeather.temperatureMax}} out-of-focus-card mdl-card mdl-shadow--4dp"> <div class="{{getColorStyle (roundNumber dayWeather.temperatureMax)}} weather-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title"> <div class="mdl-card__title">
<h1 class="mdl-card__title-text">{{getDayNameFromTime dayWeather.time}}<br /></h1> <h1 class="mdl-card__title-text">{{getDayNameFromTime dayWeather.time}}<br /></h1>
</div> </div>
......
...@@ -101,39 +101,42 @@ Template.weather.helpers({ ...@@ -101,39 +101,42 @@ Template.weather.helpers({
return days[ given.getDay() ]; return days[ given.getDay() ];
}, },
getColorStyle: function(temp) { getColorStyle: function(temp) {
var returning = "degree";
if(temp < 10) { if(temp < 10) {
return returning + "0"; return "degree0";
} }
else if(temp >= 10 && temp < 20) { else if(temp >= 10 && temp < 20) {
return returning + "10"; return "degree10";
} }
else if(temp >= 20 && temp < 30) { else if(temp >= 20 && temp < 30) {
return returning + "20"; return "degree20";
} }
else if(temp >= 30 && temp < 40) { else if(temp >= 30 && temp < 40) {
return returning + "30"; return "degree30";
} }
else if(temp >= 40 && temp < 50) { else if(temp >= 40 && temp < 50) {
return returning + "40"; return "degree40";
} }
else if(temp >= 50 && temp < 60) { else if(temp >= 50 && temp < 60) {
return returning + "50"; return "degree50";
} }
else if(temp >= 60 && temp < 70) { else if(temp >= 60 && temp < 70) {
return returning + "60"; return "degree60";
} }
else if(temp >= 70 && temp < 80) { else if(temp >= 70 && temp < 80) {
return returning + "70"; return "degree70";
} }
else if(temp >= 80 && temp < 90) { else if(temp >= 80 && temp < 90) {
return returning + "80"; return "degree80";
} }
else if(temp >= 90 && temp < 100) { else if(temp >= 90 && temp < 100) {
return returning + "90"; return "degree90";
} }
else if(temp >= 100) { else if(temp >= 100) {
return returning + "100"; return "degree100";
}
else {
Console.log(temp);
return temp;
} }
} }
}); });
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment