html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Created by Umair Ansari -->
<!--
https://www.sololearn.com/Discuss/3096613
someone-please-help-me-with-javascript
-->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<button id="upBtn" class="buts">Up</button>
<div>
<button id="leftBtn" class="buts">Left</button>
<button id="rightBtn"class="buts">Right</button>
</div>
<button id="downBtn" class="buts">Down</button>
</div>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
<!--
Keep learning & happy coding :D
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Created by Umair Ansari */
body {
text-align: center;
}
#container{
width: 350px;
height: 350px;
position: relative;
background: yellow;
margin: auto;
}
#box{
width:50px;
height:50px;
position:absolute;
background: red;
left: 0px;
top: 0px;
}
.buts {
margin: 2px;
cursor: pointer;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Created by Umair Ansari
const box = document.getElementById("box");
const UpBtn = document.getElementById("upBtn");
const DownBtn = document.getElementById("downBtn");
const LeftBtn = document.getElementById("leftBtn");
const RightBtn = document.getElementById("rightBtn");
var X,Y;
window.onload = function(){
box.style.left = box.style.top = "0px";
X = 0;
Y = 0;
ChkPos();
UpBtn.onclick = moveUp;
DownBtn.onclick = moveDown;
LeftBtn.onclick = moveLeft;
RightBtn.onclick = moveRight;
}
ChkPos = () => {
UpBtn.disabled = Y<=0;
DownBtn.disabled = Y>=300;
LeftBtn.disabled = X<=0;
RightBtn.disabled = X>=300;
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run