Code #1: Base64 Image Encryption

Did not to make final verision of project
Originally going to used on the backsides of Pokemon Cards

Purpose

Originally part of the API model on the backend
Needed to be used because images can’t directly be sent from backend to frontend
Plan was to encrypt as text on backend then decrypt on frontend to view image completley

import base64

# Define a function to convert an image to a base64 representation
def image_to_base64(image_path):
    # Open the image file in binary read ('rb') mode
    with open(image_path, 'rb') as image_file:
        # Read the binary data of the image
        image_binary = image_file.read()
        # Encode the binary data as base64 and decode it to a UTF-8 string
        base64_data = base64.b64encode(image_binary).decode('utf-8')
        # Return the base64-encoded data
        return base64_data

# Call the function to get the base64 representation of the image
charmander_image = image_to_base64("/home/ronit/vscode/CSP_BLOG_RT/images/charmander.jpg")
print(charmander_image)

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

Code #2: Pokemon API

Learned a lot on how API’s are used with different individual classes for different purposes
Made this code to set up our API on the backend and to get the links working

from flask import Blueprint, jsonify  # jsonify creates an endpoint response object
from flask_restful import Api, Resource # used for REST API building
import requests  # used for testing 
import random
#importing our own self-made API
from model.pokemons import *

pokemon_api =  Blueprint('pokemon_api', __name__,
                   url_prefix='/api/pokemons')

#Defining our api as the pokemon API
api = Api(pokemon_api)

#Defining Pokemon Class
class PokemonsAPI:
    
    class _Create(Resource):
        def post(self, pokemon):
            pass
# Defining functinos to Read the pokemon information, reads information for all the classes and definations
    class _Read(Resource):
        def get(self):
            return jsonify(getPokemons())
        
    class _ReadID(Resource):
        def get(self, id):
            return jsonify(getPokemon(id))
    
    class _ReadRandom(Resource):
        def get(self):
            return jsonify(getRandomPokemon())
        
    class _ReadCount(Resource):
        def get(self):
            count = countPokemons()
            countMsg = {'count': count}
            return jsonify(countMsg)
    
# Updating Upvotes on the side and making take effect
    class _UpdateUpVote(Resource):
        def put(self, id):
            addUpVote(id)
            return jsonify(getPokemon(id))
#Updating Downvotes on the site and making it actually take effect
    class _UpdateDownVote(Resource):
        def put(self, id):
            addDownVote(id)
            return jsonify(getPokemon(id))  
        
# Defining URLS for all of the api subpages
    api.add_resource(_Create, '/create/<string:pokemon>')
    api.add_resource(_Read, '/')
    api.add_resource(_ReadID, '/<int:id>')
    api.add_resource(_ReadRandom, '/random')
    api.add_resource(_ReadCount, '/count')
    api.add_resource(_UpdateUpVote, '/upvote/<int:id>')
    api.add_resource(_UpdateDownVote, '/downvote/<int:id>') 
    
# Server URL stuff to create actual pathway to site
if __name__ == "__main__": 
    
    server = 'https://flask.nighthawkcodingsociety.com' # run from web
    url = server + "/api/pokemons"
    responses = [] 
    
    #adding code to make sure the upvotes, downvotes and get information run and work properly
    count_response = requests.get(url+"/count")
    count_json = count_response.json()
    count = count_json['count']
    
    num = str(random.randint(0, count-1)) # test a random record
    responses.append(
        requests.get(url+"/"+num)  # read pokemon by id
        ) 
    responses.append(
        requests.put(url+"/upvote/"+num) # add to upvote count
        ) 
    responses.append(
        requests.put(url+"/downvote/"+num) # add to downvote count
        ) 
    
    responses.append(
        requests.get(url+"/random")  # read a random pokemon
        ) 
    
    for response in responses:
        print(response)
        try:
            print(response.json())
        except:
            print("unknown error")

Code #3: Javascript Frontend Design (Not CSS)

Learned about how its common practice to have three files: .js, .md, and style.css
Each has its own purpose to create an interavtive site.
Javascript is important for creating a site where everything is interactive

window.onload = function () {
    var pack = document.getElementById("pokemon-pack");
    pack.addEventListener("click", openPack);
}

var pokemonData = []; // Initialize the variable to store data

function fetchAPIdata() {
    // You should replace this URL with your actual API endpoint to fetch image data.
    const apiUrl = 'http://127.0.0.1:8086/api/pokemons/';

    // Make an HTTP GET request to the API
    return fetch(apiUrl)
        .then(response => response.json()) // Parse the JSON response
        .then(data => {
            pokemonData = data; // Store the data as it is
            console.log(pokemonData[0].image);
            // Call moveTarget immediately to position the dot at the first location
        })
        .catch(error => {
            console.error("Error fetching images:", error);
        });
}

function fetchRandomName() {
    // You should replace this URL with your actual API endpoint to fetch image data.
    const apiUrl = 'http://127.0.0.1:8086/api/pokemons/random';

    // Make an HTTP GET request to the API
    return fetch(apiUrl)
        .then(response => response.json()) // Parse the JSON response
        .then(data => {
            return data; // Return the entire randomPokemonData
        })
        .catch(error => {
            console.error("Error fetching data:", error);
        });
}

async function openPack() {
    var pack = document.getElementById("pokemon-pack");
    pack.style.display = "none";

    // Create an array to store promises for fetch requests
    var fetchPromises = [];

    for (let i = 0; i < 11; i++) {
        fetchPromises.push(fetchRandomName());
    }

    // Use Promise.all to wait for all fetch requests to complete
    Promise.all(fetchPromises)
        .then(randomPokemonDataArray => {
            var openedDiv = document.getElementById("pokemon-cards-opened");

            // Create and display cards
            randomPokemonDataArray.forEach(async (randomPokemonData, index) => {
                var container = document.createElement("div");
                container.className = "container";

                var card = document.createElement("div");
                card.className = "card";

                var front = document.createElement("div");
                front.className = "front";

                var back = document.createElement("div");
                back.className = "back";

                var h1 = document.createElement("h1");
                const name = randomPokemonData.pokemon; // Get the Pokémon name

                // Fetch detailed information from PokeAPI
                const pokemonInfo = await getPokemonInfo(name);
                const imageUrl = await getPokemonImage(name);

                h1.textContent = name;
                var p = document.createElement("p");
                p.textContent = pokemonInfo; // Set p.textContent to the Pokémon info
                p.className = "center-text";

                var image = document.createElement("img");
                image.src = imageUrl; // Set the image source
                image.style.width = "250px"; // Set the width to make the image bigger
                image.style.height = "250px"; // Set the height to make the image bigger


                back.appendChild(image);
                back.appendChild(h1);
                back.appendChild(p);
                card.appendChild(front);
                card.appendChild(back);
                container.appendChild(card);

                openedDiv.appendChild(container);
            });
        })
        .catch(error => {
            console.error("Error fetching random Pokémon:", error);
        });
}

3 Examples of My Individual Code • 14 min read

Description

Code #1: Base64 Image Encryption

Purpose

Code #2: Pokemon API

Code #3: Javascript Frontend Design (Not CSS)