isabellatea/index.html

## index.html
<!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>

## script.js
$(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);
  }

})

## style.css
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;
}
	<!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;
	}