nodeJStutorial/index.html at main · sreeeeeeeeeed/nodeJStutorial · 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
<!doctype html>
<html>
<head><meta charset="utf-8"><title>Counter</title></head>
<body>

  <button id="button">+1</button>
  <span id="number">0</span>

  <script>

    //make button and number elements
    const button = document.getElementById("button");
    const numberElement = document.getElementById("number");

    // an async function is a function that can use the "await" keyword to wait for promises to resolve.
    //a promise is kinda like a pcall ?
    async function fetchCounter() {
        //fetch is a built in function that makes an HTTP request and returns a promise that resolves to the response.
      const res = await fetch("/counter");
      const json = await res.json();
      numberElement.textContent = json.value;
    }

    // Increment on click (POST)
    button.addEventListener("click", async () => {
        //when the button is clicked, we make a POST request to /counter/increment to increment the counter on the server.
      const res = await fetch("/counter/increment", { method: "POST" });
      const json = await res.json();
      numberElement.textContent = json.value;
    });
    //update the counter value on page load by fetching it from the server.
    fetchCounter();
  </script>
</body>
</html>