fullstackopen-notes/parts/0/notes.md

Writing HTML amid the code is of course not smart, but for old-school PHP programmers, it was a normal practice.

Lol

I need to do the exercises 0.1.-0.6. here: https://fullstackopen.com/en/part0/fundamentals_of_web_apps

• 0.1
• 0.2
• 0.3
• 0.4
• 0.5
• 0.6

exercise 0.4

sequenceDiagram
    participant browser
    participant server

    Note left of browser: User fills in form and clicks on submit button.

    browser->>server: POST https://studies.cs.helsinki.fi/exampleapp/new_note
    activate server
    server->>browser: 302 Redirect to https://studies.cs.helsinki.fi/exampleapp/notes
    deactivate server

    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/notes
    activate server
    server-->>browser: HTML document
    deactivate server

    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.css
    activate server
    server-->>browser: the css file
    deactivate server

    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.js
    activate server
    server-->>browser: the JavaScript file
    deactivate server

    Note right of browser: The browser starts executing the JavaScript code that fetches the JSON from the server

    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/data.json
    activate server
    server-->>browser: [{ "content": "HTML is easy", "date": "2023-1-1" }, ... ]
    deactivate server

    Note right of browser: The browser executes the callback function that renders the notes, including the new note.

exercise 0.5

sequenceDiagram
    participant browser
    participant server

    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/spa
    activate server
    server-->>browser: HTML document
    deactivate server

    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.css
    activate server
    server-->>browser: the css file
    deactivate server

    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/spa.js
    activate server
    server-->>browser: the SPA JavaScript file
    deactivate server

    Note right of browser: The browser starts executing the JavaScript code that fetches the JSON from the server

    browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/data.json
    activate server
    server-->>browser: [{ "content": "HTML is easy", "date": "2023-1-1" }, ... ]
    deactivate server

    Note right of browser: The browser executes the callback function that renders the notes.

exercise 0.6

• browser fills in data and triggers form submission
• browser renders the new note without talking to the server
• browser sends POST request to /new_note_spa
• server returns 201 created
• browser logs the response to console

sequenceDiagram
    participant browser
    participant server

    Note right of browser: Form gets filled and submission button gets triggered.

    Note right of browser: The browser updates the in-memory notes array and renders again all notes, before talking to the server at all.

    browser->>server: POST https://studies.cs.helsinki.fi/exampleapp/new_note_spa
    activate server
    server-->>browser: 201 Created with JSON success message.
    deactivate server

    Note right of browser: browser logs to console the server's response text.