displaying dynamic weather data on the homepage
This commit is contained in:
parent
9fb0846bc4
commit
af07065462
|
|
@ -27,10 +27,24 @@ h2 {
|
|||
font-family: Rubik-Light;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: Rubik-Bold;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: Rubik-Regular;
|
||||
}
|
||||
|
||||
.top_content,
|
||||
.weather_content,
|
||||
.tagline_content {
|
||||
width: 70%;
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.colorbox {
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
|
|
@ -41,13 +55,6 @@ p {
|
|||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.top_content, .tagline_content {
|
||||
width: 70%;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.cloud {
|
||||
position: relative;
|
||||
padding-bottom: 30px;
|
||||
|
|
@ -59,28 +66,80 @@ p {
|
|||
|
||||
.aqi_box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
left: 55%;
|
||||
text-align: right;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aqi_box h1 {
|
||||
font-size: 10em;
|
||||
font-size: 15em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.aqi_box h2 {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* weather styling */
|
||||
.weather_wrap {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.weather_box {
|
||||
border: solid 2px;
|
||||
border-radius: 20px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.weather_content {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
grid-column-gap: 10px;
|
||||
}
|
||||
|
||||
.weather_icon {
|
||||
width: 25%;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.weather_icon img {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.weather_text {
|
||||
width: 60%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.weather_text h3,
|
||||
.weather_text p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.tagline_content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* responsiv */
|
||||
@media screen and (max-width: 700px) {
|
||||
@media screen and (max-width: 1100px) {
|
||||
.top_content,
|
||||
.tagline_content,
|
||||
.weather_content {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
|
@ -90,10 +149,31 @@ p {
|
|||
.title {
|
||||
padding: 30px 0 0 0;
|
||||
}
|
||||
.top_content, .tagline_content {
|
||||
width: 90%;
|
||||
.aqi_box {
|
||||
width: 85%;
|
||||
top: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
.aqi_box h1 {
|
||||
font-size: 7em;
|
||||
font-size: 6em;
|
||||
}
|
||||
.aqi_box h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.weather_content {
|
||||
grid-template-columns: auto auto;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
.weather_icon {
|
||||
padding: 5px;
|
||||
}
|
||||
.weather_icon img {
|
||||
width: 100%;
|
||||
}
|
||||
.weather_text {
|
||||
left: 32%;
|
||||
}
|
||||
.weather_text h3 {
|
||||
font-size: 1.2;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<p>Last updated: <span id="timestamp"></span></p>
|
||||
</div>
|
||||
<div class="cloud">
|
||||
<img src="/img/cloud.png" alt="cloud" id="cloud">
|
||||
<img src="/img/cloud.png" alt="cloud" class="col_filter">
|
||||
<div class="aqi_box">
|
||||
<h1 id="aqiValue"></h1>
|
||||
<h2 id="aqiCategory"></h2>
|
||||
|
|
@ -26,6 +26,46 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weather_wrap">
|
||||
<div class="weather_content">
|
||||
<div class="weather_box col_border">
|
||||
<div class="weather_icon">
|
||||
<img src="/img/icon/000.png" alt="weather_icon" class="col_filter" id="weather_icon">
|
||||
</div>
|
||||
<div class="weather_text">
|
||||
<h3 class="col_font"><span id="temperature"></span><span> °C</span></h3>
|
||||
<p id="weather_name"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weather_box col_border">
|
||||
<div class="weather_icon">
|
||||
<img src="/img/icon/wind.png" alt="wind_icon" class="col_filter">
|
||||
</div>
|
||||
<div class="weather_text">
|
||||
<h3 class="col_font">Wind</h3>
|
||||
<p><span id="wind_speed"></span><span> km/h</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weather_box col_border">
|
||||
<div class="weather_icon">
|
||||
<img src="/img/icon/humidity.png" alt="humidity_icon" class="col_filter">
|
||||
</div>
|
||||
<div class="weather_text">
|
||||
<h3 class="col_font">Humidity</h3>
|
||||
<p><span id="humidity"></span><span> %</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weather_box col_border">
|
||||
<div class="weather_icon">
|
||||
<img src="/img/icon/pressure.png" alt="pressure_icon" class="col_filter">
|
||||
</div>
|
||||
<div class="weather_text">
|
||||
<h3 class="col_font">Pressure</h3>
|
||||
<p><span id="pressure"></span><span> mbar</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tagline_wrap">
|
||||
<div class="tagline_content">
|
||||
<h1>More is coming soon here!</h1>
|
||||
|
|
|
|||
|
|
@ -29,13 +29,14 @@ var colorConfig =
|
|||
"invert(31%) sepia(8%) saturate(2659%) hue-rotate(268deg) brightness(91%) contrast(88%)"]
|
||||
}
|
||||
|
||||
|
||||
function startInterval() {
|
||||
refreshAqiValues();
|
||||
setInterval("refreshAqiValues();",60000);
|
||||
}
|
||||
|
||||
|
||||
// wrap for setAqiValues
|
||||
// wrap for interval
|
||||
function refreshAqiValues() {
|
||||
var req = new XMLHttpRequest();
|
||||
req.responseType = 'json';
|
||||
|
|
@ -47,7 +48,8 @@ function refreshAqiValues() {
|
|||
var aqiValue = responseAqi['aqi_value'];
|
||||
var aqiCategory = responseAqi['aqi_category'];
|
||||
setAqiValues(timestamp,aqiValue,aqiCategory);
|
||||
setAqiColors(aqiCategory)
|
||||
setAqiColors(aqiCategory);
|
||||
setWeatherDetails(responseAqi);
|
||||
};
|
||||
req.send();
|
||||
}
|
||||
|
|
@ -65,13 +67,49 @@ function setAqiColors(aqiCategory) {
|
|||
var colMain = colorConfig[aqiCategory][0];
|
||||
var colSecond = colorConfig[aqiCategory][1];
|
||||
var colFilter = colorConfig[aqiCategory][2];
|
||||
// apply main col
|
||||
// apply topbox col
|
||||
document.getElementById('colorbox').style.backgroundColor = colMain;
|
||||
// apply border col
|
||||
var colBorder = document.getElementsByClassName('col_border');
|
||||
for (var i = 0; i < colBorder.length; i++) {
|
||||
colBorder[i].style.borderColor = colMain;
|
||||
};
|
||||
// apply light background change
|
||||
var lightBg = document.getElementsByClassName('light_background');
|
||||
for(var i = 0; i < lightBg.length; i++) {
|
||||
for (var i = 0; i < lightBg.length; i++) {
|
||||
lightBg[i].style.backgroundColor = colSecond;
|
||||
};
|
||||
// apply cloud
|
||||
document.getElementById('cloud').style.filter = colFilter;
|
||||
// apply color filter
|
||||
var colFilterElements = document.getElementsByClassName('col_filter');
|
||||
for (var i = 0; i < colFilterElements.length; i++) {
|
||||
colFilterElements[i].style.filter = colFilter;
|
||||
};
|
||||
// apply font color
|
||||
var colFontElements = document.getElementsByClassName('col_font');
|
||||
for (var i = 0; i < colFontElements.length; i++) {
|
||||
colFontElements[i].style.color = colMain;
|
||||
};
|
||||
}
|
||||
|
||||
function setWeatherDetails(responseAqi) {
|
||||
// parse response
|
||||
var weatherIcon = responseAqi['weather_icon'];
|
||||
var weatherName = responseAqi['weather_name'];
|
||||
var temperature = Math.round(responseAqi['temperature'] * 10) / 10
|
||||
var windSpeed = responseAqi['wind_speed'];
|
||||
var humidity = Math.round(responseAqi['humidity']);
|
||||
var pressure = Math.round(responseAqi['pressure']);
|
||||
// weather icon
|
||||
weatherIconSrc = '/img/icon/' + weatherIcon + '.png';
|
||||
document.getElementById('weather_icon').src = weatherIconSrc;
|
||||
// weather name
|
||||
document.getElementById('weather_name').innerHTML = weatherName;
|
||||
// temperature
|
||||
document.getElementById('temperature').innerHTML = temperature;
|
||||
// wind speed
|
||||
document.getElementById('wind_speed').innerHTML = windSpeed;
|
||||
// humidity
|
||||
document.getElementById('humidity').innerHTML = humidity;
|
||||
// pressure
|
||||
document.getElementById('pressure').innerHTML = pressure;
|
||||
}
|
||||
Loading…
Reference in New Issue