Elevationacademy · rotemgrossman1 · Jun 14, 2026
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <head>
     <title>DOM</title>
     <link rel="stylesheet" href="style.css" />
-    <script src="main.js"></script>
+
 </head>
 
 <body>
@@ -13,12 +13,21 @@
             <div id="ball" class="centered"></div>
         </div>
         <div id="arrows" class="centered">
-            <div id="up" class="arrow">&uarr;</div>
-            <div id="left" class="arrow">&larr;</div>
-            <div id="right" class="arrow">&rarr;</div>
-            <div id="down" class="arrow">&darr;</div>
+            <div id="up" class="arrow" onclick="pressUp()">&uarr;</div>
+            <div id="left" class="arrow" onclick="pressLeft()">&larr;</div>
+            <div id="right" class="arrow" onclick="pressRight()">&rarr;</div>
+            <div id="down" class="arrow" onclick="pressDown()">&darr;</div>
         </div>
     </div>
+    <!-- <div>
+        <div id="box" onmouseenter="enterColor()" onmouseleave="leaveColor()" onclick="pressButton()">Hover over me!</div>
+    </div>
+
+    <ul id="myList" onclick="addItem()">
+    <li>Starter item</li>
+    <li>Click us!</li> -->
+<!-- </ul> -->
+    <script src="main.js"></script>
 </body>
 
 </html>
diff --git a/main.js b/main.js
@@ -1 +1,91 @@
-// console.log(document)
+console.log(document)
+const playingField = document.getElementById("playing-field")
+console.log(playingField)
+// Target the div with an ID of down. 
+// Store it in a variable called down, then console log it.
+//  Does it look as you expect?
+const downDiv = document.getElementById("down")
+console.log(downDiv)
+console.log(downDiv.innerHTML)
+console.log(playingField.innerHTML)
+playingField.style.backgroundColor = "blue"
+const ball = document.getElementById("ball")
+ball.style.backgroundColor = "yellow"
+// let ballLocation = "10px"
+
+const getTop = function() {
+    let ballLocation = ball.style.top
+    let ballLocationNum = parseInt(ballLocation)||0
+    return ballLocationNum
+}
+const getLeft = function() {
+    let ballLocation = ball.style.left
+    let ballLocationNum = parseInt(ballLocation)||0
+    return ballLocationNum
+}
+const renderBall = function(left, top){
+    ball.style.top = top+"px"
+    ball.style.left = left+"px"
+}
+const moveRight = function(){
+    let currentLeft = getLeft()
+    let currentTop = getTop()
+
+    // 2. Check if it's safe to move
+    if (currentLeft + 15 <= 400) {
+        renderBall(currentLeft+15, currentTop)
+    }
+}
+const moveLeft = function(){
+    let currentLeft = getLeft()
+    let currentTop = getTop()
+
+    // 2. Check if it's safe to move
+    if (currentLeft - 15 >= 10) {
+        renderBall(currentLeft-15, currentTop)
+    }
+}
+const moveUp = function(){
+    let currentLeft = getLeft()
+    let currentTop = getTop()
+
+    // 2. Check if it's safe to move
+    if (currentTop - 15 >= 10) {
+        renderBall(currentLeft, currentTop -15)
+    }
+}
+const moveDown = function(){
+    let currentLeft = getLeft()
+    let currentTop = getTop()
+
+    // 2. Check if it's safe to move
+    if (currentTop + 15 <= 400) {
+        renderBall(currentLeft, currentTop+15)
+    }
+}
+
+const pressUp = function(){
+    moveUp()
+}
+const pressDown = function(){
+    moveDown()
+}
+const pressRight = function(){
+    moveRight()
+}
+const pressLeft = function(){
+    moveLeft()
+}
+document.addEventListener("keydown", function(event) {
+    // 'event.key' tells you exactly which button was pressed
+
+    if (event.key === "ArrowRight") {
+        pressRight()
+    } else if (event.key === "ArrowLeft") {
+        pressLeft()
+    } else if (event.key === "ArrowUp") {
+        pressUp()
+    } else if (event.key === "ArrowDown") {
+        pressDown()
+    }
+})
diff --git a/style.css b/style.css
@@ -72,3 +72,14 @@ body{
 .arrow:active{
     background-color: #7f8c8d
 }
+
+.sub-header{
+    background-color: aqua;
+}
+#box{
+  background-color: #1abc9c;
+  line-height:20px;
+  text-align:middle;
+  width: 150px;
+  padding: 20px;
+}