mirror of https://github.com/mue/mue.git
276 lines
9.3 KiB
JavaScript
276 lines
9.3 KiB
JavaScript
/*
|
||
__ __
|
||
| \/ |
|
||
| \ / |_ _ ___
|
||
| |\/| | | | |/ _ \
|
||
| | | | |_| | __/
|
||
|_| |_|\__,_|\___|
|
||
-------------------
|
||
Copyright 2018 Dave R (ohlookitsderpy)
|
||
Licensed under MIT
|
||
Special thanks to contributors! <3
|
||
GitHub: https://github.com/ohlookitsderpy/Mue
|
||
*/
|
||
|
||
// start a separate function for each of the things that we need to do
|
||
|
||
// function construction is part of making the code clearer...
|
||
// ...i.e., easier to read and to debug
|
||
|
||
// the clearer the code, the easier it would be:
|
||
// 1. for the author to return to its development later,
|
||
// 2. for coders unfamiliar with it to understand it...
|
||
// 2.1. ...and help improve it,
|
||
|
||
// the clearer the code, the better it is perceived...
|
||
// ...which encourages others in open-source environment...
|
||
// ...to maintain, improve and copy it
|
||
|
||
// further reading:
|
||
// https://eloquentjavascript.net/05_higher_order.html
|
||
|
||
function setDaytimeMessage () {
|
||
if (window.browser.language === 'it' || window.browser.language === 'it-ch') itaMessageSet();
|
||
if (window.browser.language === 'de') nlMessageSet();
|
||
else engMessageSet();
|
||
};
|
||
|
||
function setRandomBackground () {
|
||
|
||
let backgroundClasses = [
|
||
|
||
'mountain',
|
||
'sunrise',
|
||
'butterfly',
|
||
'leaves',
|
||
'river',
|
||
'sea',
|
||
'space',
|
||
'ice',
|
||
'waterfall',
|
||
'river',
|
||
'sunset',
|
||
'desert',
|
||
'canyon',
|
||
'rose',
|
||
'forest',
|
||
'cherry',
|
||
'clouds',
|
||
'autumn',
|
||
'winter',
|
||
'flowers',
|
||
'sunrise',
|
||
'rocks',
|
||
'trees',
|
||
'mountains',
|
||
'beach'
|
||
|
||
],
|
||
currentBackgroundClass = pickFromArray(backgroundClasses);
|
||
|
||
// adds a class from backgroundClasses to <body>
|
||
|
||
// using classes to define element attributes is often safer...
|
||
// ...than setting the attributes straight to element's `style`
|
||
|
||
document.body.classList.add(currentBackgroundClass);
|
||
|
||
};
|
||
|
||
function setRandomQuote () {
|
||
|
||
// each quote is an object within the array
|
||
|
||
// `text` and `author` go into different elements...
|
||
// ...each of which has its own styling
|
||
|
||
// also, semantic separation is important for clarity of code
|
||
|
||
// big-enough objects — such as each of the quotes — may be...
|
||
// ...separated by a new line each for clarity
|
||
|
||
let quotes = [
|
||
|
||
{ text: 'Time goes on. So whatever you’re going to do, do it. Do it now. Don’t wait.', author: 'Robert De Niro' },
|
||
{ text: 'All our dreams can come true, if we have the courage to pursue them.', author: 'Walt Disney' },
|
||
{ text: 'It does not matter how slowly you go as long as you do not stop.', author: 'Confucius'},
|
||
{ text: 'Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine.', author: 'Roy T. Bennett'},
|
||
{ text: 'If you believe it will work out, you’ll see opportunities. If you believe it won’t, you will see obstacles', author: 'Wayne Dyer'},
|
||
{ text: 'Everything you’ve ever wanted is on the other side of fear.', author: 'George Addair'},
|
||
{ text: 'Success is not final, failure is not fatal: it is the courage to continue that counts.', author: 'Winston Churchill'},
|
||
{ text: 'There is only one thing that makes a dream impossible to achieve: the fear of failure.', author: 'Paulo Coelho'},
|
||
{ text: 'Your true success in life begins only when you make the commitment to become excellent at what you do.', author: 'Brian Tracy'},
|
||
{ text: 'Believe in yourself, take on your challenges, dig deep within yourself to conquer fears. Never let anyone bring you down. You got to keep going.', author: 'Chantal Sutherland'},
|
||
{ text: 'Too many of us are not living our dreams because we are living our fears.', author: 'Les Brown'},
|
||
{ text: 'Hard times don’t create heroes. It is during the hard times when the ‘hero’ within us is revealed.', author: 'Bob Riley'},
|
||
{ text: 'If you can tune into your purpose and really align with it, setting goals so that your vision is an expression of that purpose, then life flows much more easily.', author: 'Jack Canfield'},
|
||
{ text: 'Whatever the mind can conceive and believe, it can achieve.', author: 'Napoleon Hill'},
|
||
{ text: 'Don’t wish it were easier. Wish you were better.', author: 'Jim Rohn'},
|
||
{ text: 'A champion is defined not by their wins but by how they can recover when they fall.', author: 'Serena Williams'},
|
||
{ text: 'Motivation comes from working on things we care about.', author: 'Sheryl Sandberg'},
|
||
{ text: 'With the right kind of coaching and determination you can accomplish anything.', author: 'Reese Witherspoon'},
|
||
{ text: 'Some people look for a beautiful place. Others make a place beautiful.', author: 'Hazrat Inayat Khan'},
|
||
{ text: 'Life is like riding a bicycle. To keep your balance, you must keep moving.', author: 'Albert Einstein'}
|
||
],
|
||
quote = pickFromArray(quotes);
|
||
|
||
setHTMLContent('blockquote', quote.text);
|
||
setHTMLContent('cite', quote.author);
|
||
|
||
// little treats of visual alignment, for code beauty's sake
|
||
|
||
};
|
||
|
||
|
||
function setTime () {
|
||
|
||
// we need to save Date() here because we use...
|
||
// ...the same moment of time down the line
|
||
|
||
let date = new Date(),
|
||
|
||
// instead of performing separate operations for formatting...
|
||
// we store the time unit values already formatted
|
||
|
||
time = [
|
||
|
||
formatTimeUnit(date.getHours()),
|
||
formatTimeUnit(date.getMinutes()),
|
||
formatTimeUnit(date.getSeconds())
|
||
|
||
];
|
||
|
||
// joins all of the array elements into a string...
|
||
// ...using the ':' separator
|
||
|
||
// i.e. [16, 32, 03] -> "16:32:03"
|
||
|
||
setHTMLContent('time', time.join(':'));
|
||
|
||
};
|
||
|
||
function init () {
|
||
|
||
// initialize everything
|
||
|
||
// init() gets executed only when the page is fully loaded...
|
||
// ...which is good practice when dealing with page elements
|
||
|
||
// init() serves as a container for all the functions that we require...
|
||
// ...to work at the start of the page
|
||
|
||
setDaytimeMessage();
|
||
setRandomBackground();
|
||
setRandomQuote();
|
||
setTime();
|
||
|
||
// set interval to update time every second
|
||
|
||
// if you don't use milliseconds, updating more often...
|
||
// is wasting CPU resources
|
||
|
||
let timeInterval = setInterval(setTime, 1000);
|
||
|
||
// ideally, one would want to update only the time unit changed...
|
||
// ...i.e., only seconds if 16:02:32 became 16:02:33
|
||
|
||
// this would use even less resources for the same result...
|
||
// ...which is always the goal
|
||
|
||
};
|
||
|
||
// initialize on page load through a listener...
|
||
// ...which tracks a particular event and executes...
|
||
// ...the set function when the event happens
|
||
|
||
// 'DOMContentLoaded' is the event of 'all HTML has loaded'
|
||
|
||
// it allows to safely search for and modify HTML nodes
|
||
|
||
// if a node is searched for while the page hasn't loaded yet...
|
||
// ...you will not get the same result and may encounter an error...
|
||
// ...which will halt your code execution
|
||
|
||
document.addEventListener('DOMContentLoaded', init);
|
||
|
||
// UTILITY FUNCTIONS
|
||
|
||
// since JavaScript defines variables lazily [1], one can...
|
||
// ...semantically separate current and utility functions [2]
|
||
|
||
// here, utility functions are put to the bottom so they don't pollute...
|
||
// ...the workflow — i.e., the part of the code that does most of the work
|
||
|
||
// [1] lazily means it may already use variables and functions...
|
||
// ...defined later in the code
|
||
|
||
// [2] utility functions are those that help write better code...
|
||
// ...either by making it more concise, more expressive or both
|
||
|
||
// formatTimeUnit() is the kind of a pure utility functions
|
||
|
||
// its purpose is to perform a single action on a single object
|
||
|
||
// it makes the code look more concise while performing...
|
||
// ...with the same effectiveness
|
||
|
||
function formatTimeUnit (unit) { return unit < 10 ? '0' + unit : unit };
|
||
|
||
// setHTMLContent is the kind of function is referred to as a 'wrapper'
|
||
|
||
// its purpose is to make code look better aesthetically...
|
||
// ...while performing the same function as...
|
||
// ...its straightfoward-yet-ugly equivalent native function
|
||
|
||
function setHTMLContent (selector, content) { return document.querySelector(selector) .innerHTML = content };
|
||
|
||
function pickFromArray(array) { return array[Math.floor(Math.random() * (array.length - 1))] };
|
||
|
||
// Disable right click
|
||
|
||
document.oncontextmenu=RightMouseDown;
|
||
function RightMouseDown() { return false; }
|
||
|
||
//Language-Specific-Functions-----------------------------------------------------------------------------------
|
||
|
||
//English
|
||
|
||
function engMessageSet() {
|
||
|
||
let currentHour = new Date().getHours(),
|
||
|
||
getDaytime = () => {
|
||
|
||
if (currentHour < 12) return 'morning'; // if it's morning
|
||
else if (currentHour >= 18) return 'evening'; // if it's evening
|
||
else return 'afternoon'; // else, which happens to be afternoon
|
||
};
|
||
setHTMLContent(".greeting", `Good ${getDaytime()}`);
|
||
}
|
||
|
||
//Italian
|
||
|
||
function itaMessageSet() {
|
||
|
||
let currentHour = new Date().getHours(),
|
||
|
||
getDaytime = () => {
|
||
|
||
if (currentHour < 18) return 'giorno'; //In Italian there is just Buongiorno or Buonasera
|
||
else return 'asera'; //used 'asera' instead of 'sera' for avoiding creating a special case for it
|
||
};
|
||
setHTMLContent(".greeting", `Buon${getDaytime()}`);
|
||
}
|
||
|
||
// Dutch
|
||
function nlMessageSet() {
|
||
let hour = new Date().getHours(); // Get the current hour
|
||
let time = 'Goedemiddag'; // Set the default time string to "Good evening"
|
||
|
||
if (hour < 12) time = 'Goedemorgen'; // If it's before 12am, set the time string to "Good morning"
|
||
else if (hour > 18) time = 'Goedenavond'; // If it's after 6pm, set the time string to "Good afternoon"
|
||
else time = 'Goedemiddag'; // If It's unknown, set the time stirng to "Good evening"
|
||
|
||
setHTMLContent('.greeting', time); // Write the string contents to the HTML
|
||
}
|