diff --git a/index.html b/index.html new file mode 100644 index 0000000..80f1f96 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + + + +
+
Time
+
M
+
T
+
W
+
Th
+
F
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..f15bcab --- /dev/null +++ b/script.js @@ -0,0 +1,226 @@ +grid = document.getElementById('week'); +current = document.getElementById('cur'); + +const time_times = ['8:00am-8:30am','8:30am-9:00am','9:00am-9:30am','9:30am-10:00am', +'10:00am-10:30am','10:30am-11:00am','11:00am-11:30am','11:30am-12:00pm', +'12:00pm-12:30pm','12:30pm-1:00pm','1:00pm-1:30pm','1:30pm-2:00pm', +'2:00pm-2:30pm','2:30pm-3:00pm','3:00pm-3:30pm','3:30pm-4:00pm', +'4:00pm-4:30pm','4:30pm-5:00pm'] + +const class_times = ['8:00am-8:50am','9:00am-9:50am','10:00am-10:50am','11:00am-11:50am', +'12:00pm-12:50pm','1:00pm-1:50pm','2:00pm-2:50pm','3:00pm-3:50pm', +'4:00pm-4:50pm','8:00am-9:15am','9:30am-10:45am','11:00am-12:15pm', +'12:30pm-1:45pm','2:00pm-3:15pm','3:30pm-4:40pm'] + +const class_slots = [ + [[0,2,4],2], //1 + [[10,12,14],2,"MWF"], + [[20,22,24],2,"MWF"], + [[30,32,34],2,"MWF"], + [[40,42,44],2,"MWF"], + [[50,52,54],2,"MWF"], //6 + [[60,62,64],2,"MWF"], + [[70,72,74],2,"MWF"], + [[80,82,84],2,"MWF"], + [[1,3],3,"TTh"], + [[16,18],3,"TTh"], //11 + [[31,33],3,"TTh"], + [[46,48],3,"TTh"], + [[61,63],3,"TTh"], + [[76,78],3,"TTh"], + [[0],4,"M"], //16 + [[20],4,"M"], + [[40],4,"M"], + [[60],4,"M"], + [[2],4,"W"], + [[22],4,"W"], //21 + [[42],4,"W"], + [[62],4,"W"], + [[4],4,"F"], + [[24],4,"F"], + [[44],4,"F"], //26 + [[64],4,"F"] +] + +colors = ['rgb(120,255,150)', 'rgb(120,150,255)','rgb(255,120,150)','rgb(255,255,120)'] + +for (var i = 0; i <18;i++){ + + time = document.createElement('div'); + time.classList.add('time'); + time.innerHTML = time_times[i]; + grid.appendChild(time); + + for (var j=0; j<5; j++){ + child = document.createElement('div'); + child.classList.add('class') + child.id = 'slot' + (5*i+j) + grid.appendChild(child); + } +} + +classes1 = [ + { + "period": "2", + "class_name": "CSE1010", + "prof": "John", + "description": "Intro CS", + "room": "McHugh 101", + "credits": "3" + }, + { + "period": "4", + "class_name": "MATH1131" , + "prof": "Bob", + "description": "Calc 1", + "room": "McHugh 101", + "credits": "3" + }, + { + "period": "12", + "class_name": "ANTH1000" , + "prof": "Joey", + "description": "Intro Anth", + "room": "McHugh 101", + "credits": "3" + }, + { + "period": "13", + "class_name": "CHEM1127", + "prof": "Joe", + "description": "Intro Chem", + "room": "McHugh 101", + "credits": "3" + }, + { + "period": "23", + "class_name": "MATH1071", + "prof": "Billy", + "description": "Business Calc", + "room": "McHugh 101", + "credits": "2" + } +] +classes2 = [ + { + "period": "5", + "class_name": "CSE2050", + "prof": "Joe", + "description": "Data Structures", + "room": "McHugh 101", + "credits": "3" + }, + { + "period": "13", + "class_name": "MATH1132", + "prof": "Joseph", + "description": "Calc 2", + "room": "McHugh 101", + "credits": "3" + }, + { + "period": "8", + "class_name": "ANTH1000" , + "prof": "Joey", + "description": "Intro Anthropology", + "room": "McHugh 101", + "credits": "3" + }, + { + "period": "16", + "class_name": "COMM1000" , + "prof": "Steve", + "description": "Intro Comm", + "room": "McHugh 101", + "credits": "2" + } +] + +colorct = 0 + +function add_class_to_schedule(myClass){ + period = myClass.period; + class_name = myClass.class_name; + + ends = [...class_slots[period-1][0]] + + for(i=0;i { + place = document.getElementById("slot"+slot) + place.style.backgroundColor = colors[colorct%4] + place.style.borderLeft = "2px solid black" + place.style.borderRight = "2px solid black" + + start = class_slots[period-1][0][0] + starttime = 8+.5*Math.floor(start/5) + + end = class_slots[period-1][0][0] + 5*class_slots[period-1][1] + endtime = 8+.5*Math.floor(end/5)-.25 + + timestring = toTime(starttime) + "-" + toTime(endtime); + + place.setAttribute("name",myClass.class_name) + place.setAttribute("days",class_slots[period-1][2]) + place.setAttribute("prof",myClass.prof) + place.setAttribute("description",myClass.description) + place.setAttribute("time",timestring) + place.setAttribute("credits",myClass.credits) + place.setAttribute("room",myClass.room) + + + if(ct { + t = event.target + current.innerHTML = ""; + + current.innerHTML += `

Class Name: ${t.getAttribute("name")}

` + current.innerHTML += `

Description: ${t.getAttribute("description")}

` + current.innerHTML += `

Time: ${t.getAttribute("time") + " " + t.getAttribute("days")}

` + current.innerHTML += `

Professor: ${t.getAttribute("prof")}

` + current.innerHTML += `

Room: ${t.getAttribute("room")}

` + }); + ct++; + }) + colorct+=1; +} + +function toTime(time){ + if(time%1==0){ + timestring = (time-1)%12+1 + ":00" + } + else{ + timestring = Math.floor((time-1)%12 + 1).toString() + ":" + 60*(time%1) + } + + if (time<12){ + timestring += "am" + } + else{ + timestring += "pm" + } + return timestring +} + +classes1.forEach((element) => {add_class_to_schedule(element)}) + diff --git a/style.css b/style.css new file mode 100644 index 0000000..a0e97d1 --- /dev/null +++ b/style.css @@ -0,0 +1,56 @@ +#head{ + margin: 0 auto 10px; + width: 90%; + height: auto; + font-size: 50px; + text-align: center; + background-color: #0f1938; + color: #ffffff; +} + +#week{ + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; + margin: 0 auto; + width: 70%; + display: grid; + text-align: center; + grid-template-columns: [time] 15% [first] 17% [line2] 17% [line3] 17% [col4-start] 17% [five] 17% [end]; + grid-template-rows: [day] 40px repeat(18,30px) +} + +.class{ + background-color: #dfd; +} + +.day{ + background-color: #888; + text-align: center; + vertical-align: middle; + border: 1px solid; +} + +.time{ + background-color: #888; + font-size: 15px; + text-align: center; + vertical-align: middle; + border: 1px solid; +} + +#time-column{ + vertical-align: middle; + background-color: #888; + color: black; + font-size: 20px; + text-align: center; +} + +#cur{ + font-family: Arial, Helvetica, sans-serif; + margin: 10px auto; + width: 70%; + height: auto; + padding: 10px; + background-color: #bfb; +}