From af7c6bca0fd1083d7fab61310289e695f405e170 Mon Sep 17 00:00:00 2001
From: Gerome Matilla <gerome.matilla07@gmail.com>
Date: Thu, 11 Jun 2020 11:39:01 +0800
Subject: [PATCH] weather forecast replace date with day name

---
 css/weather-screen.css     | 10 ++++++++++
 index.html                 |  8 ++++----
 js/greeter-date-message.js | 16 +++++-----------
 js/weather-screen.js       | 26 ++++++++++++++++++++------
 4 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/css/weather-screen.css b/css/weather-screen.css
index d885344..3bbab1d 100644
--- a/css/weather-screen.css
+++ b/css/weather-screen.css
@@ -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;
diff --git a/index.html b/index.html
index 1ea5359..83037c4 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/js/greeter-date-message.js b/js/greeter-date-message.js
index fa1a494..363cc3f 100644
--- a/js/greeter-date-message.js
+++ b/js/greeter-date-message.js
@@ -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()]}.`;
 	}
 
 }
\ No newline at end of file
diff --git a/js/weather-screen.js b/js/weather-screen.js
index 1eb0e90..dc88161 100644
--- a/js/weather-screen.js
+++ b/js/weather-screen.js
@@ -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);
 		}
 	}