right dashboard greeter message

This commit is contained in:
Gerome Matilla 2020-06-04 10:45:26 +08:00
parent 94a422d852
commit 5762af432a
4 changed files with 65 additions and 1 deletions

View File

@ -0,0 +1,13 @@
#greeterMessage {
color: var(--base-color);
font-size: 32pt;
font-family: roboto-light;
margin: 5px;
}
#dateMessage {
color: #f2f2f2;
font-size: 12pt;
font-family: roboto;
margin: 5px;
}

View File

@ -10,6 +10,7 @@
@import url('profile-image.css'); @import url('profile-image.css');
@import url('search-box.css'); @import url('search-box.css');
@import url('dashboard.css'); @import url('dashboard.css');
@import url('greeter-date-message.css');
:root { :root {
/* Colors */ /* Colors */

View File

@ -57,7 +57,9 @@
<div class="dashboard" id="rightDashboard"> <div class="dashboard" id="rightDashboard">
<div class="rightDashboardBody"> <div class="rightDashboardBody">
<h2>gagoka</h2> <div id="greeterMessage"></div>
<div id="dateMessage"></div>
</div> </div>
</div> </div>
<div class="dashboardOverlay" id="dashboardOverlay"></div> <div class="dashboardOverlay" id="dashboardOverlay"></div>
@ -70,5 +72,6 @@
<script src="js/animate-profile-image.js"></script> <script src="js/animate-profile-image.js"></script>
<script src="js/show-search-box.js"></script> <script src="js/show-search-box.js"></script>
<script src="js/animate-dashboard.js"></script> <script src="js/animate-dashboard.js"></script>
<script src="js/greeter-date-message.js"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,47 @@
var greeterMessage = document.getElementById("greeterMessage");
var dateMessage = document.getElementById("dateMessage");
var date = new Date();
var hour = date.getHours();
var greeterSuffix = "";
if (hour >= 6 && hour < 12) {
greeterSuffix = "Morning";
} else if (hour >= 12 && hour < 18) {
greeterSuffix = "Afternoon";
} else {
greeterSuffix = "Evening";
}
const monthsArr = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
const daysArr = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
]
function getDayOrdinal(day) {
return day + (day > 0 ? ['th', 'st', 'nd', 'rd'][(day > 3 && day < 21) || day % 10 > 3 ? 0 : day % 10] : '');
}
greeterMessage.innerHTML = "Good" + "<br>" + greeterSuffix + "!";
dateMessage.innerHTML = "Today is the " + getDayOrdinal(date.getDate()) +
" of " + monthsArr[date.getMonth()] + ", and it's " + daysArr[date.getDay()] + ".";