JavaScript Out of Office Script
Hello again. I have completed my very first functional JavaScript program. Even though this program is simple in its approach, it is functional and will display anywhere you want, whether or not you are in your office.
I have created this script to change the color of the text to green when you are in the office, and to red when you are not. This could be modified so that it changes the color of a specific division to your color of choice, or not to change the background color at all.
The appropriate message and color is displayed depending on your office hours. The following office hours were used as a guide:
| Monday + Wednesday: | 3:30pm-5:00pm |
| Tuesday + Thursday: | 2:00pm-4:00pm |
| Friday: | 1:00pm-4pm |
| Saturday + Sunday: | Out of the office |
Here is the code in action, it will display only a simple message and will display the message and color inside of a H1 tag , the message will be appropriately displayed whether I am in my offce or not regarding the hours above... Please remember these hours from above are NOT my office hours, they are fictitious.
Where am I?
---------------------------------------------------------------
---------------------------------------------------------------
Download the code as a zipped file: JavaScript Office Hours Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | <script language = "JavaScript" type = "text/javascript"> <!-- var hours; //holds the determined hour of the day var minutes; //is the minutes var dow; //holds the day of the week var region; //holds the region of the day var outcome; //holds the outcome for the region var Now; //uses the date constructor to create a date object var openTime; //holds the time I will be in the office next var backgroundColor; //holds our background color var message; //holds our message var nextTime; //holds our "next time" I will be in the office var outTime; //holds the time I leave the office var textColor; Now = new Date(); //creates the "Now" date object and assigns its value to variable "Now" hours = Now.getHours(); //retrieves and stores the hours from the "Now" date object minutes = Now.getMinutes(); //retrieves and stores the minutes from the "Now" date object dow = Now.getDay(); //retrieves and stores the "day of the week" from the "Now" date object textColor = backgroundColor; //starts the determination of what region of the week we are in via a "time" relationship if (hours < 13) { //0:00-12:59 region = "A"; } else if (hours < 14) { //13:00-14:00 region = "B"; } else if ( (hours == 14)||((hours == 15) && (minutes < 30)) ) { //14:00 or 15:00-15:29 region = "C"; } else if (hours < 16) {//15:30-15:59 - Could also be ((hours == 15) && (minutes >=30)) - but we don't need it due to we already eliminated the previous 29 minutes of the 15th hour region = "D"; } else if ((hours == 16) && (minutes < 30)) { //16:00-16:29 region = "E"; } else if (hours < 17) { //16:30-16:59 region = "F"; } else {//region must be "G" - 17:00-23:59 region = "G"; } // Un-comment the line below to write the region to the screen for testing // document.writeln ("<h1>" + region + "</h1>"); //determines the outcome based on a "dow" and "region" relationship if ( ((dow == 1) && (region == "G")) || ((dow == 2) && ((region == "A")||(region == "B"))) ) { outcome = 3; } else if ( ((dow == 3) && (region == "G")) || ((dow == 4) && ((region == "A")||(region == "B"))) ) { outcome = 5; } else if ( ((dow == 2) && (region >= "E")) || ((dow == 3) && (region <= "C")) ) { outcome = 4; } else if ( ((dow == 4) && (region >= "E")) || ((dow == 5) && (region == "A")) ) { outcome = 6; } else if ( (( dow == 6) || (dow == 0)) || ( ((dow == 5) && (region >= "F")) || ((dow == 1) && (region <= "C")) ) ) { outcome = 2; } else{ outcome = 1; } // Un-comment the line below to write the outcome to the screen for testing // document.writeln ("<h1>" + outcome + "</h1>"); // start open varible set based on the "outcome" if (outcome == 1) openTime = true; else openTime = false; //set messages for office times preceeding the current time via the "outcome" if (outcome == 1) nextTime = ""; else if (outcome == 2) nextTime = "Monday at 3:30pm"; else if (outcome == 3) nextTime = "Tueday at 2:00pm"; else if (outcome == 4) nextTime = "Wednesday at 3:30pm"; else if (outcome == 5) nextTime = "Thursday at 2:00pm"; else //outcome must be 6 nextTime = "Friday at 4:30pm"; //determine outTime via a "outcome" and "dow" relationship if ( (outcome == 1) && (dow == 1) ) outTime = "5:00pm"; else if ( (outcome == 1) && (dow == 2) ) outTime = "4:00pm"; else if ( (outcome == 1) && (dow == 3) ) outTime = "5:00pm"; else if ( (outcome == 1) && (dow == 4) ) outTime = "4:00pm"; else if ( (outcome == 1) && (dow == 5) ) outTime = "4:30pm"; else //outTime must be nothing because it is Saturday or Sunday outTime = ""; // start message variable set if (openTime) { backgroundColor = "#00FF00"; message = "<h1 style=\"color:#0F0\">" + "I am in my office," + "<br />" + "I will be in my office until " + outTime + "</h1>"; } else { backgroundColor = "#FF0000"; message = "<h1 style=\"color:#F00\">" + "I am out of the office." + "<br />" + "The next time I will be in is: " + nextTime + "</h1>"; } //write the results to the screen with backgroundColor changing document.bgColor = "#516c82"; document.writeln (message); // success at my first JavaScript program is sweet beautiful bliss :) //--> </script> |
JavaScript E-Training
JavaScript PAWDD E-Training.
I am a proficient begenning JavaScript programmer for the web. i have had wonderful teachers at my college. I will be blogging here about everything I learn in my JavaScript classes from start to finish.
I hope that the information you find here will help you discover the strength of JavaScript, and how to be a better more efficient programmer.
PAWDD and Shaded Pixel LLC
Shaded Pixel LLC is a Web Design and Consulting Company owned by Jason S. Oney. PAWDD is sponsored by Shaded Pixel LLC and is maintained by Web developer Jason S. Oney.
If you have any questions or suggestions please feel free to contact the owner of PAWDD Jason S. Oney at admin@PAWDD.com.
More to come!