course management

frontend/src/Apps/ManageCourses.vue

@@ -0,0 +1,78 @@
+<script setup>
+const cursus=[
+  {
+  "id": 12,
+  "name": "Math pour l'info",
+  "credits": 11,
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+  {
+  "id": 42,
+  "name": "Operating Systems",
+  "credits": 8,
+  "faculty": "science",
+  "teacher": 14,
+  "Assistants": []},
+  {
+  "id": 42,
+  "name": "Fonctionnement des ordinateurs",
+  "credits": 11,
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+
+  ]
+</script>
+<template>
+  <div class="body">
+    <div  class="listElement " v-for="item in cursus">
+      <div class=" containerElement">
+        <div class="name"> {{item.name}} </div>
+        <div class="teacher">{{item.teacher}}</div> 
+        <div class="credits">Credits:{{item.credits}}</div>  
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.body {
+    width:100%;
+    margin-bottom:10px;
+  }
+ .containerElement{ 
+   justify-content:center;
+    display:grid;
+    grid-template-columns:350px 350px 200px;
+    grid-template-areas:
+    "name teacher credits"; 
+    column-gap:10px;
+    
+  }
+  
+  .name {
+    grid-area:name;
+    align-self:center;
+  }
+
+  .teacher{
+    grid-area:teacher;
+    align-self:center;
+  }
+
+  .credits{
+    grid-area:credits;
+    align-self:center;
+  }
+
+.listElement{
+  border:2px solid black;
+  font-size:25px;
+  color:white;
+  padding:20px;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+  margin-bottom:10px;
+}
+</style>