forked from extern/the-glorious-startpage
right dashboard greeter message
This commit is contained in:
parent
94a422d852
commit
5762af432a
13
css/greeter-date-message.css
Normal file
13
css/greeter-date-message.css
Normal 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;
|
||||
}
|
@ -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 */
|
||||
|
@ -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
47
js/greeter-date-message.js
Normal 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()] + ".";
|
Loading…
Reference in New Issue
Block a user