From 4829f82c765628b8f9fbd823e267f39d01d28b7e Mon Sep 17 00:00:00 2001 From: rotemgrossman1 Date: Sun, 14 Jun 2026 15:08:28 +0300 Subject: [PATCH] Add interactivity to arrow controls and enhance styling for box and sub-header --- index.html | 19 ++++++++--- main.js | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++++- style.css | 11 +++++++ 3 files changed, 116 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 4cc383f..e35407d 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ DOM - + @@ -13,12 +13,21 @@
-
↑
-
←
- -
↓
+
↑
+
←
+ +
↓
+ + + diff --git a/main.js b/main.js index f7a7a99..b2d09e5 100644 --- a/main.js +++ b/main.js @@ -1 +1,91 @@ -// console.log(document) \ No newline at end of file +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 index bf20ad9..dabc087 100644 --- 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; +}