diff --git a/data.db b/data.db
index c333cdd..2bd27ef 100644
--- a/data.db
+++ b/data.db
@@ -1,2 +1,2 @@
-{"name":"n0","weight":"5","height":"5","hairColour":"red","gpa":"0","_id":"C7MLNJ6FdWLGty5T"}
-{"name":"n1","weight":"77","height":"190","hairColour":"brown","gpa":"1","_id":"EZ5eUBQmH2I1bUov"}
+{"name":"n0","weight":"80","height":"5","hairColour":"red","gpa":"0","_id":"C7MLNJ6FdWLGty5T"}
+{"name":"n1","weight":"99","height":"180","hairColour":"pink","gpa":"2","_id":"EZ5eUBQmH2I1bUov"}
diff --git a/public/index.html b/public/index.html
index 7b4c4f9..54f07a1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,13 +5,32 @@
-
-
+
+students
| name |
diff --git a/public/script.js b/public/script.js
index 94c614f..aae86d8 100644
--- a/public/script.js
+++ b/public/script.js
@@ -1,73 +1,113 @@
-window.onload=function(){
- addForm=document.getElementById("add");
- addForm.style.display="none";
- table=document.getElementById("studentInfo");
-table.style.display="none"
+window.onload = function () {
+ addForm = document.getElementById("add");
+ addForm.style.display = "none";
+ table = document.getElementById("studentInfo");
+ table.style.display = "none"
+ edit = document.getElementById("editForm");
+ edit.style.display = "none";
displayStudents();
}
-function addStudent(){
+function addStudent() {
console.log("add student");
- form=document.getElementById("add");
- form.style.display="block";
+ form = document.getElementById("add");
+ form.style.display = "block";
}
-function addData(){
- var name=document.getElementById("addName").value;
- var weight=document.getElementById("addWeight").value;
- var height=document.getElementById("addHeight").value;
- var hairColour=document.getElementById("addHairColour").value;
- var gpa=document.getElementById("addGpa").value;
- var data={name, weight, height, hairColour, gpa};
- var option={method:"POST", body: JSON.stringify(data), headers:{'Content-Type':'application/json'}};
+function addData() {
+ var name = document.getElementById("addName").value;
+ var weight = document.getElementById("addWeight").value;
+ var height = document.getElementById("addHeight").value;
+ var hairColour = document.getElementById("addHairColour").value;
+ var gpa = document.getElementById("addGpa").value;
+ var data = { name, weight, height, hairColour, gpa };
+ 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";
+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];
+ student.addEventListener("mouseenter", function (event) {
+ table.style.display = "table";
+ var info = event.target.innerText;
+ list = info.split("\n");
+ var weight = event.target.style.width;
+ var height = event.target.style.height;
+ document.getElementById("sName").innerHTML = list[0];
+ document.getElementById("sWeight").innerHTML = weight.substring(0, weight.length - 2);
+ document.getElementById("sHeight").innerHTML = height.substring(0, height.length - 2);
+ document.getElementById("sHairColour").innerHTML = event.target.style.color;
+ document.getElementById("sGpa").innerHTML = list[1];
})
document.body.appendChild(student);
}
}
- function deleteData() {
+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'
- }
+ 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();
}
-console.log(option)
- fetch('/student', option);
-//window.location.reload();
-}
\ No newline at end of file
+
+ function editData() {
+ var response = fetch('/student');
+ var students = response.json();
+ var sName = document.getElementById("findName").value;
+ for (s of students) {
+ if (sName == s.name) {
+ edit.style.display = "inline-block"
+ document.getElementById("editName").innerHTML = s.name;
+ document.getElementById("editWeight").value = s.weight;
+ document.getElementById("editHeight").value = s.height;
+ document.getElementById("editHairColour").value = s.hairColour;
+ document.getElementById("editGpa").value = s.gpa;
+ }
+ }
+}
+
+function updateData() {
+ console.log("update data")
+ var name = document.getElementById("editName").innerHTML;
+ var weight = document.getElementById("editWeight").value;
+ var height = document.getElementById("editHeight").value;
+ var hairColour = document.getElementById("editHairColour").value;
+ var gpa = document.getElementById("editGpa").value;
+ var data = { name, weight, height, hairColour, gpa };
+ var options = {
+ method: 'PUT',
+ body: JSON.stringify(data),
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ }
+ console.log(options)
+ fetch('/student', options)
+ window.location.reload();
+}
\ No newline at end of file