> Source URL: /demos/task-lists.demo
# Task Lists Demo

Various GFM task list patterns for testing layout and label behavior.

---

## Simple Tasks

- [ ] A plain unchecked task
- [x] A completed task
- [ ] Another unchecked task
- [~] A pending task (not working yet)

---

## Tasks with Inline Formatting

- [ ] **Bold label** with trailing text
- [ ] Task with `inline code` and a [link](https://example.com)
- [ ] _Italic task_ followed by **bold** and `code` as well as a ==highlight==
- [ ] How about a task with <span class="font-extrabold bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">
      html tags</span>?

---

## Tasks with Block Content (Pattern A)

These have a `<p>` that gets converted to `<label>`, plus additional block content below.

- [ ] **Print a Welcome Banner:**
  - [x] Print a banner using string multiplication:

    ```python
    print("=" * 30)
    print("  WELCOME")
    print("=" * 30)
    ```

  - [ ] Print a closing message

- [ ] **Collect User Info:**
  - [ ] Prompt the user with:

    ```python
    input("Your name: ")
    ```

    and store the response in a variable `name`.

  - [ ] Prompt the user with:

    ```python
    input("Your age: ")
    ```

    convert this to an integer and store it in `age`.

---

## Bare Text Tasks (Pattern B)

These have no `<p>` wrapper — just inline text directly after the checkbox.

- [ ] Set a variable `ticket_price` to `5`.
- [ ] Wrap the input prompt in a loop (for example, `while True`) so you can ask again until the response passes validation.
- [x] Check that the response contains digits only using `.isdigit()`.

---

## Pattern B with Code Blocks

Bare text followed by a code block — the label should close before the `<pre>`.

- [ ] Prompt the user with:

  ```python
  input("How many tickets? ")
  ```

- [ ] If the quantity is valid, print:

  ```
  You bought 6 ticket(s) for $30. Enjoy!
  ```

- [ ] Otherwise, print:

  ```
  Please enter a valid number.
  ```

---

## Tasks with Math

- [ ] **Calculate the area of a circle:**
  - [ ] Use the formula $A = \pi r^2$
  - [ ] Where $r$ is the radius of the circle
  - [ ] And $\pi$ is approximately 3.14
  - [ ] Calculate the area for a circle with radius 5
  - [ ] Print the result
  - [ ] Use the `math` module to get the value of $\pi$

---

## Nested Task Lists

Parent tasks with child sub-tasks at multiple levels.

- [ ] **Project Setup:**
  - [ ] Accept the assignment on GitHub Classroom
  - [ ] Clone the repo in VS Code:
    1. Copy the repo URL
    2. Open VS Code and go to **File > New Window**
    3. Click **Clone Repository**, paste the URL
  - [ ] Create three files: `main.py`, `utils.py`, and `tests.py`

- [ ] **Implementation:**
  - [ ] **Step 1:** Create the data model
    - [ ] Define a `Student` class
    - [ ] Add `name`, `grade`, and `courses` fields

  - [ ] **Step 2:** Write the main logic
    - [ ] Read input from the user
    - [ ] Validate the input
    - [ ] Print the results

---

## Deeply Nested

- [ ] **Level 1 parent**
  - [ ] Level 2 child
    - [ ] Level 3 grandchild with `code`
    - [x] Level 3 completed grandchild

  - [ ] Another level 2 child

---

## Mixed Content

Tasks alongside regular list items and other block content.

- [ ] **Read the instructions below:**

  > **Note:** Make sure you complete each step before moving on.

- [ ] Run the test suite and verify all tests pass
- Regular list item (not a task)
- Another regular item
- [ ] Final task: commit and push your work

---

[Back to demos](../index.path.md#demos)


---

## Backlinks

The following sources link to this document:

- [Task lists](/index.path.llm.md)