holm/the-glorious-startpage
1
0
Fork 0
forked from extern/the-glorious-startpage
Code Issues Pull Requests Packages Projects Releases Wiki Activity

weather forecast replace date with day name

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-11 11:39:01 +08:00
parent 0cf31a3548
commit af7c6bca0f
4 changed files with 39 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/weather-screen.css
View File

@ -186,6 +186,11 @@
text-align: center;
}
.weatherForecastDayDateName {
font-weight: 900;
font-size: 14pt;
}
/*Right side*/
.weatherForecastDayDate {
clear:both;
@ -235,6 +240,11 @@
clear: none;
}
.weatherForecastDayDateName {
font-weight: 400;
font-size: 12pt;
}
/*Center*/
.weatherForecastDayDetails {
display: inline-block;

8
index.html
View File

@ -220,6 +220,10 @@
<!-- Below is the structure of a DIV that will be generated in js/weather-screen.js -->
<!--
<div class='weatherForecastDay'>
<div class='weatherForecastDayDate'>
<div class='weatherForecastDayDateName'></div>
<div class='weatherForecastDayDateHour'></div>
</div>
<div class='weatherForecastDayIconContainer'>
<div class='weatherForecastDayIcon'></div>
</div>
@ -227,10 +231,6 @@
<div class='weatherForecastDayDetailsTemperature'></div>
<div class='weatherForecastDayDetailsDescription'></div>
</div>
<div class='weatherForecastDayDate'>
<div class='weatherForecastDayDateHour'></div>
<div class='weatherForecastDayDateDate'></div>
</div>
</div>
-->
</div>

16
js/greeter-date-message.js
View File

@ -4,11 +4,7 @@ class GreeterDateMessage {
this._greeterMessage = document.querySelector('#greeterMessage');
this._dateMessage = document.querySelector('#dateMessage');
this._updateGreeterDateMessage();
}
_getMonths = () => {
const monthsArr = [
this._monthsArr = [
'January',
'February',
'March',
@ -22,11 +18,8 @@ class GreeterDateMessage {
'November',
'December'
];
return monthsArr;
}
_getDays = () => {
const _daysArr = [
this._daysArr = [
'Sunday',
'Monday',
'Tuesday',
@ -35,7 +28,8 @@ class GreeterDateMessage {
'Friday',
'Saturday'
];
return _daysArr;
this._updateGreeterDateMessage();
}
_getDayOrdinal = (day) => {
@ -61,7 +55,7 @@ class GreeterDateMessage {
this._greeterMessage.innerHTML = `Good<br>${greeterSuffix}!`;
this._dateMessage.innerHTML = `Today's the ${this._getDayOrdinal(date.getDate())} of ` +
`${this._getMonths()[date.getMonth()]}, and it's ${this._getDays()[date.getDay()]}.`;
`${this._monthsArr[date.getMonth()]}, and it's ${this._daysArr[date.getDay()]}.`;
}
}

26
js/weather-screen.js
View File

@ -3,6 +3,15 @@ class WeatherScreen {
constructor() {
this._weatherScreenVisibility = false;
this._tempSymbol = '°C';
this._daysArr = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
];
this._weatherScreen = document.querySelector('#weatherScreen');
this._weatherIcon = document.querySelector('#weatherTodayIcon');
@ -78,22 +87,23 @@ class WeatherScreen {
this._updateWeatherDockButton(icon);
}
_createForecastBody = (fIcon, forecastTemp, foreDescription, fHour, fDate) => {
_createForecastBody = (fIcon, forecastTemp, foreDescription, dayName, fHour) => {
// Generate forecast
this._forecastContainer.insertAdjacentHTML(
'beforeend',
`
<div class='weatherForecastDay'>
<div class='weatherForecastDayDate'>
<div class='weatherForecastDayDateName'>${dayName}</div>
<div class='weatherForecastDayDateHour'>${fHour}</div>
</div>
<div class='weatherForecastDayIconContainer'>
<div class='weatherForecastDayIcon' style='background: url("assets/weather-icons/${fIcon}"); background-size: cover;'></div>
</div>
<div class='weatherForecastDayDetails'>
<div class='weatherForecastDayDetailsTemperature'>${forecastTemp}</div>
<div class='weatherForecastDayDetailsDescription'>${foreDescription}</div>
</div><div class='weatherForecastDayDate'>
<div class='weatherForecastDayDateHour'>${fHour}</div>
<div class='weatherForecastDayDateDate'>${fDate}</div>
</div>
</div>
`
@ -190,10 +200,14 @@ class WeatherScreen {
const minTemp = Math.floor(minimumTemp);
const maxTemp = Math.floor(maximumTemp);
const forecastTemp = minTemp + ' ~ ' + maxTemp + this._tempSymbol;
const fHour = dateTime.substr(dateTime.indexOf(' ') + 1).slice(0, -3);;
const fHour = dateTime.substr(dateTime.indexOf(' ') + 1).slice(0, -3);
const fDate = dateTime.substr(0, dateTime.indexOf(' '));
this._createForecastBody(fIcon, forecastTemp, foreDescription, fHour, fDate);
// Get day name fDate string and this._daysArr array
const d = new Date(fDate);
var dayName = this._daysArr[d.getDay()];
this._createForecastBody(fIcon, forecastTemp, foreDescription, dayName, fHour);
}
}