PAWDD E-Training
24Sep/091

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>
Comments (1) Trackbacks (0)
  1. Wow, This works really well. I modified it for my own schedule. Now I have a bit of text on my website that shows my users if I am in the office or not.

    Wonderful! Thanks.


Leave a comment

You must be logged in to post a comment.

No trackbacks yet.

Dashboard

Training Categories

Shaded Pixel LLC

Monthly Archive

Page Links

PAWDD E-Training