Task Lists Demo

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

Simple Tasks

• A plain unchecked task
• 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
• Italic task followed by bold and code as well as a highlight
• How about a task with html tags?

Tasks with Block Content (Pattern A)

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

• Print a Welcome Banner:
  • Print a banner using string multiplication:

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

  • Print a closing message
• Collect User Info:
  • Prompt the user with:

    input("Your name: ")
    

    and store the response in a variable name.

  • Prompt the user with:

    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.
• 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:

  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
    • 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