import requests

game = input("Pick.")

url = "https://steam2.p.rapidapi.com/search/" + game + "/page/1"

headers = {
    "X-RapidAPI-Key": "24662782b6msh7d95c7667aea623p12c71ajsnc0aa91d82aa9",
    "X-RapidAPI-Host": "steam2.p.rapidapi.com"
}

response = requests.get(url, headers=headers)

data = response.json()
first_item = data[00]
second_item= data[1]

title = first_item['title']
url = first_item['url']
img_url = first_item['imgUrl']
released = first_item['released']
review_summary = first_item['reviewSummary'].replace("<br>", " ")
price = first_item['price']

title2 = second_item['title']
url2 = second_item['url']
img_url2 = second_item['imgUrl']
released2 = second_item['released']
review_summary2 = second_item['reviewSummary'].replace("<br>", " ")
price2 = second_item['price']

print("Title:", title)
print("URL:", url)
print("Image URL:", img_url)
print("Released:", released)
print("Review Summary:", review_summary)
print("Price:", price)

print("Title:", title2)
print("URL:", url2)
print("Image URL:", img_url2)
print("Released:", released2)
print("Review Summary:", review_summary2)
print("Price:", price2)

Pick.Mario

---------------------------------------------------------------------------
KeyError                                  Traceback (most recent call last)
Input In [3], in <cell line: 22>()
     20 img_url = first_item['imgUrl']
     21 released = first_item['released']
---> 22 review_summary = first_item['reviewSummary'].replace("<br>", " ")
     23 price = first_item['price']
     25 title2 = second_item['title']

KeyError: 'reviewSummary'

%%html

<!DOCTYPE html>
<html>
<body>
  <button onclick="getGameInfo()">Get Game Info</button>
  <br><br>
  <h2>Game 1:</h2>
  <p id="title1"></p>
  <p id="url1"></p>
  <img id="img-url1" src="">
  <p id="released1"></p>
  <p id="review-summary1"></p>
  <p id="price1"></p>
  <br><br>
  <h2>Game 2:</h2>
  <p id="title2"></p>
  <p id="url2"></p>
  <img id="img-url2" src="">
  <p id="released2"></p>
  <p id="review-summary2"></p>
  <p id="price2"></p>

  <script>
    function getGameInfo() {
      const game = prompt("Pick.");

      const url = "https://steam2.p.rapidapi.com/search/" + game + "/page/1";

      const headers = {
        "X-RapidAPI-Key": "24662782b6msh7d95c7667aea623p12c71ajsnc0aa91d82aa9",
        "X-RapidAPI-Host": "steam2.p.rapidapi.com"
      };

      fetch(url, { headers })
        .then(response => response.json())
        .then(data => {
          const first_item = data[0];
          const second_item = data[1];

          const title = first_item.title;
          const url = first_item.url;
          const img_url = first_item.imgUrl;
          const released = first_item.released;
          const review_summary = first_item.reviewSummary.replace("<br>", " ");
          const price = first_item.price;

          const title2 = second_item.title;
          const url2 = second_item.url;
          const img_url2 = second_item.imgUrl;
          const released2 = second_item.released;
          const review_summary2 = second_item.reviewSummary.replace("<br>", " ");
          const price2 = second_item.price;

          document.getElementById("title1").textContent = "Title: " + title;
          document.getElementById("url1").textContent = "URL: " + url;
          document.getElementById("img-url1").src = img_url;
          document.getElementById("released1").textContent = "Released: " + released;
          document.getElementById("review-summary1").textContent = "Review Summary: " + review_summary;
          document.getElementById("price1").textContent = "Price: " + price;

          document.getElementById("title2").textContent = "Title: " + title2;
          document.getElementById("url2").textContent = "URL: " + url2;
          document.getElementById("img-url2").src = img_url2;
          document.getElementById("released2").textContent = "Released: " + released2;
          document.getElementById("review-summary2").textContent = "Review Summary: " + review_summary2;
          document.getElementById("price2").textContent = "Price: " + price2;
        })
        .catch(error => console.log(error));
    }
  </script>
</body>
</html>

%%html

<!DOCTYPE html>
<html>
<body>
  <input type="text" id="gameNameInput" placeholder="Enter game name">
  <button onclick="getGameInfo()">Get Game Info</button>
  <br><br>
  <div id="gameInfoContainer"></div>

  <script>
    function getGameInfo() {
      const gameName = document.getElementById("gameNameInput").value.trim();
      const gameCount = 10; // Number of games to retrieve

      const url = "https://steam2.p.rapidapi.com/search/" + gameName + "/page/1";
      const headers = {
        "X-RapidAPI-Key": "24662782b6msh7d95c7667aea623p12c71ajsnc0aa91d82aa9",
        "X-RapidAPI-Host": "steam2.p.rapidapi.com"
      };

      fetch(url, { headers })
        .then(response => response.json())
        .then(data => {
          const games = data.slice(0, gameCount);

          const gameInfoContainer = document.getElementById("gameInfoContainer");
          gameInfoContainer.innerHTML = ""; // Clear previous game information

          games.forEach((game, index) => {
            const title = game.title;
            const url = game.url;
            const img_url = game.imgUrl;
            const released = game.released;
            const review_summary = game.reviewSummary.replace("<br>", " ");
            const price = game.price;

            const gameIndex = index + 1;

            const gameDiv = document.createElement("div");
            gameDiv.innerHTML = `
              <h2>Title ${gameIndex}: ${title}</h2>
              <p>URL: ${url}</p>
              <img src="${img_url}">
              <p>Released: ${released}</p>
              <p>Review Summary: ${review_summary}</p>
              <p>Price: ${price}</p>
              <br><br>
            `;

            gameInfoContainer.appendChild(gameDiv);
          });
        })
        .catch(error => console.log(error));
    }
  </script>
</body>
</html>

Hacks

One key to these hacks is to build confidence with me going into final grade, I would like to see each student adapt this frontend work in their final project. Second key is the finished work can serve as review for the course, notes for the future in relationship to frontend.

Adapt this tutorial to your own work

Consider what you need to work on to be stronger developer

Show something creative or unique, no cloning

Be ready to talk to Teacher for 5 to 10 minutes. Individually!!!

Show in Jupyter Notebook during discussion, show Theme and ChatGPT

Have a runtime final in GithHub Pages (or Fastpage)