Skip to content

E
Elevator
Commit fc7bfc24 authored by Muhammad Ameen's avatar Muhammad Ameen 💻
Browse files
Options

Basic Elevator

parents
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 0 deletions
index.html 0 → 100644
View file @ fc7bfc24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles/style.css" />
<title>Elevator</title>
</head>
<body>
<div class="mainContainer">
<div class="btn_container">
<div class="btn-0 btn" id="btn0" onclick="command(0)">0</div>
<div class="btn-1 btn" id="btn1" onclick="command(1)">1</div>
<div class="btn-2 btn" id="btn2" onclick="command(2)">2</div>
<div class="btn-3 btn" id="btn3" onclick="command(3)">3</div>
<div class="btn-4 btn" id="btn4" onclick="command(4)">4</div>
<span
>Floor to go
<p id="floorsArr"></p
></span>
</div>
<div class="floorBox">
<div class="lift" id="liftBox"></div>
</div>
</div>
<script src="./js/app.js"></script>
</body>
</html>
js/app.js 0 → 100644
View file @ fc7bfc24
let floorsArrP = document.getElementById("floorsArr");
let floorArr = [];
let currentFloor = 4;
let liftBox = document.getElementById("liftBox");
let btn0 = document.getElementById("btn0"),
btn1 = document.getElementById("btn1"),
btn2 = document.getElementById("btn2"),
btn3 = document.getElementById("btn3"),
btn4 = document.getElementById("btn4");
function command(floorNo) {
let checkNumber = floorArr.includes(floorNo);
if (checkNumber === false) {
floorArr.push(floorNo);
floorsArrP.innerHTML = floorArr;
}
if (floorArr.length === 1) {
move();
}
switch (floorNo) {
case 0:
btn0.style.backgroundColor = "red";
break;
case 1:
btn1.style.backgroundColor = "red";
break;
case 2:
btn2.style.backgroundColor = "red";
console.log("first");
break;
case 3:
btn3.style.backgroundColor = "red";
break;
case 4:
btn4.style.backgroundColor = "red";
break;
default:
break;
}
console.log(floorArr);
}
function move() {
if (floorArr[0] === 0) {
liftBox.style.marginTop = "680px";
liftBox.style.transition = "5s";
setTimeout(() => {
if (floorArr.length !== 0) {
floorArr.splice(0, 1);
floorsArrP.innerHTML = floorArr;
btn0.style.backgroundColor = "gray";
move(floorArr[0]);
}
}, 5000);
} else if (floorArr[0] === 1) {
liftBox.style.marginTop = "544px";
liftBox.style.transition = "5s";
setTimeout(() => {
if (floorArr.length !== 0) {
floorArr.splice(0, 1);
floorsArrP.innerHTML = floorArr;
btn1.style.backgroundColor = "gray";
move(floorArr[0]);
}
}, 5000);
} else if (floorArr[0] === 2) {
liftBox.style.marginTop = "408px";
liftBox.style.transition = "5s";
setTimeout(() => {
if (floorArr.length !== 0) {
floorArr.splice(0, 1);
floorsArrP.innerHTML = floorArr;
btn2.style.backgroundColor = "gray";
move(floorArr[0]);
}
}, 5000);
} else if (floorArr[0] === 3) {
liftBox.style.marginTop = "272px";
liftBox.style.transition = "5s";
setTimeout(() => {
if (floorArr.length !== 0) {
floorArr.splice(0, 1);
floorsArrP.innerHTML = floorArr;
btn3.style.backgroundColor = "gray";
move(floorArr[0]);
}
}, 5000);
} else if (floorArr[0] === 4) {
liftBox.style.marginTop = "136px";
liftBox.style.transition = "5s";
setTimeout(() => {
if (floorArr.length !== 0) {
floorArr.splice(0, 1);
floorsArrP.innerHTML = floorArr;
btn4.style.backgroundColor = "gray";
move(floorArr[0]);
}
}, 5000);
}
}
styles/style.css 0 → 100644
View file @ fc7bfc24
body {
margin: 0px;
padding: 0px;
}
.mainContainer {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
/* background-color: red; */
}
.btn {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: gray;
text-align: center;
padding: 20px;
margin-bottom: 20px;
color: white;
/* font-size: 24px; */
}
.btn_container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
}
.btn:hover {
background-color: red;
}
.floorBox {
width: 70%;
background-color: red;
height: 100vh;
display: flex;
justify-content: center;
}
.lift {
width: 20%;
height: 140px;
background-color: yellow;
margin-top: 136px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment