delete student

2 years ago · 58d659d44a
parent c2a6f5a416
commit 58d659d44a
3 changed files with 78 additions and 5 deletions
--- a/data.db
+++ b/data.db
@ -1,3 +1,2 @@
-{"name":"three","weight":"50","height":"200","hairColour":"black","gpa":"3","_id":"a84IEbquFHLCK8Zj"}
-{"name":"two","weight":"60","height":"20","hairColour":"black","gpa":"3","_id":"kY56cQascxWJyh7A"}
-{"name":"four","weight":"50","height":"200","hairColour":"black","gpa":"3","_id":"wIVpbISz0AOSrmmy"}
+{"name":"n0","weight":"5","height":"5","hairColour":"red","gpa":"0","_id":"C7MLNJ6FdWLGty5T"}
+{"name":"n1","weight":"77","height":"190","hairColour":"brown","gpa":"1","_id":"EZ5eUBQmH2I1bUov"}
--- a/public/index.html
+++ b/public/index.html
@ -4,7 +4,14 @@
 </head>
 <body>
 <button onclick="addStudent()">add student</button>
-
+<br>
+<form>
+    <label>enter student name</label>
+    <input type="text" id="findName"/>
+    <button id="editStudent" onclick="editData()">edit</button>
+    <button id="deleteStudent" onclick="deleteData()">delete</button>
+</form>
+<h1>students</h1>
 <form id="add">
 <label>name</label>
 <input type="text" id="addName"/>
@ -19,5 +26,23 @@
 <button id="submitStudent" onclick="addData()">submit</button>
 </form>

+    <table id="studentInfo">
+        <tr>
+            <th>name</th>
+            <th>weight</th>
+            <th>height</th>
+            <th>hair colour</th>
+            <th>gpa</th>
+        </tr>
+        <tr>
+            <td id="sName"></td>
+            <td id="sWeight"></td>
+            <td id="sHeight"></td>
+            <td id="sHairColour"></td>
+            <td id="sGpa"></td>
+        </tr>
+    </table>
+    
+
 </body>
 </html>
--- a/public/script.js
+++ b/public/script.js
@ -1,9 +1,11 @@
 window.onload=function(){
    addForm=document.getElementById("add");
    addForm.style.display="none";
+    table=document.getElementById("studentInfo");
+table.style.display="none"
+    displayStudents();
 }

-
 function addStudent(){
    console.log("add student");
    form=document.getElementById("add");
@ -20,5 +22,52 @@ function addData(){
    var option={method:"POST", body: JSON.stringify(data), headers:{'Content-Type':'application/json'}};
    console.log(option);
    fetch('/student', option);
+}
+
+async function displayStudents(){
+    var response=await fetch('/student');
+    var students=await response.json();
+    for (s of students){
+        var student=document.createElement('div');
+        student.className="displayDiv";
+        student.style.display="inline-block";
+        student.style.textAlign="center";
+        student.style.margin="20px";
+        student.innerText=s.name+"\n"+s.gpa;
+        student.style.height=parseInt(s.height)+"px";
+        student.style.width=parseInt(s.weight)+"px";
+        student.style.overflow="auto";
+        student.style.padding="20px";
+        student.style.color=s.hairColour;
+        student.style.border="1px solid black";
+
+        student.addEventListener("mouseenter", function(event){
+table.style.display="table";
+            var info=event.target.innerText;
+            list=info.split("\n");
+            document.getElementById("sName").innerHTML=list[0];
+            document.getElementById("sWeight").innerHTML=event.target.offsetWidth;
+            document.getElementById("sHeight").innerHTML=event.target.offsetHeight;
+            document.getElementById("sHairColour").innerHTML=event.target.style.color;
+            document.getElementById("sGpa").innerHTML=list[1];
+        })
+        document.body.appendChild(student);

+    }
+}
+
+ function deleteData() {
+    console.log("in delete")
+var name=document.getElementById("findName").value;
+var data={name};
+var option={
+    method:'DELETE',
+    body: JSON.stringify(data),
+    headers:{
+        'Content-Type':'application/json'
+    } 
+}
+console.log(option)
+ fetch('/student', option);
+//window.location.reload();
 }