Schedule - Template

Template for Week 5 Activity in which you will modify the DOM to add the schedule using JavaScript only.

by Karel Jed Darang

HTML

<div id="horizontalLegend">
    <div id="time" class="day">Time</div>
    <div class="day">Monday</div>
    <div class="day">Tuesday</div>
    <div class="day">Wednesday</div>
    <div class="day">Thursday</div>
    <div class="day">Friday</div>
    <div class="day">Saturday</div>
    <div class="day">Sunday</div>
</div>
<div id="schedule">
    <div id="legend">
        <div class="even">8:00</div>
        <div class="odd">9:00</div>
        <div class="even">10:00</div>
        <div class="odd">11:00</div>
        <div class="even">12:00</div>
        <div class="odd">13:00</div>
        <div class="even">14:00</div>
        <div class="odd">15:00</div>
        <div class="even">16:00</div>
        <div class="odd">17:00</div>
        <div class="even">18:00</div>
        <div class="odd">19:00</div>
    </div>
    <div id="legendOffset" class="day"></div>
    <div id="Monday"    class="day"></div> 
    <div id="Tuesday"   class="day"></div> 
    <div id="Wednesday" class="day"></div>
    <div id="Thursday"  class="day"></div> 
    <div id="Friday"    class="day"></div> 
    <div id="Saturday"  class="day"></div> 
    <div id="Sunday"    class="day"></div> 
</div>

CSS

#schedule {
    position: absolute;
    top:5%;
    width: 100%;
    height:95%;
}

#legend {
    width: 100%;
    height: 100%;
}

.unit {
    position: absolute;
    background-color: darkblue;
    width: 12.5%;
    color: white;
    border-width: 1px;
    border-style: solid;
    border-color: palegoldenrod;
    text-align: center;
}


.even {
    height: 8.33%;
    background-color: lightgray;
    color: black;
}

.odd {
    height: 8.33%;
    background-color: slategray;
    color: white;
}

.day {
    width: 12.5%;
    height : 100%;
    float: left;
    text-align: center;
}

#time {
    text-align: left;
}

JavaScript

// Return the time in hours since the start of the day
function startTime(hours, min) {
    var time = hours + min / 60.0;
    return time;
}
function Tuesday(givenName, familyName, unit) {
    this.givenName = givenName;
    this.familyName = familyName;
    this.unit = [ ];
}

// Use Object Notation with comma separated name:value paris
// to stgore the schedule
var schedule = {
    givenName : "Brian",
    familyName: "von Konsky",
    unit : [
        {
            name: "IPM (Lecture)",
            dow:   "Tuesday",
            time: startTime(10, 0),
            duration: 1
        },
        {
            name: "IPM (Tutorial 1)",
            dow:   "Tuesday",
            time: startTime(12, 0),
            duration: 2
        },
        {
            name: "IPM (Tutorial 2)",
            dow:   "Wednesday",
            time: startTime(14, 0),
            duration: 2
        },
        {
            name: "IPM (Tutorial 3)",
            dow:   "Wednesday",
            time: startTime(18, 0),
            duration: 2
        },
        {
            name: "BWT (Group 1)",
            dow:   "Thursday",
            time: startTime(9, 0),
            duration: 3
        },
        {
            name: "BWT (Group 2)",
            dow:   "Thursday",
            time: startTime(14,0),
            duration: 3
        }
        ]

       

};