melody
/
cmpt276-a2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Testing

Browse Source
main
mms37 2 years ago
parent 58d659d44a
commit f697b6d1c5
3 changed files with 120 additions and 60 deletions
Show Stats Download Patch File Download Diff File

4
data.db
Unescape View File

@ -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"}

28
public/index.html
Unescape View File

@ -5,13 +5,32 @@
<body>
<button onclick="addStudent()">add student</button>
<br>
<form>
<div>
<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>
</div>
<div id="editForm">
<p>student to edit</p>
<p>edit the data to update</p>
<span>name:
<span id="editName"></span>
</span>
<br>
<label>weight</label>
<input type="text" id="editWeight">
<label>height</label>
<input type="text" id="editHeight">
<label>hair colour</label>
<input type="text" id="editHairColour">
<label>gpa</label>
<input type="text" id="editGpa">
<button onclick="updateData()">apply changes</button>
</div>
<br>
<form id="add">
<label>name</label>
<input type="text" id="addName"/>
@ -25,7 +44,8 @@
<input type="text" id="addGpa"/>
<button id="submitStudent" onclick="addData()">submit</button>
</form>
<br>
<h1>students</h1>
<table id="studentInfo">
<tr>
<th>name</th>

148
public/script.js
Unescape View File

@ -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();
}
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();
}
Write Preview
Loading…
Cancel
Save