Outline for physical class schedule builder.

This is not connected to project in any way yet.
zjf19002 · Oct 17, 2023 · 4aee5dc · 4aee5dc
1 parent bae8b39
commit 4aee5dc
Show file tree

Hide file tree

Showing 3 changed files with 307 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="head">Uconn</div>
+    <div id=week>
+        <div id = time-column>Time</div>
+        <div class="day">M</div>
+        <div class="day">T</div>
+        <div class="day">W</div>
+        <div class="day">Th</div>
+        <div class="day">F</div>
+    </div>
+    <div id="cur">
+
+    </div>
+</body>
+
+<script src="script.js"></script>
+
+</html>
diff --git a/script.js 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<ends.length;i++){
+        ends[i] = ends[i] + (class_slots[period-1][1]-1)*5
+    }
+
+    days = class_slots[period-1][0].length;
+
+    let times = [...class_slots[period-1][0]]
+
+    for(i=0;i<class_slots[period-1][0].length;i++){
+        for(j=1;j<class_slots[period-1][1];j++){
+            times.push(class_slots[period-1][0][i]+5*j)
+        }
+    }
+
+    let ct = 0
+    times.forEach((slot) => {
+        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<days){
+            place.style.borderTop = "2px solid black"
+            place.innerText = class_name
+        }
+        if(ends.includes(slot)){
+            place.style.borderBottom = "2px solid black"
+            place.innerHTML = timestring   
+        }
+        place.addEventListener("click", (event) => {
+            t = event.target
+            current.innerHTML = "";
+
+            current.innerHTML += `<h4>Class Name: ${t.getAttribute("name")}</h4>`
+            current.innerHTML += `<h4>Description: ${t.getAttribute("description")}</h4>`
+            current.innerHTML += `<h4>Time: ${t.getAttribute("time") + " " + t.getAttribute("days")}</h4>`
+            current.innerHTML += `<h4>Professor:  ${t.getAttribute("prof")}</h4>`
+            current.innerHTML += `<h4>Room: ${t.getAttribute("room")}</h4>`
+        });
+        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
@@ -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;
+}