Python Draft

Simple python code to append tasks to a list

tasks = [] 

def add_task(task):
    tasks.append(task)  # add the task to the list
    print("Tasks:")
    for i, task in enumerate(tasks):
        print(f"{i + 1}. {task}")  # display the tasks with numbers

while True:
    task = input("Enter a task (or 'q' to quit): ")
    if task.lower() == "q":
        break  # exit the loop if 'q' is entered
    add_task(task)

print("Final task list:")
for i, task in enumerate(tasks):
    print(f"{i + 1}. {task}")  # display final list of tasks

Tasks:
1. Car washing
Tasks:
1. Car washing
2. Algebra tutoring
Tasks:
1. Car washing
2. Algebra tutoring
3. Buy groceries
Final task list:
1. Car washing
2. Algebra tutoring
3. Buy groceries

Attempt at alphabetical sort in python

This sorting algorithm swaps adjacent elements without considering their values or any sorting condition
It ignores the alphabetical comparison logic required for a proper alphabetical sort, causing the sorting function to fail

Using bubble sort

Allows the tasks to be sorted alphabetically
The ASCII values are aligned with the alphabetical order
Iterates through the list of tasks
Checks if the first element is less than the second and if it is not swap them
For loop used to keep going until each element is less than or equal to the next

def sort_tasks():
    n = len(tasks)
    for i in range(n - 1):
        for j in range(n - i - 1):
            if tasks[j] > tasks[j + 1]:
                tasks[j], tasks[j + 1] = tasks[j + 1], tasks[j]

print("Before sorting:")
for i, task in enumerate(tasks):
    print(f"{i + 1}. {task}")  # Display tasks before sorting

sort_tasks()  # Sort the tasks

print("\nAfter sorting:")
for i, task in enumerate(tasks):
    print(f"{i + 1}. {task}")  # Display the sorted tasks

Before sorting:
1. Car washing
2. Algebra tutoring
3. Buy groceries

After sorting:
1. Algebra tutoring
2. Buy groceries
3. Car washing

JavaScript Table

Creates an empty array called tasks to store the tasks
Defines a function called addTask() that adds the entered task to the tasks array
Retrieves the input field value, trims it, and adds it to the tasks array if it is not empty

Display Tasks

The displayTasks() function to update the table with the current list of tasks
Retrieves the table's body element and clears its content
Iterates over the tasks array, creating a new row for each task and populating it with task information
Appends each row to the table's body

%%html

<html>
<head>
    <title>Task Notecard</title>
    <style>
        /* CSS for the table */
        table {
            border-collapse: collapse;
            width: 100%;
        }
        
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        /* CSS for the input and buttons */
        input[type="text"], button {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Task Notecard</h1>
    <input type="text" id="taskInput" placeholder="Enter a task">
    <button onclick="addTask()">Add Task</button>
    <button onclick="sortTasks()">Sort Tasks</button>

    <table id="taskTable">
        <thead>
            <tr>
                <th>#</th>
                <th>Task</th>
            </tr>
        </thead>
        <tbody id="taskList">
        </tbody>
    </table>

    <script>
        var tasks = [];

        function addTask() {
            var taskInput = document.getElementById("taskInput");
            var task = taskInput.value.trim();
            if (task !== "") {
                tasks.push(task);
                taskInput.value = "";
                displayTasks();
            }
        }

        function sortTasks() {
            // bubble sort algorithm
            var len = tasks.length;
            for (var i = 0; i < len - 1; i++) {
                for (var j = 0; j < len - 1 - i; j++) {
                    if (tasks[j] > tasks[j + 1]) {
                        var temp = tasks[j];
                        tasks[j] = tasks[j + 1];
                        tasks[j + 1] = temp;
                    }
                }
            }
            displayTasks();
        }

        function displayTasks() {
            var taskList = document.getElementById("taskList");
            taskList.innerHTML = "";

            for (var i = 0; i < tasks.length; i++) {
                var row = document.createElement("tr");

                var indexCell = document.createElement("td");
                indexCell.textContent = i + 1;
                row.appendChild(indexCell);

                var taskCell = document.createElement("td");
                taskCell.textContent = tasks[i];
                row.appendChild(taskCell);

                taskList.appendChild(row);
            }
        }
    </script>
</body>
</html>

The outer loop, controlled by the variable i, determines how many passes the sorting algorithm should make. It starts from the beginning of the array and goes up to the second-to-last element.
Inside the outer loop, there is an inner loop that uses the variable j as a counter. The purpose of this inner loop is to compare adjacent elements and swap them if they are out of order.

Change the background color

The <body> section contains an <input> element where the user can enter a color value.
The input element by its id and assigns it to the input variable.
The code then adds an event listener to the input element using input.addEventListener('input', () => { ... });.
When the user types into the input element, the event listener's callback function is triggered.
Inside the callback function, the value entered by the user is captured in the color variable.
Finally, the background color of the body element is updated to the entered color using document.body.style.backgroundColor = color;.

%%html

<html>
<head>
  <title>Colorful Background</title>
  <style>
    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;
      transition: background-color 0.5s ease;
    }

    #input {
      text-align: center;
      font-size: 24px;
      padding: 10px;
      border: none;
      background-color: transparent;
      color: #fff;
    }
  </style>
</head>
<body>
  <input id="input" type="text" placeholder="Enter a color">
  
  <script>
    const input = document.getElementById('input');
    
    input.addEventListener('input', () => {
      const color = input.value;
      document.body.style.backgroundColor = color;
    });
  </script>
</body>
</html>