JS Itunes API, JS Input, JS Output w/jquery, JS Output w/API.

JS Grade Average Calculator (JS Input)

Explaining Functions and what they do!

  1. newInputLine(index): This function creates a new input box for scores, labels it, and sets it up to receive numeric input. It also handles setting the focus on the new input.
  2. calculator(event): This function calculates the total, count, and average of entered scores when the “Tab” or “Enter” key is pressed. It updates the webpage with these values and adds a new input box if all previous scores are valid numeric values.
  3. window.onload: This event ensures the first input box is created when the webpage loads, allowing users to start entering scores.

JavaScript Calculator For Grades

Crypto Price Table with Market Ciruculation (JS Output w/jquery)

Cryptocurrency Data Table

This Markdown code snippet represents an HTML table used to display information about the top 10 cryptocurrencies. Here’s a breakdown of its structure:

  • The <table> tag starts the table.
  • Inside, there’s a <thead> section for column headers defined using <th> tags.
  • The </thead> tag closes the header section.
  • The <tbody> section contains data rows with each row enclosed in <tr> tags.
  • In each data row, you use <td> tags for actual data cells.
  • Finally, the </tbody> and </table> tags close the table.

This format helps organize and to present cryptocurrency prices and data neatly on a blog like mine.

Crypto Currency Table Using JS Output/jquery

JS Output with API

Javascript Wikipedia Search with API

Wikipedia Search Summary Code Explained

HTML

  1. HTML Head
    • Sets up important settings and the title for the web page.
  2. HTML Body
    • Holds the content, like the search box and area to show Wikipedia summaries.

CSS

  1. Global Styles
    • Makes the whole page and buttons look nice.
  2. Specific Styles
    • Makes the summary area and its text look nice.

JavaScript

  1. searchWikipedia() Function
    • Runs when you click the “Search” button to get Wikipedia info.
  2. Get Search Term
    • Grabs what you typed in the search box.
  3. Get Summary Area
    • Finds the area where the summary will show up.
  4. Clear Old Summary
    • Removes any old summary so the new one can show.
  5. Make API URL
    • Puts together the web address to get Wikipedia data.
  6. Fetch Data
    • Goes to Wikipedia to get the summary.
  7. Turn Into JSON
    • Makes the fetched data easy to work with.
  8. Show Summary
    • Takes the Wikipedia summary and puts it on the web page.
  9. Catch Errors
    • If something goes wrong, it shows an error message.

Wikipedia Search Bar

Python Tricks

Wikipedia Calls with API

This is a simple Python program that uses the wikipedia library to provide a summary or a list of search results for a given topic.

How it Works

  1. Import Wikipedia
    • Imports the wikipedia library to use Wikipedia’s features.
  2. Function multiple_choice()
    • Main function of the program.
    • User Choice: Asks you to choose between getting a summary (“A”) or doing a search (“B”).
    • If ‘A’: If you choose “A”, it asks you what topic you want a summary of, then prints the Wikipedia summary.
    • Else: If you choose anything other than “A”, it assumes you want to search. It asks what you want to search for, then prints a list of matching Wikipedia articles.
  3. Run Function
    • Runs the multiple_choice() function to start the program.

When you run this code, it will ask you to choose between getting a summary or searching for a topic on Wikipedia, and then show you the results. ‘’’

Python Tricks Wikipedia Search Interactive in VSC

Python IO

Custom Quiz About Simple Python Functions

Quiz project in python

How to build your own quiz in python

In python there are a variety of ways to code a quiz. You can use basic print statements and input functions or you can use for loops to make the same quiz more concise.

The provided code is a basic quiz program that interacts with users. Here are the elements that make up most of the code:

  • import getpass, sys: This imports the modules.

  • def question_with_answers(prompt): This defines a function that prints a question, collects user input as an answer, and stores the answer

  • questions = 3: This is the total number of questions in the quiz.

  • correct_answers = 0: This variable keeps track of the amout of correct answers.

  • question_list: This list contains the questions for the quiz.

  • ans_list: This list holds the correct answers corresponding to the questions.

  • The for loop iterates over each question:

    • rsp = question_with_answers(question_list[i]): This line asks the user a question and stores their response into a variable

    • if ans_list[i] == rsp:: This checks if the user’s response matches the correct answer.

      • If the answer is correct, correct_answers added by one, and a success message is displayed.

      • If the answer is incorrect, an print message is shown to help them know they got the question wrong

  • At the end code displays a completion message for the quiz and calculates the user’s percentage score.

Python Quiz About Functions

Personal Project, Working with Python And APIs

Talk to ChatGPT on VSC using an API!

Python Code to Interact with OpenAI’s Davinci Engine Explained

Import Statements

  1. import requests: Imports the requests library for making HTTP requests.
  2. import json: Imports the json library for handling JSON data.

Function Definition

  1. def chat_with_gpt(prompt):: Defines a function called chat_with_gpt that takes a prompt as an argument.

API Configuration

  1. api_key = 'your_openai_api_key_here': Sets your OpenAI API key as a variable. Replace this with your actual API key.
  2. headers = {...}: Sets up the headers needed for the API request, including the API key for authorization and the content type as JSON.

API Payload

  1. data = {...}: Sets up the data payload to send to the API. It includes the prompt and a limit on the response tokens (set to 100).

API Request

  1. response = requests.post(...): Makes a POST request to the OpenAI API’s Davinci engine endpoint, passing in the headers and data.

Response Handling

  1. if response.status_code == 200:: Checks if the API request was successful (HTTP status 200).
    • return response.json()['choices'][0]['text'].strip(): If successful, extracts and returns the generated text.
  2. else:: If the API request was not successful,
    • return f"Error: {response.status_code}, {response.json()['error']['message']}": Returns an error message.

We Paid For API to explore more into coding. This was a fun project for my partner and I!

Chat GPT in Python VSC

Snake Game

Game of Snake in JavaScript

Snake Game

Movie Search in Javascript

Made in JavaScript, HTML and CSS

Functions Explanation

1. fetchMovieData(searchTerm)

  • Fetches movie/TV series data from TMDb API based on the search term.
  • Extracts relevant info like title, overview, ratings, etc.
  • Updates the page with the fetched data.

2. getGenre(genreIds)

  • Converts genre IDs to genre names using a predefined mapping.

3. getMPAARating(contentRatings)

  • Gets the MPAA rating from content ratings using a mapping.
  • Provides “N/A” if no rating is available.

4. getOriginalLanguage(languageCode)

  • Translates language codes to full language names using a mapping.
  • Provides “N/A” for unknown language codes.

5. formatDate(dateString)

  • Formats a given date string as “Month/Day/Year”.
  • Shows “N/A” if no date is provided.

6. getYouTubeTrailerLink(searchTerm)

  • Creates a YouTube search link for movie/TV series trailers.
  • Adds “trailer” to the search term and handles spaces.

Movie Searcher

Game Project Inspiration with Snake Game

Ping Pong Game Wtih NPC

Canvas Setup

  • The HTML canvas element is created with the ID “pongCanvas.”
  • The canvas is where the game graphics will be drawn.

JavaScript Script

  • Within the <script> tags, JavaScript code handles the game logic and drawing.

Retrieve Canvas Context

const canvas = document.getElementById('pongCanvas');
Constants and Variables
  • Defines constants and variables for paddle and ball properties, including positions, sizes, speeds, and more.
drawRect(x, y, width, height, color)
  • Function to draw rectangles on the canvas.
  • Uses the fillStyle property to set the color and fillRect method to draw the rectangle.
drawCircle(x, y, radius, color) (For Ping Pong Ball)
  • Function to draw circles (for the ball) on the canvas.
  • Uses the fillStyle property, begins a path with arc, and fills the circle.
draw() function
  • The main game rendering function.
  • Clears the canvas, draws the paddles and ball, updates ball position, handles collisions, updates bot AI, and calls itself again using requestAnimationFrame.
Arrow Key Event Listeners
  • Adds event listeners for the “keydown” event (when a key is pressed).
  • Adjusts the playerY based on arrow key presses.
Start the Game Loop
  • Calls the draw() function to start the game loop.
  • The game continuously renders frames as long as draw() keeps calling itself.

Ping Pong Game with Bot

Stock with Ticker

Ticker of and Stock symbol Graph

Stock Ticker Mini Graph

A simple JavaScript project that fetches stock data using Alpha Vantage API and displays it as a mini graph on a canvas.

Stock Ticker Grapher - Will be explaining in actual file because I don’t want to write it here again :d

Proof of Feedback with Partners :)