Skip to content

Instantly share code, notes, and snippets.

@isabellatea
Created May 4, 2019 09:56
Show Gist options
  • Save isabellatea/bad5b5e568d54dc94d9a48e26ef1fb0d to your computer and use it in GitHub Desktop.
Save isabellatea/bad5b5e568d54dc94d9a48e26ef1fb0d to your computer and use it in GitHub Desktop.
PokeAPIBattle Solution
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> <!-- imports stylesheet style.css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- imports jQuery library -->
<title>Pokemon Battle</title>
</head>
<body>
<h1 id="header">Pokemon Battle</h1>
<div id="container">
<div id="battleArea">
<div id="left">
<img class="poke-img" src="./images/questionMark.png">
<button id="leftButton">Get Random Pokemon!</button>
</div>
<div id="right">
<img class="poke-img" src="./images/questionMark.png">
<button id="rightButton">Get Random Pokemon!</button>
</div>
</div>
<button id="battleButton">Battle!</button>
</div>
<script src="script.js"></script> <!-- imports javascript file script.js -->
</body>
</html>
$(document).ready(function(){
$("#leftButton").click(getRandomPokemonLeft)
$("#rightButton").click(getRandomPokemonRight)
$("#battleButton").click(battle)
let leftPokemon = {};
let rightPokemon = {};
function getRandomPokemonLeft() {
let randomNumber = Math.floor(Math.random() * 800) + 1;
$.get(`https://pokeapi.co/api/v2/pokemon/${randomNumber}`).then(function(pokeData){
console.log("Left Pokemon Data: ", pokeData);
setPokemon("left", pokeData);
leftPokemon = pokeData; //saves to global variable to be referenced in battle funciton
});
}
function getRandomPokemonRight() {
let randomNumber = Math.floor(Math.random() * 800) + 1;
$.get(`https://pokeapi.co/api/v2/pokemon/${randomNumber}`).then(function(pokeData){
console.log("Right Pokemon Data: ", pokeData);
setPokemon("right", pokeData);
rightPokemon = pokeData; //saves to global variable to be referenced in battle funciton
});
}
function setPokemon(side, pokemonInfo) {
$(`#${side}`).empty();
let pokemonDisplay = `
<h1>${pokemonInfo['species']['name']}</h1>
<img class="poke-img" src="${pokemonInfo['sprites']['front_default']}">
<p>Attack: ${pokemonInfo['stats'][4]['base_stat']}</p>
`
$(`#${side}`).append(pokemonDisplay);
}
function battle() {
let leftAttack = leftPokemon['stats'][4]['base_stat'];
let rightAttack = rightPokemon['stats'][4]['base_stat'];
let winner = "";
if (leftAttack === rightAttack) {
winner = "tie";
} else if (leftAttack > rightAttack) {
winner = leftPokemon;
} else {
winner = rightPokemon;
}
displayWinner(winner);
}
function displayWinner(winningSide) {
$("#container").empty();
if (winningSide === 'tie') {
return $("#container").append("<p>It's a tie!</p>");
}
let winnerDisplay = `
<div id="winnerPokemon">
<h1>Winner: ${winningSide['species']['name']}</h1>
<img class="poke-img-winner" src="${winningSide['sprites']['front_default']}">
</div>
`
$("#container").append(winnerDisplay);
}
})
body {
margin: 0;
display: flex;
flex-direction: column;
}
#header {
width: 100%;
text-align: center;
}
#container {
display: flex;
flex-direction: column;
}
#battleArea {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#left {
background-color: lightpink;
}
#right {
background-color: lightblue;
}
.poke-img {
display: block;
width: 150px;
height: 150px;
}
.poke-img-winner {
display: block;
width: 250px;
height: 250px;
}
#battleButton {
width: 250px;
margin: 50px auto;
}
#winnerPokemon {
margin: 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment