Contribution 1
This was a search function for our passion project. It uses the online pokeapi to display information about a pokemon that a user can search for. This ended up making it to the final project as a seperete feature to the pack opening. This was HTML.
Purpose:
The function of this code is to allow users to have access to a database with all the pokemon, so they can learn about them and see what they look like. It is good for people who dont have good knowlege of pokemon along with people who do.
<html>
<head>
<title>Pokemon Info</title>
//Frontend stuff to try to make it look better
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #F2F2F2;
}
#container {
background-color: #111;
padding: 100px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(256, 256, 256, 0.2);
max-width: 400px;
margin: 0 auto;
}
h1 {
color: #E6494B;
}
label {
display: block;
margin-top: 10px;
}
input {
width: 100%;
padding: 7px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #E6494B;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #D13234;
}
#result {
text-align: left;
margin-top: 20px;
}
img {
display: block;
margin: 0 auto;
max-width: 300%;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<h1>Pokemon Information</h1>
<label for="pokemonName">Enter a Pokemon Name or ID:</label>
<input type="text" id="pokemonName" list="pokemonList">
<datalist id="pokemonList"></datalist>
<button onclick="getPokemonInfo()">Get Info</button>
<div id="result">
<img id="pokemonImage" src="">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Function to populate the datalist with Pokemon names
function populatePokemonList() {
const apiUrl = 'https://pokeapi.co/api/v2/pokemon?limit=1000';
$.get(apiUrl, function(data) {
const pokemonList = document.getElementById('pokemonList');
data.results.forEach(pokemon => {
const option = document.createElement('option');
option.value = pokemon.name;
pokemonList.appendChild(option);
});
});
}
// Call the function to populate the datalist on page load
populatePokemonList();
function getPokemonInfo() {
const pokemonName = document.getElementById('pokemonName').value;
const apiUrl = `https://pokeapi.co/api/v2/pokemon/${pokemonName.toLowerCase()}`;
$.get(apiUrl, function(data) {
const name = data.name;
const id = data.id;
const types = data.types.map(type => type.type.name).join(', ');
const abilities = data.abilities.map(ability => ability.ability.name).join(', ');
const height = data.height;
const weight = data.weight;
const imageURL = data.sprites.front_default;
const baseStats = data.stats.map(stat => `${stat.stat.name}: ${stat.base_stat}`).join(', ');
const result = `
<img id="pokemonImage" src="${imageURL}" alt="Pokemon Image">
<p><strong>Name:</strong> ${name}</p>
<p><strong>ID:</strong> ${id}</p>
<p><strong>Types:</strong> ${types}</p>
<p><strong>Abilities:</strong> ${abilities}</p>
<p><strong>Height:</strong> ${height} dm</p>
<p><strong>Weight:</strong> ${weight} hectograms</p>
<p><strong>Base Stats:</strong> ${baseStats}</p>
`;
document.getElementById('result').innerHTML = result;
});
}
</script>
</body>
</html>
Contribution 2
This was how I incorpitrated what I did above, for the search into the pokemon pack opening. This code allows use to use our api combined with the online api, to easily add images, and a bit more detail to our cards. This proved to be an extreamly valuable time save for our team, because we did not have to manuely add all the images to the api for all the 150 pokemon we wanted to add. This was JS.
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);
});
}
// Function to fetch detailed Pokémon information from PokeAPI
async function getPokemonInfo(pokemonName) {
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName.toLowerCase()}`);
const data = await response.json();
if (response.status === 200) {
const types = data.types.map(type => type.type.name).join(", ");
const abilities = data.abilities.map(ability => ability.ability.name).join(", ");
return `Type(s): ${types}\nAbilities: ${abilities}`;
} else {
return "Pokémon info not found!";
}
}
// Function to fetch Pokémon image from PokeAPI
async function getPokemonImage(pokemonName) {
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName.toLowerCase()}`);
const data = await response.json();
if (response.status === 200) {
return data.sprites.front_default;
} else {
return "Image not found!";
}
}
Key Commits
Some of my key commits toward the passion project are,
Added Search with frontend: https://github.com/RonitT1234/JARV_Frontend/commit/32db455f92eb81aa10cdfa96e0bd751ef664bbbb
Added List with all pokemon: https://github.com/JBaza12/ProjectBackend/commit/53ae01ba230d1e82115856edcd5870de6081bddd
Added Images to cards: https://github.com/RonitT1234/JARV_Frontend/commit/c66a708337737490c5c67ec19f264ccb7070e2ac
-
The first comit was adding the online pokiapi to our main project, and somewhat intergrating it with the cards. The second comit was the introduction of all the pokemon into our personal api in the back end. It was just moddifying the python list to include all the pokemon we wanted to include. I also had to make sure nothing would break in the flask server or AWS, as it would mess up our entire api.
-
The second comit, was finaly getting rid of the few test pokemon we had in our api, and actually increasing the number to what our final api would have. It was not much, just modifying a pythong list, but I felt it was important to include.
-
The 3rd comit is to our frontend, which was actullat commited by ronit, however it was me who wrote out the code, and sent it to hum, as my commits had so weird thing going on, and we wanted to get it out as fast as possible. It is just adding alot of info to the cards we wanted to display, along with better images.