Exercises and media

This page shows how exercises, recorded lectures, and diagrams are presented on the course site.

---

A single exercise

<Exercise> renders one exercise as an inline link with a difficulty badge — use it when a single exercise doesn’t warrant a full list, for example inline in a paragraph.

UppvärmningHello, World!Lösningsförslag

---

A list of exercises

<ExerciseList> takes a list of exercises and shows each difficulty level as a labeled Badge:

• Hello, World!

  UppvärmningLösningsförslag
  The classic first exercise.
• Simple calculator

  TräningLösningsförslag
  Implement addition, subtraction, multiplication, and division.
• Recursive factorial

  FördjupningLösningsförslag
  Calculate n! recursively and iteratively — compare the two solutions.
• Binary search tree

  Utmaning
  Implement a BST with insert, search, and in-order traversal.

Try it yourself first

Solutions are provided for most exercises. Try solving the exercise on your own before looking at the solution.

---

Recorded lectures

<Youtube> embeds a YouTube video with a responsive 16:9 layout.

Here, a video is combined with a :::caution box to flag outdated material in the recording:

Older version shown in the recording

This recording references an older version of Node.js. Use the version specified in the course’s setup guide instead.

---

Mermaid diagrams

Mermaid renders diagrams directly from text. Three examples:

Sequence diagram

sequenceDiagram
    participant Browser
    participant Server
    Browser->>Server: GET /api/data
    Server-->>Browser: 200 OK + JSON
    Browser->>Browser: Update DOM

Class diagram

classDiagram
    class Animal {
        +String name
        +int age
        +speak() String
    }
    class Dog {
        +fetch()
    }
    class Cat {
        +purr()
    }
    Animal <|-- Dog
    Animal <|-- Cat

Flowchart

flowchart TD
    A[Start program] --> B{Valid input?}
    B -- Yes --> C[Compute result]
    B -- No --> D[Show error message]
    C --> E[Print answer]
    D --> F[Ask for new input]
    F --> B
    E --> G[Exit]