The time is now:
Today's schedule
Select another day:

What to do

  1. Open BBEdit by clicking on the icon on the dock


  2. Create a new web document +CTRL+N.
    • Make sure XHTML 1.0 Strict is selected
    • Give your document a title (This is what appears on the top of your browser).
    • Press OK
  3. Save the document in your web folder as schedule.html.


  4. This is what you should see:
    1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11. 
12. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Your Title</title>
    <meta  name="generator" content="BBEdit 7.0.4" />
</head>
<body>
	
</body>
</html>


  5. Navigate to the <head></head> element (In my document, lines 4-8)

  6. Create an internal style declaration:
       
<style type="text/css">

</style>


    7. 
Click between the <style></style"> tags and add the following internal styles (fill in the blanks)
    
on is the style for the class you are currently in

    
off is the style for the class you NOT are currently in

    offx is the style for the classes on the other day:
    

     
       
td{padding:.5em;}
    
.on{
    background-color:____;
    font-family:verdana, sans-serif;
    color:____;}
.off{
    background-color:____;
    font-family:verdana, sans-serif;
    color:____;}
.offx{
    background-color:____;
    font-family:verdana, sans-serif;
    color:____;}

.container {
   position: relative;
    height: 10px;
}


.left-element {
    float: left;
    width: 49%;
}

.right-element {
    float: right;
    width: 49%;
    text-align: right; 
}



    

  7. After the close of the style declaration  add a javascript declaration  

    <script type="text/javascript">
    //<!--
    
    //-->
</script>


    8. 

  8. Inside the javascript declaration  paste and complet the following:

    
// Array of day names
var dayNames = new Array(
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday");

// Array of month Names
var monthNames = new Array(
"January",
"February",
//complete the list
);




    9. 

  9. Use the following form to generate your schedule for the javascript
    

	
	
		
	
	


    10. 

  10. When you get the Javascript paste it in after the month array

    11. 


  11. Paste the following after your schedule 
    
Any javascript statement that extends over a line must be fixed (use delete):
    var now = new Date();

hide("schedule"); 

function schedule(){
    day=document.getElementById('days').value;
    if (day!=""){
        show("schedule");
        for(x=0;x<=10;x++){
            change('changeMex'+(x+1), 'offx');
            document.getElementById('periodx'+(x+1)).innerHTML=eval(day)[x]
        }
    }else{
    hide("schedule");
    }
}

function startTime(){
    var now = new Date();
    var h=now.getHours();
    var m=now.getMinutes();
    var s=now.getSeconds();

    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);



    document.getElementById('todaysDate').innerHTML="Today is "+dayNames[now.getDay()] + ", " +  monthNames[now.getMonth()] + " " + now.getDate() + ", " + now.getFullYear()


    document.getElementById('txt').innerHTML=h%12+":"+m+":"+s;
    t=setTimeout('startTime()',500);

    //returns a number between 0 and 10
    var period=checkPeriod((h*60),m);


    if (period<=9){
    //returns the name of the class
        var myClass=checkMyClass(dayNames[now.getDay()],period);
        document.getElementById('txt2').innerHTML="I am currently in my "+myClass;
    }else{
        myClass="";
        document.getElementById('txt2').innerHTML="I am currently not in class";

    }
    
    if(dayNames[now.getDay()]!="Saturday" ||dayNames[now.getDay()]!="Sunday"){
        for(x=0;x<=10;x++){
            if(x==period){
                change('changeMe'+(x+1), 'on');
            }
        document.getElementById('period'+(x+1)).innerHTML=eval(dayNames[now.getDay()]+"Classes")[x];
    }
}




function checkTime(i){
    if (i<10) {
        i="0" + i;
    }
  return i
}

    12. 

  12. Paste more javascript in and fill in the underlines (use a calculator if you need to)
    
function checkPeriod(h,m){
    time=h+m;
//replace with the number of minutes 
//9*60+20
   
    else if (time<=560) {p=0;}
    else if (time<=____) {p=1;}
    else if (time<=625) {p=2;}
    else if (time<=___) {p=3;}
    else if (time<=___) {p=4;}
    else if (time<=770) {p=5;}
    else if (time<=825) {p=6;}
    else if (time<=___) {p=7;}
    else if (time<=___) {p=8;}
    else if (time<=970) {p=9;}
    else if (time>=970){p=10;}

    return p;
}

//function that returns the name of the current class
function checkMyClass(d,p){
    list=eval(d+"Classes");
    return list[parseInt(p)];
}
}
//function to change style
function change(id, newClass) {
    identity=document.getElementById(id);
    identity.className=newClass;
}




function hideschedule(){
    hide("schedule");
              
}

function hide(id) {
    //safe function to hide an element with a specified id
    if (document.getElementById) { // DOM3 = IE5, NS6
        document.getElementById(id).style.display = 'none';
    }
    else {
        if (document.layers) { // Netscape 4
            document.id.display = 'none';
        }
        else { // IE 4
            document.all.id.style.display = 'none';
        }
    }
}

function show(id) {
    //safe function to show an element with a specified id
          
    if (document.getElementById) { // DOM3 = IE5, NS6
        document.getElementById(id).style.display = 'block';
    }
    else {
        if (document.layers) { // Netscape 4
            document.id.display = 'block';
        }
        else { // IE 4
            document.all.id.style.display = 'block';
        }
    }
}


    13. 

  13. Replace the current <body> tag with the following:

    <body onload="startTime()">
    

    14. 


  14. Within the <body></body> tags add a pair of 
<div></div> tags

    15. 


  15. Paste the following within your  <div></div> tags Modify the text below to reflect your own preferences:

    <div>
<div style="background-color:_______;padding:1em;">
<div class="container">
<div class="left-element">
    <span style="font-family:'_______';">
    <span id="todaysDate"></span>
</span>
</div>
<div class="right-element">
   <span style="font-family:'______';color:______;text-align:right;">

    The time is now:</span>
    
    <!--this is the time-->
    <span id="txt"  style="color:_____;"></span>
</div>
</div>
</div>


<div style="padding:1.5em 2em 0em 2em;">
    <span id="txt2" style="padding:1em;background-color:______;border:____;border-width:____;"></span>
</div>

<div style="padding:2em;">



    16. 

  16. Paste the following (this is today's schedule):
       
<table border="0" cellspacing="0" cellpadding="0" frame="border" rules="all"style="margin-left:20%;">
    <tr>
        <td style="vertical-align:top;">Today's schedule
        <table border="1" cellspacing="0" cellpadding="0" frame="border" rules="all" >
    <tr>
        <td class="off" id="changeMe1"><span id="period1"></span></td>
    </tr>
    <tr>
            <td class="off" id="changeMe2"><span id="period2"></span></td>
    </tr>
    <tr>
            <td class="off" id="changeMe3"><span id="period3"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMe4"><span id="period4"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMe5"><span id="period5"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMe6"><span id="period6"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMe7"><span id="period7"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMe8"><span id="period8"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMe9"><span id="period9"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMe10"><span id="period10"></span></td>

    </tr>
</table></td>

    17. 

  17. Paste this in your document. This is the button that allows you to select another schedule (Replace the blanks with the names of the days of the week):

    <td style="vertical-align:top;">
Select another day:
<form id="form" method="post" action="#">
<p>
    <select id="days" size="1" onchange="javascript:schedule()">
    <option value="">Go to....</option>
    <option value="MondayClasses">________</option>
    <option value="TuesdayClasses">________</option>
    <option value="WednesdayClasses">________</option>
    <option value="ThursdayClasses">_________</option>
    <option value="FridayClasses">_________</option>
    </select>
</p>
</form>
</td>

    

    18. 

  18. Paste this in your document. This is the hidden other schedule:

    

<td style="vertical-align:top;">
<div id="schedule" style="display:none;">
<table border="1" cellspacing="0" cellpadding="0" frame="border" rules="all" >
    <tr>
        <td class="off" id="changeMex1"><span id="periodx1"></span></td>
    </tr>
    <tr>
            <td class="off" id="changeMex2"><span id="periodx2"></span></td>
    </tr>
    <tr>
            <td class="off" id="changeMex3"><span id="periodx3"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMex4"><span id="periodx4"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMex5"><span id="periodx5"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMex6"><span id="periodx6"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMex7"><span id="periodx7"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMex8"><span id="periodx8"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMex9"><span id="periodx9"></span></td>

    </tr>
    <tr>
            <td class="off" id="changeMex10"><span id="periodx10"></span></td>

    </tr>
</table></div>
</td>
    </tr>
</table>