-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path001_blockchain.html
126 lines (112 loc) · 4.17 KB
/
001_blockchain.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Blockchain</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 14px;
}
#blockchain-display {
margin-top: 20px;
}
#message {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Simple Blockchain</h1>
<div>
<label for="data-input">Enter data for new block:</label>
<input type="text" id="data-input">
<button id="add-block-btn">Add Block</button>
</div>
<div>
<button id="verify-btn">Verify Chain</button>
</div>
<div id="message"></div>
<div id="blockchain-display">
<h2>Blockchain:</h2>
<pre id="chain-output"></pre>
</div>
<!-- Load CryptoJS for hashing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script>
// Block class to represent each block in the chain
class Block {
constructor(index, timestamp, data, previousHash = '') {
this.index = index;
this.timestamp = timestamp;
this.data = data;
this.previousHash = previousHash;
this.hash = this.calculateHash();
}
calculateHash() {
return CryptoJS.SHA256(this.index + this.timestamp + JSON.stringify(this.data) + this.previousHash).toString();
}
}
// Blockchain class to manage the chain
class Blockchain {
constructor() {
this.chain = [this.createGenesisBlock()];
}
createGenesisBlock() {
return new Block(0, new Date().toISOString(), "Genesis Block", "0");
}
getLatestBlock() {
return this.chain[this.chain.length - 1];
}
addBlock(newBlock) {
newBlock.previousHash = this.getLatestBlock().hash;
newBlock.hash = newBlock.calculateHash();
this.chain.push(newBlock);
}
isChainValid() {
for (let i = 1; i < this.chain.length; i++) {
const currentBlock = this.chain[i];
const previousBlock = this.chain[i - 1];
if (currentBlock.hash !== currentBlock.calculateHash()) {
return false;
}
if (currentBlock.previousHash !== previousBlock.hash) {
return false;
}
}
return true;
}
}
// Create a global blockchain instance (API interface)
const myBlockchain = new Blockchain();
// Function to display the blockchain
function displayBlockchain() {
const chainOutput = document.getElementById('chain-output');
chainOutput.textContent = JSON.stringify(myBlockchain.chain, null, 2);
}
// Add block button event listener
document.getElementById('add-block-btn').addEventListener('click', () => {
const dataInput = document.getElementById('data-input');
const data = dataInput.value;
if (data) {
const index = myBlockchain.chain.length;
const timestamp = new Date().toISOString();
const newBlock = new Block(index, timestamp, data);
myBlockchain.addBlock(newBlock);
displayBlockchain();
dataInput.value = ''; // Clear input
}
});
// Verify chain button event listener
document.getElementById('verify-btn').addEventListener('click', () => {
const isValid = myBlockchain.isChainValid();
const messageDiv = document.getElementById('message');
messageDiv.textContent = isValid ? 'Blockchain is valid' : 'Blockchain is not valid';
});
// Initial display of the blockchain with genesis block
displayBlockchain();
</script>
</body>
</html>