Hack I

Making this my own by explaining what this code does in my own words

<head>
    <!-- load jQuery and DataTables syle 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>var define = null;</script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<table id="flaskTable" class="table" style="width:100%">
    <thead id="flaskHead">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>DOB</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody id="flaskBody"></tbody>
</table>

<script>
  $(document).ready(function() {
    fetch('https://flask.nighthawkcodingsociety.com/api/users/', { mode: 'cors' })
    .then(response => {
      if (!response.ok) {
        throw new Error('API response failed');
      }
      return response.json();
    })
    .then(data => {
      for (const row of data) {
        // BUG warning/resolution - DataTable requires row to be single append
        $('#flaskBody').append('<tr><td>' + 
            row.id + '</td><td>' + 
            row.name + '</td><td>' + 
            row.dob + '</td><td>' + 
            row.age + '</td></tr>');
      }
      // BUG warning - Jupyter does not show Datatable controls, works on deployed GitHub pages
      $("#flaskTable").DataTable();
    })
    .catch(error => {
      console.error('Error:', error);
    });
  });
</script>

Explaining the code:

  1. HTML Structure:

    • In the <head> section, external resources are loaded: jQuery, DataTables CSS, and DataTables JavaScript.
    • A <table> element with the id “flaskTable” is defined. It has both a header <thead> and a body <tbody>.

  2. JavaScript and jQuery Code:

    • The code is wrapped in a $(document).ready() function, ensuring that it runs once the DOM (Document Object Model) is fully loaded.

    • It uses the fetch API to make a GET request to the specified URL (https://flask.nighthawkcodingsociety.com/api/users/) with CORS enabled.

    • The code checks if the API response is okay. If not, it throws an error.

    • If the response is successful, it converts the response data to JSON.

    • It then iterates over the JSON data and appends it to the table’s body. Each row from the API is converted into an HTML table row (<tr>) with four columns containing the user’s ID, name, date of birth, and age.

    • Finally, it initializes the DataTable on the table with the id “flaskTable.” DataTables is a jQuery plugin that enhances the functionality and appearance of HTML tables, providing features like sorting, searching, and pagination.

  3. Extra:

    • There’s a script tag <script>var define = null;</script> that defines a variable define as null. This seems unrelated to the main functionality and may be leftover or used for some specific purpose in the context where this code is deployed.

    • A comment mentions a bug warning/resolution regarding DataTables requiring rows to be appended one at a time. This is why each row is constructed and appended individually in the loop.

    • There’s a comment about Jupyter not showing DataTable controls but it working on deployed GitHub pages. This indicates that the code may have been tested in different environments, and DataTables might have different behavior depending on where it’s used.

Hack II:

Consider what you need to work on to be stronger developer

After my experience with CSP, I have reflected on myself as well as sought out guidance from Mr. Mortensen and have summarized that what I need to do to become a stronger developer is:

  • Follow instructions no matter which ones I think aren’t necessary.
  • Play my role out in a team so that I’m able to execute my vision without relying on anyone else.
  • Only help others when I myself have completed my own work as well as understood what it is I did.
  • Turn in work on time, no procrastinating.
  • Use class time with more maturity and save goofing off for when ALL work is completed.

Hack III:

Show something creative or unique, no cloning

Runtime

Although this does indeed use an old API (I could not find any free and appropriate ones) and uses old code, this is honestly the first time I was able to code an API fetch and actually understand what was going on. First, we fetch the code using the fetch() method, then set its parameters with .then(response), .then(data), and .catch(error). I am still excited by the fact that one can use python to create a SQL & JSON database, then turn that data into an HTML document with JavaScript. All these pieces coming together to make one big picture. It’s fascinating to me. Me being able to program AND understand how to fetch from an API is a milestone for me, and is part of the first steps of me becoming a stronger developer.

Hacks IV, V, & VI

Show in Jupyter Notebook during discussion, show Theme and ChatGPT. Have a runtime final in GithHub Pages (or Fastpage)

Notebook

ChatGPT

Takeaways:

  • I will practice API fetching more and understanding how to use/create API’s as well as how to manipulate existing code to customize what I do with the data
  • I will continue to prove my becoming of a stronger developer by committing to the things I listed above in Hack II.
  • I still have a long way to go. Although it won’t be easy, I will be able to accomplish in this class using what I’ve reflected on myself.