Live Review Ticket

A series of things that I have done in order to prepare myslef timely for the Pair Showcase and going through each specific problems, accomlishments, and goals throughout the first three weeks of CSP.

Plans

I made plans for each week of CSP so that it’s easier for me to stay on task, know what I’m supposed to be doing throughout the week, and make it easier to catch up to any work I might have fell behind on. It also allows me to make sure I have everything that’s supposed to completed on time. Each of the plans can be found in my Time Box and all of them are filled with my specific plans for that week.

Linux and Interaction in VScode

Linux commands I commonly use and others that are used in order check installed software

#!/bin/bash
# Function to check if a program is installed and at least a minimum version
check_program_version() {
    local program_name="$1"
    local min_version="$2"
    # Check if the program is installed
    if ! command -v "$program_name" > /dev/null 2>&1; then
        echo "$program_name is not installed."
        return 1
    fi
    # Get the program's version
    local version
    version="$("$program_name" --version | awk '{print $NF}')"
    # Compare the version to the minimum required version
    if [[ "$version" < "$min_version" ]]; then
        echo "Error: $program_name version $min_version or higher is required, but you have $version."
        return 1
    fi
}
# Check Python and its version
check_program_version "python" "3.6"
# Check Jupyter and its version
check_program_version "jupyter" "1.0"
# Check Ruby and its version
check_program_version "ruby" "2.5"
# Check Jekyll and its version
check_program_version "jekyll" "4.0"
# If all checks passed, display a success message
echo "All required programs and versions are installed."

Python and Interaction in VScode

Below are the examples of Python in my VScode. I made a game and a quiz and more in depth descriptions will be found in the information below.

Python Snake Game

In my Time Box I have a link to the classic snake game, coded entirely with Python. At first the code made it so that the snake and the food the snake eats is the same color, white, but I changed the code so that only the red would turn red. Making it much easier to differentiate the snake’s body to the food. At first there was problem with both the snake and food turning red but that was because the food and the snake weren’t seperate in the code; after making them seperate it fixed the problem.

Snake score: 0

Welcome to Snake, press space to begin

new game settings

Game Over, press space to try again

new game settings

Settings Screen, press space to go back to playing

new game

Speed:

Wall:

Python Quiz

This is a short quiz on the vocab found in the teacher’s Python IO blog. The original code for the quiz was very long and repetitive at times so what I did was make the original code more concise by adding lists, redefining variables, and I added a percentage calculator as well. The quiz worked very well and the only reason why my teamates’ quizzes are different is because they decided to make a new type of quiz through replit. They made the quiz as a multiple choice test instead.

import getpass, sys
# new function returns a boolean value that determines whether or not the answer is right. Eliminates the need for if else blocks to check answers
def question_with_response(prompt, answer):
    print("Question:", prompt)
    msg = input()
    return msg == answer
# I put the questions and asnwers in a list and their corresponding answers as tuples. This gets rid of the use of rsp which was very repetitive in the original code
questions = [
    ("What command is used to include other functions that were previously developed?", "import"),
    ("What command is used to evaluate correct or incorrect response in this example?", "if"),
    ("Each 'if' command contains an '_________' to determine a true or false condition?", "expression")
]

correct = 0
# I used F strings to format this message to make the strings below much more concise and so that there's no need to insert the pluses
print(f'Hello, {getpass.getuser()} running {sys.executable}')
print(f'You will be asked {len(questions)} questions.')
question_with_response("Are you ready to take a test?", "yes")
# Here, instead of the repetitive if else block, I put everything in a loop that goes through each question in the list.
for prompt, answer in questions:
    if question_with_response(prompt, answer):
        print(f'{answer} is correct!')
        correct += 1
    else:
        print(f'{answer} is incorrect!')
# You can calculate the score using len(questions) and the function labled as the variable percentage
total_questions = len(questions)
percentage = (correct / total_questions) * 100
print(f'{getpass.getuser()}, you scored {correct}/{total_questions} ({percentage:.2f}%)')


Hello, dslee187 running /bin/python
You will be asked 3 questions.
Question: Are you ready to take a test?
Question: What command is used to include other functions that were previously developed?
import is correct!
Question: What command is used to evaluate correct or incorrect response in this example?
if is correct!
Question: Each 'if' command contains an '_________' to determine a true or false condition?
expression is correct!
dslee187, you scored 3/3 (100.00%)

Web Interaction in Java Script

JS Output with jquery

Below is the table that I made and customized using Java

%%html

Player Position Trohpy Count Goals Assists
Christiano Ronaldo Striker 34 847 268
Heung-min Son Winger 1 231 97
Lionel Messi Winger 43 820 325
Rio Ferdinand Central Defender 16 16 3
Neymar Jr. Winger 30 437 201
Sergio ramos Central Defender 30 133 33
Roberto Carlos Left Back 21 117 13
Zinedine Zidane Midfielder 14 156 48
Ji-sung Park Midefielder 2016 60 20
Marcelo Left Back 25 54 94
Ronaldinho Winger 14 295 95

JS Ouput with API

Below is a similar code to the one found in the teacher’s JS Output blog but revised and cusomized to my preferences. I changed the API to a sample one online and I thought the theme of coffee was a really good choice because my parents love coffeee, I’m somewhat of a fan, and the out below shows all types of different coffees and their ingrediants. I changed the table id to match what the output was about and adjusted the table headers to match the data from the table. And upon reviewing this code with ChatGPT, it have me way to insert an image source so that the image links would actually show the image in the table.

%%html
<html>
<head>
    <!-- Load jQuery and DataTables styles and scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="coffeeTable" class="table" style="width:100%">
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Ingredients</th>
            <th>Image</th>
        </tr>
    </thead>
    <tbody id="coffeeBody"></tbody>
</table>

<script>
  $(document).ready(function() {
    fetch('https://api.sampleapis.com/coffee/hot', { mode: 'cors' })
    .then(response => {
      if (!response.ok) {
        throw new Error('API response failed');
      }
      return response.json();
    })
    .then(data => {
      for (const coffee of data) {
        // Populate the table with coffee data
        $('#coffeeBody').append('<tr><td>' + 
            coffee.title + '</td><td>' + 
            coffee.description + '</td><td>' + 
            coffee.ingredients.join(', ') + '</td><td>' + 
            '<img src="' + coffee.image + '" alt="' + coffee.title + '" height="100"></td></tr>');
      }
      // Initialize DataTables for the table
      $("#coffeeTable").DataTable();
    })
    .catch(error => {
      console.error('Error:', error);
    });
  });
</script>
</body>
</html>
Title Description Ingredients Image

Chat GPT Review

Below are some of the feedback I got for my code after asking ChatGPT to review it for me. It helped me perfect my code and make sure that I add certain features that would enhance the functionality of my code. Below are some some suggestions chat gpt gave me about my code for the JS table with API. I made these changes and they helped a lot: Your code looks well-structured and should work as expected to fetch data from the coffee API and populate an HTML table with the DataTables jQuery plugin. Here’s your code with some minor revisions for readability:

Revisions made: Used template literals for string concatenation in the append function for improved readability. Overall, the code remains functionally the same, but it’s more concise and easier to read with these revisions. This code should effectively fetch data from the coffee API and display it in the HTML table using DataTables.