outoftime · April 18, 2017 00:01
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>Page Title</title>
        <script defer src="https://cdn.rawgit.com/outoftime/c405972c7971f291af983729b23ba862/raw/4ae74257783111dc2e01e85a2d6a666a097f9aca/starter.js"></script>
    </head>
    <body>
        <img src="http://vignette3.wikia.nocookie.net/prehistoricpark/images/5/59/Running-cheetah.jpg/revision/latest?cb=20140616041414" id="cheetah" class="animal">
        <img src="https://upwithmarc.files.wordpress.com/2015/05/gazelle-image-01.jpg" id="gazelle" class="animal">
    </body>
 </html>
diff --git a/popcode.json b/popcode.json
 {"enabledLibraries":["jquery"]}
diff --git a/script.js b/script.js
 // We did this one for you. Notice that y can never get bigger
 // than 4, because there are only five spaces on the board.

 function moveDown(y) {
    if (y === 4) {
        return 4;
    }
    return y + 1;
 }

 // 1. There’s a function here, but it doesn’t do the right thing.
 //    Fix this function so that:
 //      it returns 0 if y is 0
 //      otherwise, it returns one less than y

 function moveUp(y) {
    return y;
 }

 // 2. Define a function called moveLeft, that accepts one
 //    parameter, called x. This function should:
 //      return 0 if x is 0
 //      otherwise, it returns one less than x



 // 3. Define a function called moveRight, that accepts one
 //    parameter, called x. This function should update the
 //    X coordinate to move the cheetah one to the right, but
 //    should not allow the cheetah to go off the board.


diff --git a/styles.css b/styles.css
 .animal {
    width: 20vw;
    position: absolute;
    transition: top 1s, left 1s;
 }

 body {
    height: 100vh;
    width: 100vw;
    background: url(https://aos.iacpublishinglabs.com/question/62effd5619c14bf044a7157ae4cc25bc/aq/700px-394px/country-savannah-located_383120e7b4c44e35_IEAyywjJRfO0sSv2SLUiyw.jpg?domain=cx.aos.ask.com) no-repeat;
    background-size: cover;
 }

 #cheetah {
    top: 0;
    left: 0;
    z-index: 1;
 }

 #gazelle {
    top: 80vw;
    left: 0;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	<script defer src="https://cdn.rawgit.com/outoftime/c405972c7971f291af983729b23ba862/raw/4ae74257783111dc2e01e85a2d6a666a097f9aca/starter.js"></script>
	</head>
	<body>
	<img src="http://vignette3.wikia.nocookie.net/prehistoricpark/images/5/59/Running-cheetah.jpg/revision/latest?cb=20140616041414" id="cheetah" class="animal">
	<img src="https://upwithmarc.files.wordpress.com/2015/05/gazelle-image-01.jpg" id="gazelle" class="animal">
	</body>
	</html>
	// We did this one for you. Notice that y can never get bigger
	// than 4, because there are only five spaces on the board.

	function moveDown(y) {
	if (y === 4) {
	return 4;
	}
	return y + 1;
	}

	// 1. There’s a function here, but it doesn’t do the right thing.
	// Fix this function so that:
	// it returns 0 if y is 0
	// otherwise, it returns one less than y

	function moveUp(y) {
	return y;
	}

	// 2. Define a function called moveLeft, that accepts one
	// parameter, called x. This function should:
	// return 0 if x is 0
	// otherwise, it returns one less than x



	// 3. Define a function called moveRight, that accepts one
	// parameter, called x. This function should update the
	// X coordinate to move the cheetah one to the right, but
	// should not allow the cheetah to go off the board.
	.animal {
	width: 20vw;
	position: absolute;
	transition: top 1s, left 1s;
	}

	body {
	height: 100vh;
	width: 100vw;
	background: url(https://aos.iacpublishinglabs.com/question/62effd5619c14bf044a7157ae4cc25bc/aq/700px-394px/country-savannah-located_383120e7b4c44e35_IEAyywjJRfO0sSv2SLUiyw.jpg?domain=cx.aos.ask.com) no-repeat;
	background-size: cover;
	}

	#cheetah {
	top: 0;
	left: 0;
	z-index: 1;
	}

	#gazelle {
	top: 80vw;
	left: 0;
	}