forked from balamalireddi/php-guestbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
executable file
·104 lines (96 loc) · 3.47 KB
/
index.php
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
<!DOCTYPE HTML>
<html>
<head>
<title>GuestBook</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css?v=2" />
</head>
<body>
<section id="guestbook">
<div class="container">
<header>
<h2>Comments:</h2>
</header>
<p>Feel free to leave a message :)</p>
<form id="gbform" method="post" action="gb.php">
<div class="row">
<div><input type="text" name="gbname" placeholder="Name" required ></div>
<div>
<textarea name="gbmessage" placeholder="Message" required ></textarea>
</div>
<div>
<input type="submit" value="Post it!" />
<input type="reset" value="Reset" />
</div>
</div>
</form>
<h3>Messages:</h3>
</div>
<div class="gb-container">
<div class="loader"></div>
<?php
// -> replaced by JS / fetch() ...
// readfile("gbentries.txt");
?>
</div>
<script>
const gbContainer = document.querySelector(".gb-container");
const gbForm = document.getElementById("gbform");
function checkTime(i) {
return (i < 10) ? "0" + i : i;
}
let today, h, m, s;
function updateDate() {
today = new Date();
h = checkTime(today.getHours());
m = checkTime(today.getMinutes());
s = checkTime(today.getSeconds());
};
updateDate();
let gbTextFile = "gbentries.txt?v="+h+m+s;
setTimeout(() => {
fetch(gbTextFile)
.then(response => response.text())
.then((data) => {
gbContainer.innerHTML = data;
})
}, 1500);
gbform.addEventListener("submit", function(event){
event.preventDefault();
var fd = new FormData();
fd.append("gbname", document.querySelector("input[name=gbname]").value)
fd.append("gbmessage", document.querySelector("textarea[name=gbmessage]").value);
fetch('gb.php', {method: "POST", body: fd})
.then(function(res) {
console.log(res)
if(res.status === 200) {
gbContainer.innerHTML = '<div class="loader"></div>';
gbForm.reset();
updateDate();
gbTextFile = "gbentries.txt?v="+h+m+s;
fetch(gbTextFile)
.then(response => response.text())
.then((data) => {
gbContainer.innerHTML = data;
})
}
})
.catch(function(res){ console.log("ERROR: " + res) });
});
/**
* Auto-refresh posts ever 5 secs. // uncomment if you need it
*/
// setInterval(() => {
// updateDate();
// gbTextFile = "gbentries.txt?v="+h+m+s;
// fetch(gbTextFile)
// .then(response => response.text())
// .then((data) => {
// gbContainer.innerHTML = data;
// })
// }, 5000);
</script>
</section>
</body>
</html>