dursk/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div id="game">
          <div id="bar"></div>
        </div>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.html"]}

## script.js
$("body").keydown(function(event) {
    var position = $("#bar").offset().left;

    if (event.which === 37 && position > 13) {
        $("#bar").css("left", position - 10);
    } else if (event.which === 39 && position < 483) {
       $("#bar").css("left", position + 10);
    } else {
        return;
    }
});

// STEP 1
// Initialize a variable called currentBlockIds
// and set it to an empty array.
var currentBlockIds;


function generateRandomId() {
    return "A" + Math.floor(Math.random() * 10000);
}

function generateRandomOffset() {
    return Math.floor(Math.random() * 480);
}

function createBlock() {
    // STEP 2
    // Use the generateRandomId function to set the id variable
    // to what the function returns.
    var randomId;
    // STEP 3
    // Use the generateRandomOffset function to set the leftOffset
    // variable to what the function returns.
    var randomOffset;
    $("#game").append("<div id=" + randomId + " class=block style=left:" + randomOffset + "px></div>");
    currentBlockIds.push(randomId);
}

// STEP 4
// Uncomment the code below to see what you've done so far!

//window.setInterval(createBlock, 1200);

## styles.css
#game {
    border: 5px solid black;
    height: 500px;
    width: 500px;
}

#bar {
    background-color: black;
    height: 8px;
    width: 30px;
    position: absolute;
    margin-top: 480px;
}

.block {
    background-color: red;
    height: 10px;
    width: 10px;
    position: absolute;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>
	<div id="game">
	<div id="bar"></div>
	</div>
	</body>
	</html>
	$("body").keydown(function(event) {
	var position = $("#bar").offset().left;

	if (event.which === 37 && position > 13) {
	$("#bar").css("left", position - 10);
	} else if (event.which === 39 && position < 483) {
	$("#bar").css("left", position + 10);
	} else {
	return;
	}
	});

	// STEP 1
	// Initialize a variable called currentBlockIds
	// and set it to an empty array.
	var currentBlockIds;


	function generateRandomId() {
	return "A" + Math.floor(Math.random() * 10000);
	}

	function generateRandomOffset() {
	return Math.floor(Math.random() * 480);
	}

	function createBlock() {
	// STEP 2
	// Use the generateRandomId function to set the id variable
	// to what the function returns.
	var randomId;
	// STEP 3
	// Use the generateRandomOffset function to set the leftOffset
	// variable to what the function returns.
	var randomOffset;
	$("#game").append("<div id=" + randomId + " class=block style=left:" + randomOffset + "px></div>");
	currentBlockIds.push(randomId);
	}

	// STEP 4
	// Uncomment the code below to see what you've done so far!

	//window.setInterval(createBlock, 1200);
	#game {
	border: 5px solid black;
	height: 500px;
	width: 500px;
	}

	#bar {
	background-color: black;
	height: 8px;
	width: 30px;
	position: absolute;
	margin-top: 480px;
	}

	.block {
	background-color: red;
	height: 10px;
	width: 10px;
	position: absolute;
	}