/* __ __ | \/ | | \ / |_ _ ___ | |\/| | | | |/ _ \ | | | | |_| | __/ |_| |_|\__,_|\___| ------------------- 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 () { // skip the foreplay and get straight to hours... // ...since we don't need the Date() anywhere else in the function let currentHour = new Date().getHours(), getDaytime = () => { // if it's morning... if (currentHour < 12) { return 'morning' } // ...if it's evening... else if (currentHour >= 18) { return 'evening' } // ...and in all other cases... // ...which happens to be afternoon else { return 'afternoon' }; // no need to make code more specific than it needs to be // if you can get the desired result without writing more... // ...don't write more }; // ideally, one would want to have similar styles of comparison... // ...within the same `if-else` structure (< and >, or, <= and >=)... // ...but it makes more sense that way // separate function for setting an element's `innerHTML` // uses template literals and ${}-extrapolation // further reading: // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals setHTMLContent(".greeting", `Good ${getDaytime()}`); }; function setRandomBackground () { let backgroundClasses = [ 'mountain', 'sunrise', 'butterfly', 'leaves', 'city', 'sea', 'space', 'ice', 'house', 'river', 'town', 'desert', 'canyon', 'rose', 'forest', 'lightbulb', 'clouds', 'dj', 'keyboard', 'table' ], currentBackgroundClass = pickFromArray(backgroundClasses); // adds a class from backgroundClasses to // 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; }