Real-Dev-Squad · aasimtaif · Aug 17, 2023 · Aug 18, 2023 · Aug 18, 2023 · Aug 19, 2023
diff --git 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
@@ -0,0 +1,31 @@
+<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="./css/main.css" />
+    <title>Document</title>
+  </head>
+
+  <body>
+    <div class="firstPage">
+      <h1 class="page-heading">Lift Simulation</h1>
+      <div class="noOfFloor input_container">
+        <label for="floorNumber">Number of floors</label>
+        <input type="Number" id="floorNumber" class="lift-sim_input" placeholder="Enter Upto 7 floors" required/>
+      </div>
+      <div class="noOfLift input_container">
+        <label for="liftNumber">Number of lifts</label>
+        <input type="Number" id="liftNumber" class="lift-sim_input"  placeholder="Enter Atleast 2 lifts" required/>
+      </div>
+      <button class="createLiftFloorButton">Simulate</button>
+
+    </div>
+    <div class="secondPage">
+      <button class="goToFirstPage">Back</button>
+    </div>
+    <script src="./js/main.js"></script>
+  </body>
+</html>
diff --git 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 = `
+            <div class="buttonLift">
+                <div class="button">
+                    <button class="up" id="up${i}">Up</button>
+                    <button class="down" id="down${i}">Down</button>
+                </div>
+                <div class ="mainLift"></div>
+            </div>
+                <div class="hrfloorName">
+                    <hr>
+                <span>Floor ${i}</span>
+            </div>
+            `
+
+        document.querySelector(".secondPage").appendChild(floordiv)
+    }
+
+    const mainLift = document.querySelectorAll('.mainLift')
+
+    for (let j = 1; j <= liftInput; j++) {
+        mainLift[floorInput - 1].innerHTML += `
+    <div class="lift" id="lift${j}" flag="free">
+        <div class="gates" id="gates">
+            <div class="gate1"></div>
+            <div class="gate2"></div>
+        </div>
+    <div>
+    `
+    }
+
+
+
+    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