I wanted to animate the lifts, so that it can move up when a button is pressed. I will do that automation later as I’m stuck now.
But when I use overflow-x: hidden;
, it hides the lift moving up/down. I am not removing overflow-x
because I don’t want the lifts to get compressed.
const submitButton = document.querySelector('.submit');
const backButton = document.querySelector('.back');
const inputSection = document.getElementById('input-section');
const simulationSection = document.getElementById('simulation');
let floorNos = document.getElementById('floors');
let liftNos = document.getElementById('lifts');
function clearContent() {
while (simulationSection.firstChild) {
simulationSection.removeChild(simulationSection.firstChild);
}
}
submitButton.addEventListener('click', () => {
let errorMessage = '';
let n = parseInt(floorNos.value);
let m = parseInt(liftNos.value);
if (isNaN(n) || n < 1) {
errorMessage += 'Invalid Floor Input.n';
}
if (isNaN(m) || m < 1) {
errorMessage += 'Invalid Lift Input.n';
}
if (errorMessage) {
alert(errorMessage);
} else {
const newSimLiftsContainer = document.createElement('div');
newSimLiftsContainer.id = 'sim-lifts';
for (let i = 0; i < n; i++) {
const floorDiv = document.createElement('div');
floorDiv.classList.add('sim-floors');
const buttonContainer = document.createElement('div');
buttonContainer.classList.add('button-container');
const upButton = document.createElement('button');
upButton.classList.add('up');
upButton.textContent = 'Up';
const downButton = document.createElement('button');
downButton.classList.add('down');
downButton.textContent = 'Down';
if (i === n - 1) upButton.style.display = 'none';
if (i === 0) downButton.style.display = 'none';
buttonContainer.appendChild(upButton);
buttonContainer.appendChild(downButton);
const floorContainer = document.createElement('div');
floorContainer.classList.add('floor-container');
const line = document.createElement('div');
line.classList.add('line');
const floorNo = document.createElement('div');
floorNo.classList.add('floor-no');
floorNo.textContent = `Floor ${i + 1}`;
floorContainer.appendChild(line);
floorContainer.appendChild(floorNo);
floorDiv.appendChild(buttonContainer);
floorDiv.appendChild(floorContainer);
simulationSection.appendChild(floorDiv);
if (i === 0) {
for (let j = 0; j < m; j++) {
const lift = document.createElement('div');
lift.classList.add('lift');
const liftDoorLeft = document.createElement('div');
liftDoorLeft.classList.add('lift-door-left');
const liftDoorRight = document.createElement('div');
liftDoorRight.classList.add('lift-door-right');
lift.appendChild(liftDoorLeft);
lift.appendChild(liftDoorRight);
newSimLiftsContainer.appendChild(lift);
}
floorDiv.appendChild(newSimLiftsContainer);
}
}
newSimLiftsContainer.scrollLeft = newSimLiftsContainer.scrollWidth;
inputSection.style.display = 'none';
simulationSection.style.display = 'flex';
backButton.style.display = 'block';
newSimLiftsContainer.addEventListener('wheel', (e) => {
e.preventDefault();
newSimLiftsContainer.scrollLeft += e.deltaY;
});
}
});
backButton.addEventListener('click', () => {
clearContent();
simulationSection.style.display = 'none';
inputSection.style.display = 'flex';
backButton.style.display = 'none';
});
/*For Input*/
#simulation {
display:none;
}
.back{
display:none;
}
#input-section,
#simulation {
width: 100%;
height: 100%;
}
#input-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.input {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font: bold larger Arial, Helvetica, sans-serif;
padding-top: 200px;
}
#floors {
margin-bottom: 100px;
}
.button{
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.submit{
cursor:pointer;
height:60px;
width:120px;
background-color:rgb(251, 251, 251);
border-radius: 10px;
border: 1px solid black;
}
.submit:hover{
background-color:rgb(177, 177, 177);
}
.submit:active{
background-color:rgb(126, 128, 128);
}
#floors,#lifts{
width:190px;
border-radius:5px;
border: 1px solid black;
}
/*For Simulation*/
#simulation {
font: bold larger Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column-reverse;
gap: 50px;
}
.sim-floors {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
height: 150px;
}
.sim-floors:last-child {
margin-top: 100px;
}
.button-container {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 40px;
width: 80px;
z-index: 1;
}
.floor-container {
display: flex;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.line {
flex-grow: 1;
border-top: 4px solid black;
margin: 0 10px;
}
.floor-no {
text-align: right;
font-size: 18px;
margin-top: 3px;
}
.up, .down {
font-weight: 800;
border-radius: 10px;
border: none;
padding: 10px 20px;
margin-bottom: 3px;
cursor: pointer;
display: flex;
}
.up {
background: #00b300;
color: black;
}
.up:hover {
background: #00b3009a;
}
.up:active{
background: #00b300e0;
}
.down {
background: #ffcc00;
color: black;
}
.down:hover{
background: #ffcc00a4;
}
.down:active{
background: #ffcc00d2;
}
#sim-lifts {
position: relative;
display: flex;
white-space: nowrap;
max-width: 90.3%;
margin-left: 90px;
padding-top: 60px;
scrollbar-width: none;
}
#sim-lifts::-webkit-scrollbar {
display: none;
}
.lift {
z-index: 100;
animation: moveUp 10s infinite;
min-width: 60px;
flex-shrink: 0;
height: 75px;
background: rgb(0, 153, 255);
position: relative;
margin: 0 5px;
overflow-x: hidden;
}
.back{
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
position:absolute;
top:10px;
right:10px;
float:right;
background:rgba(60, 0, 255, 0.522);
padding: 7px;
border-radius: 10px;
border:none;
padding-top:10px;
padding-bottom:10px;
cursor:pointer;
}
.back:hover{
background: rgba(60, 0, 255, 0.381);
}
.back:active{
background: rgba(60, 0, 255, 0.474);
}
.lift-door-left,
.lift-door-right {
width: 50%;
height: 100%;
position: absolute;
}
.lift-door-left {
background: silver;
border-right: 1.5px solid black;
left:0;
animation: ldoor 5s;
}
.lift-door-right {
background: silver;
border-left: 1.5px solid black;
right:0;
animation: rdoor 5s;
}
@keyframes ldoor{
0%{left:0;}
50%{left:-50%;}
100%{left:0;}
}
@keyframes rdoor{
0%{right:0;}
50%{right:-50%;}
100%{right:0;}
}
@keyframes moveUp{
0%{transform: translateY(0px);}
50%{transform: translateY(-200px);}
100%{transform: translateY(0px);}
}
<div id="input-section">
<div class="input">
<div>
Enter the no. of Floors: <br><br>
</div>
<input id="floors" style="font-size:16pt;" type="number" placeholder="Enter the no. of floors"/>
<div>
Enter the no. of Lifts: <br><br>
</div>
<input id="lifts" style="font-size:16pt;" type="number" placeholder="Enter the no. of lifts"/>
</div>
<div class="button">
<button class="submit" style="font-size:16pt;">Submit</button>
</div>
</div>
<div>
<button class="back" style="font-size:16pt;">GO BACK</button>
</div>
<div id="simulation"></div>