-
Notifications
You must be signed in to change notification settings - Fork 0
/
pesan.html
100 lines (93 loc) · 3.36 KB
/
pesan.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Messages</title>
<style>
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
}
.message {
border: 1px solid white;
padding: 10px;
margin-bottom: 10px;
}
.delete-btn {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
margin-left: 10px;
}
</style>
</head>
<body>
<h2>Messages</h2>
<div id="messages">
<!-- Messages will be displayed here -->
</div>
<script>
// Fungsi untuk memuat pesan yang tersimpan saat halaman dimuat
window.onload = function() {
loadMessages();
};
// Fungsi untuk memuat pesan yang tersimpan
function loadMessages() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var messages = JSON.parse(this.responseText);
displayMessages(messages);
}
};
xhttp.open("GET", "messages.json", true);
xhttp.send();
}
// Fungsi untuk menampilkan pesan
function displayMessages(messages) {
var messagesContainer = document.getElementById('messages');
messagesContainer.innerHTML = ""; // Bersihkan kontainer pesan sebelum menampilkan yang baru
messages.forEach(function(message, index) {
var messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.textContent = message;
// Tambahkan tombol hapus
var deleteBtn = document.createElement('button');
deleteBtn.classList.add('delete-btn');
deleteBtn.textContent = 'Delete';
deleteBtn.addEventListener('click', function() {
deleteMessage(index);
});
messageDiv.appendChild(deleteBtn);
messagesContainer.appendChild(messageDiv);
});
}
// Fungsi untuk menghapus pesan
function deleteMessage(index) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
loadMessages(); // Memuat ulang pesan setelah menghapus
}
};
// Mengambil pesan dari messages.json
xhttp.open("GET", "messages.json", true);
xhttp.onload = function() {
var messages = JSON.parse(xhttp.responseText);
// Hapus pesan dengan indeks yang diberikan
messages.splice(index, 1);
// Simpan kembali pesan ke messages.json
var xhr = new XMLHttpRequest();
xhr.open("PUT", "messages.json", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(messages));
}
xhttp.send();
}
</script>
</body>
</html>