diff --git a/src/css/main.css b/src/css/main.css index e69de29b..e5f041d1 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -0,0 +1,192 @@ +* { + margin: 0; + padding: 0; +} +:root { + --font-primary: "Bebas Neue", cursive; + --font-secondary: "Inter", sans-serif; + --color-dark-800: #212529; + --color-gray-400: #dddddd; + --base-transition: 0.4s ease; + --radius-10: 10px; + --color-purple-600: #7c27ce; + --color-light-100: #fff; +} + + +.firstPage { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; + transition: var(--base-transition); +} +.page-heading { + font-family: var(--font-secondary); + font-size: 4rem; + letter-spacing: 2px; + text-align: center; + margin-bottom: 1rem; + color: var(--color-dark-800); +} + +.input_container { + display: flex; + flex-direction: column; + margin-bottom: 1rem; +} + +label, +input { + font-family: var(--font-secondary); +} + +label { + margin-left: 20%; +} + + +.lift-sim_input { + padding: 5px 10px; + font-size: 1rem; + border-radius: var(--radius-10); + margin-top: 5px; + min-width: 250px; + border: 2px solid var(--color-gray-400); + transition: var(--base-transition); +} + +.lift-sim_input:focus { + border-color: var(--color-dark-800); +} + +.createLiftFloorButton { + margin-top: 1rem; + padding: 5px 10px; + font-size: 1.5rem; + font-family: var(--font-secondary); + border: 2px solid var(--color-gray-400); + border-radius: var(--radius-10); + cursor: pointer; + transition: var(--base-transition); +} + + +.buttonLift { + display: flex; +} + +.button { + width: 50px; + display: flex; + flex-direction: column; + margin: 11px 18px; +} + +.button button { + margin: 2px; +} +.up { + font-size: 13px; + border-radius: 4px; + transition-duration: 0.4s; + background-color: white; + color: var(--color-dark-800); +} +.down { + font-size: 13px; + border-radius: 4px; + transition-duration: 0.4s; + background-color: white; + color: var(--color-dark-800); +} +.up:hover { + background-color: black; + color: white; +} +.down:hover { + background-color: black; + color: white; +} + +.mainLift { + display: flex; + /* margin-left: 20px; */ + padding-left: 2rem; +} +.lift { + width: 50px; + height: 60px; + background-color: var(--color-gray-400); + border: 2px solid black; + margin-right: 5px; + transition-property: transform; + transition-timing-function: ease-in; +} + +.gates { + display: flex; +} +.gate1, +.gate2 { + width: 25px; + height: 60px; + margin: 1px; + background-color: var(--color-dark-800); + transition: width 2.5s ease-in-out; +} +.gate1-move { + transform: translateX(-100%); +} + +.gate2-move { + transform: translateX(100%); +} + +.secondPage { + display: none; + margin: 4% auto; +} +.hrfloorName { + display: flex; + flex-direction: row; + margin: 3px; +} +hr { + flex-grow: 1; + height: 1px; + border-top: 2px solid black; +} + +h2 { + width: 100%; + text-align: center; + border-bottom: 1px solid #000; + line-height: 0.1em; + margin: 10px 0 20px; +} + +h2 span { + background: #fff; + padding: 0 10px; +} + +.goToFirstPage { + font-size: 18x; + margin: 5px 0 10px 3px; + background-color: var(--color-dark-800); + color: white; + width: 80px; + height: 30px; + cursor: pointer; +} + +@media (width>500px) { + .lift { + margin-right: 55px; + } + .mainLift { + margin-left: 50px; + } +} diff --git a/src/index.html b/src/index.html index e69de29b..3183651b 100644 --- a/src/index.html +++ b/src/index.html @@ -0,0 +1,31 @@ + + + + + + + + + Document + + + +
+

Lift Simulation

+
+ + +
+
+ + +
+ + +
+
+ +
+ + + \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index e69de29b..7bf19fe6 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -0,0 +1,146 @@ +const simulate = document.querySelector('.createLiftFloorButton'); + + + +simulate.addEventListener('click', e => { + e.preventDefault(); + const floorInputValue = document.getElementById('floorNumber').value; + const liftInputValue = document.getElementById('liftNumber').value; + + if (floorInputValue == "" || liftInputValue == "") { + alert('please enter the value') + } + + if (floorInputValue == "0" || liftInputValue == "0") { + alert('please enter the value') + } + else { + document.querySelector('.firstPage').style.display = 'none'; + document.querySelector('.secondPage').style.display = 'block'; + makingFloor() + } +} +) + + +const makingFloor = () => { + + const floorInput = document.querySelector('#floorNumber').value + const liftInput = document.querySelector('#liftNumber').value + + for (let i = floorInput; i > 0; i--) { + + const floordiv = document.createElement('div'); + floordiv.className = 'box'; + + floordiv.innerHTML = ` +
+
+ + +
+
+
+
+
+ Floor ${i} +
+ ` + + document.querySelector(".secondPage").appendChild(floordiv) + } + + const mainLift = document.querySelectorAll('.mainLift') + + for (let j = 1; j <= liftInput; j++) { + mainLift[floorInput - 1].innerHTML += ` +
+
+
+
+
+
+ ` + } + + + + const allFloors = document.querySelectorAll(".mainLift") + document.querySelector("#down1").style.display = "none" + document.querySelector(`#up${floorInput}`).style.display = "none" + + const upButtons = document.querySelectorAll(".up") + const downButtons = document.querySelectorAll(".down") + const allLifts = document.querySelectorAll(".lift") + + let liftCurrentFloor = new Array(allLifts.length).fill(1) + + + + upButtons.forEach((upbtn, i) => { + const floorValue = upButtons.length - i; + upbtn.addEventListener("click", (event) => { + event.preventDefault() + distanceCalculator(liftCurrentFloor, floorValue).every((liftNo, i) => { + if (allLifts[liftNo].getAttribute('flag') == "free") { + allLifts[liftNo].setAttribute('flag', "busy") + // moveLift(allLifts[liftNo], allFloors[floorInput - liftCurrentFloor[liftNo]], allFloors[floorInput - floorValue],) + moveLift(allLifts[liftNo], floorValue, liftCurrentFloor[liftNo]) + liftCurrentFloor[liftNo] = floorValue + return false + } else return true + }) + }) + }) + + downButtons.forEach((downbtn, i) => { + const floorValue = downButtons.length - i; + downbtn.addEventListener("click", (event) => { + distanceCalculator(liftCurrentFloor, floorValue).every((liftNo, i) => { + if (allLifts[liftNo].getAttribute('flag') == "free") { + allLifts[liftNo].setAttribute('flag', "busy") + // moveLift(allLifts[liftNo], allFloors[floorInput - liftCurrentFloor[liftNo]], allFloors[floorInput - floorValue],) + moveLift(allLifts[liftNo], floorValue, liftCurrentFloor[liftNo]) + liftCurrentFloor[liftNo] = floorValue + return false + } else return true + }) + }) + }) + +} +distanceCalculator = (liftsPositionArray, destinationFloor) => { + const liftDisatnce = [...liftsPositionArray].map((position, i) => { + return { distance: Math.abs(position - destinationFloor), index: i } + }) + return liftDisatnce.sort((a, b) => a.distance - b.distance).map((e) => e.index) +} + +const moveLift = (lift, destinationFloor, liftCurrentFloor) => { + lift.style.transform = `translateY(${-95 * (destinationFloor - 1)}px)`; + const prev = `${2 * Math.abs(destinationFloor - liftCurrentFloor)}s` + lift.style.transitionDuration = prev; + + setTimeout(() => { + openCloseGates(lift); + setTimeout(() => { + lift.setAttribute('flag', 'free') + }, 4500); + }, 2 * Math.abs(destinationFloor - liftCurrentFloor) * 1000) +} + +const openCloseGates = (lift) => { + const gates = lift.children[0].children + setTimeout(() => { + gates[0].style.width = '3px'; + gates[1].style.width = '3px'; + }, 1000) + + setTimeout(() => { + gates[0].style.width = '25px'; + gates[1].style.width = '25px'; + }, 3500) +} + + +//code by rahulsharmaah