RealDevSquad · Soumava-221B · May 16, 2026 · May 17, 2026 · May 17, 2026
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/src/css/main.css b/src/css/main.css
@@ -0,0 +1,133 @@
+@import url("https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&family=Prosto+One&display=swap");
+
+:root {
+  --primary-font: "Cambay", sans-serif;
+  --bg-color: #060047;
+  --text-color: #2d2727;
+  --upButton-color: #539165;
+  --downButton-color: #f7c04a;
+  --lift-color: #537fe7;
+  --border-color: #000000;
+  --door-color: #19a7ce;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--primary-font);
+  background-color: #f0eeed;
+  color: var(--text-color);
+  height: 100vh;
+}
+
+header {
+  text-align: center;
+  padding: 2rem 0 2rem 0;
+}
+
+.input__section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.input__heading {
+  padding: 0 0 2rem 0;
+  text-align: center;
+}
+
+.input_labels {
+  display: inline-block;
+  width: 15em;
+}
+
+.input_from_user {
+  padding: 5px;
+  margin-bottom: 10px;
+  width: 20em;
+}
+
+.submit__btn {
+  width: 150px;
+  height: 35px;
+  margin-top: 6px;
+  border-radius: 5px;
+  border: 2px solid #000000;
+  font-size: 18px;
+  padding: 5px;
+  cursor: pointer;
+  background-color: #060047;
+  color: #ffff;
+}
+
+.output__section {
+  overflow: auto;
+}
+
+.floor {
+  height: 100px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 2vw;
+  gap: 2vw;
+  border-top: 1px solid #000000;
+  border-bottom: 1px solid #000000;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.lift-control {
+  cursor: pointer;
+  width: 50px;
+  height: 25px;
+  text-transform: capitalize;
+  padding: 4px;
+  font-weight: bold;
+}
+
+.lift {
+  height: 91px;
+  width: 90px;
+  background-color: #bce8c4;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  margin-right: 20px;
+  border: 1px solid #000000;
+}
+
+.lift-control .up {
+  background-color: #bce8c4;
+}
+.lift-control .down {
+  background-color: #bce8c4;
+}
+
+.door {
+  background-color: #19a7ce;
+  height: 100%;
+  width: 50%;
+  transition: all 2.5s;
+}
+
+.left-door {
+  border-right: 1px solid #f0eeed;
+}
+
+.right-door {
+  border-left: 1px solid #f0eeed;
+}
+
+.left-move {
+  transform: translateX(-100%);
+}
+
+.right-move {
+  transform: translateX(100%);
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lift Simulator</title>
+    <link rel="stylesheet" href="./css/main.css" />
+  </head>
+  <body>
+    <header>
+      <h1 class="welcome__message">welcome to Lift simulator</h1>
+    </header>
+    <main>
+      <section class="input__section">
+        <div class="input__inner__box">
+          <h2 class="input__heading">Enter Input to start</h2>
+          <form id="user_input">
+            <div class="input__fields">
+              <div>
+                <label for="floorInput" class="input_labels"
+                  >Enter The Number Of Floors</label
+                >
+                <input
+                  type="number"
+                  id="floorInput"
+                  class="floor__input input_from_user"
+                  name="floorInput"
+                  placeholder="Enter The Number Of Floors"
+                />
+              </div>
+              <div>
+                <label for="liftInput" class="input_labels"
+                  >Enter The Number Of Lifts</label
+                >
+                <input
+                  type="number"
+                  id="liftInput"
+                  class="lift__input input_from_user"
+                  name="liftInput"
+                  placeholder="Enter The Number Of Lifts"
+                />
+              </div>
+              <button type="submit" class="submit__btn">Submit</button>
+            </div>
+          </form>
+        </div>
+      </section>
+      <section class="output__section"></section>
+    </main>
+    <script src="./js/main.js"></script>
+  </body>
+</html>
diff --git a/src/js/main.js b/src/js/main.js
@@ -0,0 +1,196 @@
+const floorInput = document.querySelector(".floor__input");
+const liftInput = document.querySelector(".lift__input");
+const submitBtn = document.querySelector(".submit__btn");
+const outputSection = document.querySelector(".output__section");
+
+const floorMaping = new Map();
+const liftMaping = new Map();
+const checkAvailability = new Map();
+
+let floorCount = null,
+  liftCount = null;
+let leftLiftcalls = [];
+
+submitBtn.addEventListener("click", (e) => {
+  e.preventDefault();
+  floorCount = parseInt(floorInput.value, 10);
+  liftCount = parseInt(liftInput.value, 10);
+
+  if (
+    isNaN(floorCount) ||
+    isNaN(liftCount) ||
+    floorCount <= 0 ||
+    liftCount <= 0
+  ) {
+    return alert("Invalid Input, Please Try Again!!");
+  }
+
+  const inputSection = document.querySelector(".input__section");
+  inputSection.style.display = "none";
+
+  handleFloor(floorCount);
+  handleLift(liftCount);
+});
+
+//Making of floor
+function handleFloor(totalFloors) {
+  totalFloors = Number(totalFloors);
+  const topFloor = document.createElement("section");
+  topFloor.className = "floor";
+  topFloor.id = `floor-${totalFloors}`;
+  const floorDetails = document.createElement("section");
+  floorDetails.className = "floor-details";
+
+  const downBtn = document.createElement("button");
+  downBtn.className = "lift-control down";
+  downBtn.textContent = "↓";
+
+  const floorLabel = document.createElement("p");
+  floorLabel.className = "floor-number";
+  floorLabel.textContent = `Floor-${totalFloors}`;
+
+  floorDetails.append(downBtn, floorLabel);
+  topFloor.appendChild(floorDetails);
+  topFloor
+    .querySelector(".down")
+    .addEventListener("click", (e) => handleLiftCall(e));
+  floorMaping.set(`floor-${totalFloors}`, null);
+  outputSection.appendChild(topFloor);
+
+  for (let i = totalFloors - 1; i > 0; i--) {
+    const middleFloors = document.createElement("section");
+    middleFloors.className = "floor";
+    middleFloors.id = `floor-${i}`;
+    middleFloors.innerHTML = `
+      <section class="floor-details">
+          <button type="" class="lift-control up">↑</button>
+          <p class="floor-number">Floor-${i}</p>
+          <button class="lift-control down">↓</button>
+      </section>
+      `;
+
+    middleFloors
+      .querySelector(".up")
+      .addEventListener("click", (e) => handleLiftCall(e));
+    middleFloors
+      .querySelector(".down")
+      .addEventListener("click", (e) => handleLiftCall(e));
+    floorMaping.set(`floor-${i}`, null);
+    outputSection.appendChild(middleFloors);
+  }
+  const groundFloor = document.createElement("section");
+  groundFloor.className = "floor";
+  groundFloor.id = `floor-${0}`;
+  groundFloor.innerHTML = `
+    <section class="floor-details">
+        <button type="" class="lift-control up">↑</button>
+        <p class="floor-number">Floor-${0}</p>
+    </section>
+    `;
+
+  groundFloor
+    .querySelector(".up")
+    .addEventListener("click", (e) => handleLiftCall(e));
+  floorMaping.set(`floor-${0}`, null);
+  outputSection.appendChild(groundFloor);
+
+  outputSection.style.visibility = "visible";
+}
+
+//Making of lifts
+function handleLift(totalLifts) {
+  const groundFloor = document.querySelector(".output__section>#floor-0");
+  for (let i = 1; i <= totalLifts; i++) {
+    const currentLift = document.createElement("section");
+    currentLift.className = "lift";
+    currentLift.id = `lift-${i}`;
+    currentLift.innerHTML = `
+      <section class="door left-door"></section>
+      <section class="door right-door"></section>
+    `;
+    liftMaping.set(`lift-${i}`, 0);
+    checkAvailability.set(`lift-${i}`, true);
+    groundFloor.appendChild(currentLift);
+  }
+}
+
+//handle lift call
+function handleLiftCall(event) {
+  const floorElement = event.target.closest(".floor");
+  if (!floorElement) return;
+  const floorId = floorElement.id;
+
+  if (floorMaping.get(floorId) != null) {
+    const mappedliftId = floorMaping.get(floorId);
+    if (checkAvailability.get(mappedliftId)) {
+      checkAvailability.set(mappedliftId, false);
+      doorOpenClose(floorId, mappedliftId);
+    }
+    return;
+  }
+
+  for (let i = 1; i <= liftCount; i++) {
+    const liftId = `lift-${i}`;
+    if (checkAvailability.get(liftId)) {
+      liftMovement(floorId, liftId);
+      return;
+    }
+  }
+  leftLiftcalls.push(floorId);
+}
+
+function liftMovement(floorId, liftId) {
+  if (floorMaping.get(floorId) !== null) {
+    const mappedLiftId = floorMaping.get(floorId);
+    if (checkAvailability.get(mappedLiftId)) {
+      checkAvailability.set(mappedLiftId, false);
+      doorOpenClose(floorId, mappedLiftId);
+    }
+    return;
+  }
+  checkAvailability.set(liftId, false);
+  floorMaping.set(floorId, liftId);
+
+  floorMaping.forEach((value, key) => {
+    if (key !== floorId && value === liftId) {
+      floorMaping.set(key, null);
+    }
+  });
+
+  // const floor = document.querySelector(`#${floorId}`);
+  const lift = document.getElementById(`${liftId}`);
+  const arr = floorId.split("-");
+  const floorNumber = parseInt(arr[arr.length - 1]);
+  const previousFloor = liftMaping.get(liftId);
+  const diff = Math.abs(previousFloor - floorNumber);
+  const transitionDuration = diff * 2;
+  lift.style.transform = `translateY(-${floorNumber * 100}px)`;
+  lift.style.transition = `all ${transitionDuration}s`;
+
+  setTimeout(() => {
+    doorOpenClose(floorId, liftId);
+  }, transitionDuration * 1000);
+
+  liftMaping.set(liftId, floorNumber);
+}
+
+function doorOpenClose(floorId, liftId) {
+  const lift = document.querySelector(`#${liftId}`);
+  const leftDoor = lift.querySelector(".left-door");
+  const rightDoor = lift.querySelector(".right-door");
+  leftDoor.classList.add("left-move");
+  rightDoor.classList.add("right-move");
+  setTimeout(() => {
+    leftDoor.classList.remove("left-move");
+    rightDoor.classList.remove("right-move");
+    //this lift will be free after 2500ms
+    setTimeout(() => {
+      checkAvailability.set(liftId, true);
+      if (leftLiftcalls.length > 0) {
+        const floorIdFromRemainingCalls = leftLiftcalls[0];
+        leftLiftcalls.shift();
+        liftMovement(floorIdFromRemainingCalls, liftId);
+      }
+    }, 2500);
+  }, 2500);
+}