LoveLetterToWhoever/LoveLetterToWhoever.html at main · bruleeshark/LoveLetterToWhoever · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Love Letter Interface</title>
    <style>
      body {
        background-color: black;
        color: red;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Love Letter To Whoever</h1>
    <p>Set Love Letter Message:</p>
    <input id="message" type="text" placeholder="Write your message here">
    <br><br>
    <p>Set Pin:</p>
    <input id="pin" type="text" placeholder="Set 4-digit pin">
    <br><br>
    <button id="setMessageBtn">Set Message</button>
    <button id="setPinBtn">Set Pin</button>
    <br><br>
    <p>Open Love Letter:</p>
    <input id="inputPin" type="text" placeholder="Enter 4-digit pin">
    <br><br>
    <button id="openLoveLetterBtn">Open Love Letter</button>
    <br><br>
    <p id="output"></p>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/web3@1.0.0-beta.37/dist/web3.min.js"></script>
<script>
  if (typeof web3 !== 'undefined') {
    web3 = new Web3(web3.currentProvider);
  } else {
    web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
  }
const contractAddress = '0x...'; // Add the deployed contract address
const abi = [{...}]; // Add the ABI of the contract

const loveLetter = new web3.eth.Contract(abi, contractAddress);

const setMessage = async () => {
const message = document.getElementById('message').value;
await loveLetter.methods.setMessage(message).send({ from: web3.eth.defaultAccount });
document.getElementById('output').innerHTML = 'Message set successfully!';
}

const setPin = async () => {
const pin = document.getElementById('pin').value;
await loveLetter.methods.setPin(pin).send({ from: web3.eth.defaultAccount });
document.getElementById('output').innerHTML = 'Pin set successfully!';
}

const openLoveLetter = async () => {
const pin = document.getElementById('inputPin').value;
const message = await loveLetter.methods.revealMessage(pin).call();
document.getElementById('output').innerHTML = message;
}

  document.getElementById('setMessageBtn').addEventListener('click', setMessage);
  document.getElementById('setPinBtn').addEventListener('click', setPin);
  document.getElementById('openLoveLetterBtn').addEventListener('click', openLoveLetter);
</script>
</html>