extern/the-glorious-startpage
1
0
Fork 1
mirror of https://github.com/manilarome/the-glorious-startpage.git synced 2024-11-23 16:13:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

right dashboard greeter message

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/greeter-date-message.css Normal file
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;
}

1
css/style.css
View File

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

5
index.html
View File

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

47
js/greeter-date-message.js Normal file
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()] + ".";