API Database

My group initially agreed that I was one of the two members to work on the frontend. However,I ended up doing some backend work anyway. This included our initial database for the API.

pokemon_list = [
    {
        "name": "Bulbasaur",
        "hp": 9,
        "attack": 7,
        "height": "28",
        "weight_in_lbs": "15.2",
        "abilities": "Overgrow",
        "type": "Grass/Poison",
        "weakness": ["Fire", "Psychic", "Ice", "Flying"]
    },
    {
        "name": "Ivysaur",
        "hp": 13,
        "attack": 8,
        "height": "39",
        "weight_in_lbs": "28.7",
        "abilities": "Overgrow",
        "type": "Grass/Poison",
        "weakness": ["Fire", "Psychic", "Ice", "Flying"]
    },
    {
        "name": "Venusaur",
        "hp": 14,
        "attack": 9,
        "height": "79",
        "weight_in_lbs": "220.5",
        "abilities": "Overgrow",
        "type": "Grass/Poison",
        "weakness": ["Fire", "Psychic", "Ice", "Flying"]
    },
    {
        "name": "Charmander",
        "hp": 7,
        "attack": 8,
        "height": "24",
        "weight_in_lbs": "18.7",
        "abilities": "Blaze",
        "type": "Fire",
        "weakness": ["Water", "Rock", "Ground"]
    }
]

This is a small excerpt from the database, it includes the first 100 pokemon and related data from the official Pokédex. Writing all of this by hand would be extremely time consuming, so I engineered AI to do it for me.

However this didn’t work flawlessly, I was required to have it fill in the format in sections of 18-19 Pokémon due to cell size requirements within the ChatGPT site.

Frontend Design

I worked on the front end of the project a lot, and one of my jobs was to help create the front page’s tables, buttons, and overall look.

The following shows some of the work I did in CSS to create the apearance of the website.

/* Style the table rows and cells / tr:nth-child(odd) { background-color: #1A6EB2; / Color for even rows / color: #FFC805; / Text color for even rows */ }

tr:nth-child(even) { background-color: #94D1EF; /* Color for odd rows / color: #B3A125; / Text color for odd rows */ }

tr:hover { background-color: #345698; /* Color on hover */ }

/* Style the upvote and downvote buttons / button { background-color: #3B4CCA; color: white; border: none; padding: 5px 10px; cursor: pointer; transition: background-color 0.3s; border-radius: 50px; / Rounded buttons */ }

button:hover { background-color: #FFC805; /* Yellow on hover */ }

I utilized tools and informations I learned in Photography at Del Norte to create the design for the page. This included analyizing the Pokemon color pallete and using color theory to perfect the look of the website.

card

Table Sorting

A large portion of the time I spent on the project was directed toward the sites table sorting mechanism. It included a drop down with three methods of sorting ID (default), highest rated, and lowest rated. The code was wrote in Javascript and called in the index.md in markdown. Ultimately this code did not make the final cut. There was too much work to be done to get it working, and it was impossible to troubleshoot and debug with the AWS API being down.

Passion

The following code cell displays what I had written for the table sorting mechanism.

// Function to sort and update the table based on the selected option
function sortAndRenderTable(sortBy) {
  const rows = Array.from(resultContainer.getElementsByTagName('tr'));

  // Remove the header row from the sorting process
  const headerRow = rows.shift();

  // Sort the rows based on the selected option
  if (sortBy === "upvote") {
    // Sort by Upvotes
    rows.sort((a, b) => {
      const aUpvote = parseInt(a.getElementsByTagName('td')[1].getElementsByTagName('button')[0].innerHTML);
      const bUpvote = parseInt(b.getElementsByTagName('td')[1].getElementsByTagName('button')[0].innerHTML);
      return bUpvote - aUpvote; // Sort in descending order (highest Upvotes first)
    });
  } else if (sortBy === "downvote") {
    // Sort by Downvotes
    rows.sort((a, b) => {
      const aDownvote = parseInt(a.getElementsByTagName('td')[2].getElementsByTagName('button')[0].innerHTML);
      const bDownvote = parseInt(b.getElementsByTagName('td')[2].getElementsByTagName('button')[0].innerHTML);
      return bDownvote - aDownvote; // Sort in descending order (highest Downvotes first)
    });
  } else if (sortBy === "poke_id") {
    // Sort by ID (poke_id)
    rows.sort((a, b) => {
      const aId = parseInt(a.getElementsByTagName('td')[0].innerText.split(". ")[0]);
      const bId = parseInt(b.getElementsByTagName('td')[0].innerText.split(". ")[0]);
      return aId - bId; // Sort in ascending order (lowest ID first)
    });
  }

  // Clear the current table content
  resultContainer.innerHTML = '';

  // Add the header row back to the table
  resultContainer.appendChild(headerRow);

  // Append the sorted rows to the table
  rows.forEach(row => {
    resultContainer.appendChild(row);
  });
}

Code Explained:

Define a function named sortAndRenderTable to sort and update the table based on the selected option.
Create an array rows containing all rows in the resultContainer.
Remove the header row from the sorting process and store it in headerRow.
Check the selected sorting option (sortBy) to determine how to sort the rows.
If sortBy is “upvote,” sort the rows by Upvotes in descending order (highest Upvotes first).
Extract Upvote values from the rows and compare them to determine the sorting order.
If sortBy is “downvote,” sort the rows by Downvotes in descending order (highest Downvotes first).
Extract Downvote values from the rows and compare them to determine the sorting order.
If sortBy is “poke_id,” sort the rows by ID (poke_id) in ascending order (lowest ID first).
Extract ID values from the rows by splitting the inner text of the td element in each row and convert them to integers.
Use a comparison function to sort the rows in ascending order based on ID.
Clear the current table content by emptying the resultContainer.
Add the header row back to the table.
Append the sorted rows to the table, updating the visual display of the sorted table.

Pokédex Passion Project Contributions • 14 min read

Description

API Database

Frontend Design

Table Sorting