Created
May 4, 2019 09:56
-
-
Save isabellatea/bad5b5e568d54dc94d9a48e26ef1fb0d to your computer and use it in GitHub Desktop.
PokeAPIBattle Solution
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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); | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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