simple course list

class_registration_app/src/assets/main.css

@@ -131,3 +131,12 @@ a,
 
 }
 
+.test{
+  background-color: #ccc;
+}
+
+.test2{
+  box-shadow: 5px black;
+}
+
+

class_registration_app/src/components/EnrolledCourseList.vue

@@ -1,12 +1,141 @@
-<script setup lang="ts">
-</script>
-
 <template>
-    <div class="container">
-        <h1>My Classes</h1>
+    <div class="homehead">
+        UConn&ensp;|&ensp;University of Connecticut
+     </div>
+    <div id="container">
+        <h1 class=myclasses>My Classes</h1>
     </div>
-
 </template>
 
+<script setup lang="js">
+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"]
+]
+    const classes = [
+    {
+        "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"
+    }
+    ]
+    function do_all(){
+
+    for(let i=0;i<classes.length;i++){
+        let con = document.getElementById('container')
+
+        let c = classes[i]
+
+        let d = document.createElement("div")
+        d.style.width = "85%";
+        d.style.height = "150px";
+        d.style.margin = "20px auto";
+        
+        let period = classes[i].period;
+        let start = class_slots[period-1][0][0] 
+        let starttime = 8+.5*Math.floor(start/5)
+        let end = class_slots[period-1][0][0] + 5*class_slots[period-1][1]
+        let endtime = 8+.5*Math.floor(end/5)-.25
+        let timestring = toTime(starttime) + "-" + toTime(endtime) + " " + class_slots[period-1][2];
+
+        d.innerHTML += `<h1 style="color:#d18c0a">${classes[i].class_name}</h1>
+        <h3>${timestring}</h3>
+        <h4>${classes[i].credits}.00 Credits</h4>
+        <h4>Instructor: ${classes[i].prof}</h4>
+        <h4>Description: ${classes[i].description}</h4>`
+
+
+
+        d.className = "test";
+        con.appendChild(d);
+    }
+    
+
+    }
+    setTimeout(do_all,0);
+
+    function toTime(time){
+    let timestring = ""
+    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
+}
+</script>
+
+
 <style scoped>
+.myclasses{
+    text-align: center;
+}
 </style>