-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (76 loc) · 3.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<title>Digital Transcript</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<h1>Digital Transcript System</h1>
<h2>Add Transcript</h2>
<form onsubmit="event.preventDefault(); addTranscript();">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="courses">Courses:</label>
<textarea id="courses" name="courses" rows="4" cols="50" required></textarea><br><br>
<label for="grades">Grades:</label>
<textarea id="grades" name="grades" rows="4" cols="50" required></textarea><br><br>
<label for="issuedBy">Issued By:</label>
<input type="text" id="issuedBy" name="issuedBy" required><br><br>
<label for="issuedOn">Issued On:</label>
<input type="date" id="issuedOn" name="issuedOn" required><br><br>
<input type="submit" value="Add Transcript">
</form>
<h2>Transcripts</h2>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Courses</th>
<th>Grades</th>
<th>Issued By</th>
<th>Issued On</th>
</tr>
<tbody id="transcriptsTable"></tbody>
</table>
<h2>View Transcript</h2>
<form onsubmit="event.preventDefault(); viewTranscript();">
<label for="transcriptId">Transcript ID:</label>
<input type="number" id="transcriptId" name="transcriptId" required><br><br>
<input type="submit" value="View Transcript">
</form>
<div id="transcriptDetails"></div>
<script>
async function addTranscript() {
const name = document.getElementById("name").value;
const courses = document.getElementById("courses").value.split("\n");
const grades = document.getElementById("grades").value.split("\n");
const issuedBy = document.getElementById("issuedBy").value;
const issuedOn = Math.floor(new Date(document.getElementById("issuedOn").value) / 1000);
// Call the contract's addTranscript() method to add the transcript to the blockchain
await contract.methods.addTranscript(name, courses, grades, issuedBy, issuedOn)
.send({ from: '0x0d2786065d8CA8Ac69b6B10EC83FD7bd5bf7ecee' }) // Replace with your account address
// Display a success message on the page
const successMessage = document.createElement("p");
successMessage.innerText = "Transcript added successfully.";
document.body.appendChild(successMessage);
}
</script>
<script>
async function viewTranscript() {
const transcriptId = document.getElementById("transcriptId").value;
// Call the contract's getTranscript() method to get the transcript details
const transcript = await contract.methods.getTranscript(transcriptId)
.call({ from: '0x0d2786065d8CA8Ac69b6B10EC83FD7bd5bf7ecee' }) // Replace with your account address
// Display the transcript details on the page
const transcriptDetailsDiv = document.getElementById("transcriptDetails");
transcriptDetailsDiv.innerHTML = `
<p><strong>Name:</strong> ${transcript[0]}</p>
<p><strong>Courses:</strong> ${transcript[1].join(", ")}</p>
<p><strong>Grades:</strong> ${transcript[2].join(", ")}</p>
<p><strong>Issued By:</strong> ${transcript[3]}</p>
<p><strong>Issued On:</strong> ${new Date(transcript[4] * 1000)}</p>
`;
}
</script>