//Global variables //the calendar images, arranged according to month. var pics = ["http://i63.tinypic.com/2w39f8h.jpg", "http://i63.tinypic.com/2ajuovl.jpg", "http://i68.tinypic.com/mhen49.jpg", "http://i64.tinypic.com/29m7om9.jpg", "http://i67.tinypic.com/1zv4w9x.jpg", "http://i67.tinypic.com/dbi73q.jpg", "http://i66.tinypic.com/34zipex.jpg", "http://i64.tinypic.com/5pg376.jpg", "http://i64.tinypic.com/9vcnld.jpg", "http://i63.tinypic.com/1977r6.jpg", "http://i64.tinypic.com/332qq9k.jpg", "http://i65.tinypic.com/2lkpfs4.jpg"]; //the month names. arranged accordingly. var mname = ["January","February","March","April","May","June","July","August","September","October","November","December"] var sel = 0;//for selecting images from pics[] var selmax = pics.length - 1;//max value of sel var g = 1;//for handling the greetings var bsel = 0; //for changing border color //end of Global Variables /*this is just to alert ⚠patience the first time the calendar-increment button is clicked. (Gave me quite a headache- getting this work...) STARTS HERE... */ //JQuery (of course) $(function () { /*selecting all the clickable descendants (butspace) of the calendar dropdown and displaying the info alert (only once)*/ $("#butspace").children().one("click",function clk(){ alert("If your internet connection is slow, it might take a few seconds for the calendar picture to load. \nPlease be patient."); /*Preventing the alert from displaying more than once*/ $("#butspace").children().off("click", clk); }); }); //ENDS HERE... //For the clock (obviously)-getting the datetime values and displaying them. function printTime() { var d = new Date(); var hours = d.getHours(); var mins = d.getMinutes(); var secs = d.getSeconds(); var year = d.getFullYear(); var month = d.getMonth(); var date = d.getDate(); var day = d.getDay(); var mill = d.getMilliseconds(); var format = " A.M."; //to change the format (AM or PM) to P.M. once it's past noon. format = (hours > 11)? " P.M." : format; //Converting 24-hour-format to 12-hour-format. Also to Change AM to PM, and vice-versa. if (hours > 12) { hours = hours - 12 ; } if (hours <= 9) { hours = 0+""+hours ; } //Formatting the output to look more digital (with an added zero [i.e. 04]), when the output is less than 2 digits (less than 10) mins = (mins <= 9)? 0+""+mins : mins; secs = (secs <= 9)? 0+""+secs : secs; date = (date <= 9)? 0+""+date : date; //Current day (converted from text representation [i.e. 7] to actual weekday [i.e. Saturday]) week = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; day = week[day]; //Current Month (converted from text representation [i.e. 12] to actual month [i.e. December]) months = ["January","February","March","April","May","June","July","August","September","October","November","December"]; month = months[month]; //To stop that pesky shaking caused by the millisecond mill= (mill <= 99)? 100: mill; //Displaying it all: document.getElementById("hour").innerHTML = hours+" : " ; document.getElementById("min").innerHTML = mins+" : " ; document.getElementById("sec").innerHTML = secs+" " ; document.getElementById("format").innerHTML = format ; document.getElementById("mill").innerHTML = "."+mill ; document.getElementById("day").innerHTML = "Today is "+day+", "+month+" "+date+" "+year+"."; } //Calling the printTime() function every second, to update the time. setInterval(printTime, 100); //For changing the cast (that button at the button of the program) to "click me" 20% of the time. Also changes the border color of the clock. function changelook() { var rand= (Math.floor(Math.random() *10)) if (rand >= 8) { document.getElementById("cast").innerHTML = "Click me!"; }else{ document.getElementById ("cast").innerHTML = "Created by Leigh E.O. ©"; }//if-else statement for selecting between the two possible contents of the button. var b_color = ["#00bfff", "#6495ed", "#0000ff", "#4b0082", "#8b008b", "#ff00ff", "#ff69b4", "#db7093", "#ffe4e1", "#faebd7", "#fdf5e6", "#f8f8ff", "#ffffff", "#dcdcdc", "#a9a9a9", "#696969", "#2f4f4f", "#808000", "#008000", "#7fff00", "#9acd32", "#eee8aa", "#ffff00", "#fd9ab9", "#ff8c00", "#ff7f50", "#ff6347", "#f08080", "#ff0000", "#b22222", "#8b0000", "#800000", "#a0522d", "#cd853f", "#d2b48c", "#ffebcd", "#e6e6fa", "#6495ed", "#00bfff", "#87cefa" ];//List of colors for the clock's border var border = document.getElementById ("clocky"); bsel = (bsel >= b_color.length)? 0 : bsel += 1 ; border.style.border = "5px solid " +b_color[bsel-1];//changing the color using "bsel" as a selector. } //for calling changenote() every second. setInterval(changelook, 1000); //Jquery function for handling the button's alert message. $(function() { var week = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; //function rando() for getting and processing all the variables needed to output greeting, randon-value(0-9), and the weekday. function rando(){ var rand = (Math.floor(Math.random() *10)); var d = new Date(); var hours = d.getHours(); var year = d.getFullYear(); var day = d.getDay(); var greeting; if (hours >=6 && hours <= 11) { greeting= "Good morning! \nHave a great day!"; }else if(hours >= 12 && hours <= 16) { greeting= "The weather's great isnt it? \nWhat a lovely afternoon!"; }else if(hours >= 17 && hours <= 18) { greeting= "Look at the sunset... Isn't it beautiful? \n\nGood evening!"; }else if (hours >= 19 && hours <= 21) { greeting= "It's late... Shouldn't you be getting ready for bed? \nI hope there's a full moon tonight!"; }else if(hours >= 22 || hours <= 4) { greeting= "Look at the time! You should be sleeping! \n\nWait, what am i saying? Programmers don't sleep! \n^_^"; }else { greeting= "You're awake already? \nGrab a cup of coffee!" } weekday = week[day]; //returning the function as an array return {r:rand, w:weekday, g:greeting} ; }//end of function rando() //running this function every ½second. setInterval(rando, 500); //for displaying the greeting in an alert, whenever the button is clicked. $('#cast').click(function(){ //choosing the array's function as a variable named output var output = rando() var say1 = ("Its "+output.w+".\nThere's no better day to code!"); var say2 = (output.g); //switching the greeting between say1 & say2 using the global "g" variable. var greeting; if (g <= 1){ greeting = say2; g++; }else{ greeting = say1; g = 1; } //the final product - alert. $('#cast').html(alert(greeting)); }); }); //Jquery function for handling Calendar. $(function() { $('#drop').click(function(){ var d = new Date(); var month = d.getMonth(); //setting current month to be automatically selected. sel= month; $('#det').html(mname[month]+" 2017"); $('img').attr('src', pics[month]); //sliding down the Calendar $('img').slideToggle(1000) , $("#drop").html("2017 Calendar"); //Sliding down calendar related stuff (the buttons, info text, and month name) $('#but, #but1, #det, #jerk').slideToggle(750); }); //decrementing the calendar when the button (<<-) is clicked $("#but").click(function(){ sel--; //preventing the calendar selector from going below zero. Also displaying helpful message if (<<-) is clicked when calendar has reached limit. if (sel <= -1){ sel = 0; $('#jerk').html('Jandecember only.'); }else{ $('#jerk').html(''); } $('img').attr('src', pics[sel]); $('#det').html(mname[sel]+" 2017"); }); //incrementing the calendar when the button (+>>) is clicked $("#but1").click(function(){ sel++; //preventing the calendar selector from going above the calendar's length. (counting from zero) Also displaying helpful message if (+>>) is clicked when calendar has reached limit. if (sel >= pics.length){ sel = selmax; $('#jerk').html('January to December only.') }else{ $('#jerk').html('') } $('img').attr('src', pics[sel]); $('#det').html(mname[sel]+" 2017"); }); }); //Mission Accomplished! //Created a calendar & digital clock... easy-peasy (NOT!)

Interactive Digital Date & Time ⏰ 2.0