Skip to content

Instantly share code, notes, and snippets.

@mohnish

mohnish/move_red_box.html

Last active August 29, 2015 14:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mohnish/9b273209e2cb1ab8818b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mohnish/9b273209e2cb1ab8818b to your computer and use it in GitHub Desktop.
Download ZIP
assignment 6
Raw
move_red_box.html
<html>
<head>
<titl>Assignment #5</titl>
</head>
<style>
.move-me {
height: 200px;
width: 200px;
position: absolute;
background-color: #ff0000;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
}
</style>
<body>
<div class="move-me"></div>
<script>
var moveMe = document.querySelector('.move-me');
document.addEventListener('keydown', function(e) {
switch(e.keyCode) {
case 37:
var currentLeft = window.getComputedStyle(moveMe, null).getPropertyValue("left");
currentLeft = parseInt(currentLeft.replace('px', ''), 10);
moveMe.style.left = (currentLeft - 100) + 'px';
moveMe.innerText = "left";
break;
case 38:
var currentTop = window.getComputedStyle(moveMe, null).getPropertyValue("top");
currentTop = parseInt(currentTop.replace('px', ''), 10);
moveMe.style.top = (currentTop - 100) + 'px';
moveMe.innerText = "top";
break;
case 39:
var currentLeft = window.getComputedStyle(moveMe, null).getPropertyValue("left");
currentLeft = parseInt(currentLeft.replace('px', ''), 10);
moveMe.style.left = currentLeft + 100 + 'px';
moveMe.innerText = "right";
break;
case 40:
var currentTop = window.getComputedStyle(moveMe, null).getPropertyValue("top");
currentTop = parseInt(currentTop.replace('px', ''), 10);
moveMe.style.top = currentTop + 100 + 'px';
moveMe.innerText = "bottom";
break;
default:
console.log('none');
break;
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment