# A guestbook with vanilla JavaScript

The finished version of the JSON-API guestbook built up in Part 2 of the
web-development guide. The server doesn't render any HTML. It serves a
near-empty `index.html` plus an `app.js`, and exposes two JSON endpoints. The
browser runs the JavaScript, calls the API with `fetch`, and builds the
visible list of messages by manipulating the DOM.

The whole thing fits in about thirty lines of Java and fifty lines of
JavaScript. The state lives in a `List<Message>` on the server, so refreshing
the page (or opening a second tab) preserves what was posted. Restarting the
server wipes it; there's no database.

## Layout

```
guestbook/
  Message.java     - record(name, text)
  Server.java      - Javalin: static files + GET/POST /api/messages
static/
  index.html       - skeleton page with empty <ul> and a form
  app.js           - fetch + DOM manipulation
lib/               - all jars on the classpath (Javalin, Jackson, Jetty, ...)
Makefile           - compile/run/clean targets
```

## Run

Requires Java 21. All other dependencies are vendored under `lib/`.

```bash
make run
```

Then visit `http://localhost:8331/`. Stop with Ctrl-C.

## Things to try

- Open DevTools, Network tab, filter to Fetch/XHR. Reload: there's a `GET /`
  for the HTML, a `GET /app.js` for the script, and a `GET /api/messages`
  with body `[]`.
- Post a message. One `POST /api/messages` request appears; the URL bar
  doesn't change.
- Right-click the page, View Page Source: the `<ul>` is empty. Then open the
  Elements panel: the `<li>` items are there. This is the moment those two
  views diverge.
- In the Console, try `document.getElementById("messages").innerHTML = ""`
  to wipe the list live.