diff --git a/src/css/main.css b/src/css/main.css
index e69de29b..8cf46063 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -0,0 +1,156 @@
+*{
+ margin: 0;
+ padding: 0;
+ font-family: 'Roboto', sans-serif;
+}
+.flexClass{
+ margin: auto;
+ align-items: center;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ position: relative;
+}
+form{
+ position: absolute !important;
+ transform: translate(-50%, 50%);
+
+}
+.btn{
+ font-weight:600
+}
+form{
+ border: 0.2rem #00000026 solid;
+ padding: 2rem;
+}
+
+#myDiv{
+ background-color: #000;
+ padding-top: 2rem;
+
+}
+
+
+body{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+
+section{
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ border: 1px solid black;
+}
+.floors{
+ border-bottom: 0.1rem black solid;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ height: 99px;
+ z-index: 2;
+}
+.lift{
+ width: 50px;
+ height: 80px;
+ display: flex;
+ flex-direction: row;
+ background-color: #00b5b7
+}
+
+@media screen and (max-width: 1000px){
+ .lift{
+ width: 25px;
+ height: 40px;
+ display: flex;
+ flex-direction: row;
+ background-color: #00b5b7
+ }
+}
+.upAndDown{
+ display: flex;
+ flex-direction: column;
+ margin: 1rem;
+ width: 5rem;
+ justify-content: space-around;
+ width: 10%;
+}
+.liftContainer{
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ align-items: flex-end;
+ background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);}
+.floorName{
+ margin: 1rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 4rem;
+ font-weight: 600;
+}
+
+@media screen and (max-width:1000px) {
+ .floorName{
+ margin: 1rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 1rem;
+ font-size: 10px;
+ }
+}
+
+.door-left{
+ border: 1px black solid;
+ width: 50%;
+ height: 100%;
+ background-color: #000;
+}
+
+
+
+
+.door-right{
+ width: 50%;
+ height: 100%;
+ background-color: #000;
+}
+.backbutton{
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ padding: 1rem;
+}
+
+button{
+ border: 1px solid #20262e;
+ border-radius: 4px;
+ color: #080a08;
+ line-height: 18px;
+ cursor: pointer;
+ margin: 2px;
+ width: 110px;
+ height: 35px;
+ display: -moz-box;
+ display: flex;
+ -moz-box-align: center;
+ align-items: center;
+ -moz-box-pack: center;
+ justify-content: center;
+ text-align: center;
+ background-color: #20262e;
+ color: #fff;
+}
+.backbut{
+ height: 2rem;
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index e69de29b..da3155b0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Lift Simulation
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
index e69de29b..2fe900c0 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -0,0 +1,341 @@
+
+const body1 = document.querySelector("body")
+
+const button1 = document.querySelector(".formButton");
+const input1 = document.querySelector(".input1")
+const input2 = document.querySelector(".input2")
+
+
+button1.addEventListener('click',(event)=>{
+
+ const numberOfFloors = parseInt(input1.value);
+ const numberOfLifts = parseInt(input2.value);
+ if(inputValidation(numberOfFloors,numberOfLifts)){
+ loadpage(numberOfFloors,numberOfLifts)
+ const bb = document.querySelector('body');
+ const form = document.querySelector(".flexClass");
+ form.style.display = "none"
+
+ }
+
+ event.preventDefault();
+
+
+})
+
+
+//**************************layout begins***********************
+
+
+function loadpage(numberOfFloors, numberOfLifts){
+
+ const section1 = document.createElement("SECTION");
+ section1.setAttribute("id","layoutDiv");
+ const body2 = document.querySelector("body");
+
+ const bbdiv = document.createElement("div");
+ body2.appendChild(bbdiv);
+
+ const backButton = document.createElement("BUTTON");
+ backButton.textContent = "Reset";
+ backButton.setAttribute("class","backbut");
+ bbdiv.appendChild(backButton)
+ bbdiv.setAttribute("class","backbutton")
+
+ body2.appendChild(section1);
+
+ for(let i = numberOfFloors; i >=1;i-- ){
+ const floor = document.createElement("div"); //creating floor
+ section1.appendChild(floor); //appending floor to section
+ floor.setAttribute("class","floors");
+ floor.setAttribute("data-floorNo",i); //setting the class for the floors
+
+ const upAndDown = document.createElement("div") //creating a upAndDown div for the floor
+ upAndDown.setAttribute("class","upAndDown") //setting the class for the upAnd Down div where the buttons will go
+ floor.appendChild(upAndDown); //appending the upAndDown div for the floor
+
+
+ if(i == numberOfFloors) //if floor is the top floor, which it will be because we start
+ { //the loop from top floor and we need only one down button
+ const buttonDown = document.createElement("BUTTON");
+ buttonDown.textContent = "Down";
+ buttonDown.setAttribute("class","Btn");
+ buttonDown.setAttribute("data-assigned","false");
+ floor.setAttribute("data-liftAssigned","false")
+ buttonDown.setAttribute("data-buttonFloor",i);
+ buttonDown.addEventListener("click",callingLift);
+ upAndDown.appendChild(buttonDown);
+ }
+ else if(i == 1 ) // if floor is ground floor, we only need the up button
+ {
+ const buttonUp = document.createElement("BUTTON");
+ buttonUp.textContent = "Up";
+ buttonUp.setAttribute("class","Btn");
+ buttonUp.setAttribute("data-buttonFloor",i);
+ buttonUp.setAttribute("data-assigned","true");
+ buttonUp.addEventListener("click",callingLift);
+ floor.setAttribute("data-liftAssigned","true");
+ upAndDown.appendChild(buttonUp);
+ }
+ else
+ { // in all other cases we need 2 buttons
+ const buttonUp = document.createElement("BUTTON");
+ buttonUp.setAttribute("class","Btn");
+ buttonUp.setAttribute("data-buttonFloor",i);
+ buttonUp.addEventListener("click",callingLift);
+ // buttonUp.setAttribute("data-assigned","false");
+ const buttonDown = document.createElement("BUTTON");
+ buttonDown.setAttribute("class","Btn");
+ buttonDown.setAttribute("data-buttonFloor",i);
+ buttonDown.setAttribute("data-assigned","false");
+ buttonDown.addEventListener("click",callingLift);
+ buttonUp.textContent = "Up";
+ buttonDown.textContent = "Down";
+ upAndDown.appendChild(buttonUp);
+ upAndDown.appendChild(buttonDown);
+ }
+
+ const liftContainer = document.createElement("div");
+ liftContainer.setAttribute("class","liftContainer")
+ floor.appendChild(liftContainer);
+
+
+ const fn = document.createElement("div");
+ fn.setAttribute("class","floorName");
+ fn.textContent = "Floor"
+ floor.appendChild(fn);
+ fno = document.createElement("div");
+ fno.textContent = i;
+ fn.appendChild(fno);
+
+
+ if(i == 1)
+ {
+ for(let j = 1; j <= numberOfLifts;j++ )
+ {
+ const lift = document.createElement("div");
+ lift.setAttribute("class","lift");
+ lift.setAttribute("data-liftno",j);
+ lift.setAttribute("data-liftfloor",i);
+ lift.setAttribute("data-liftAvailability","Available");
+ liftContainer.appendChild(lift);
+
+ const door1 = document.createElement("div");
+ const door2 = document.createElement("div");
+ door1.setAttribute("class","door-left");
+ door2.setAttribute("class","door-right");
+ lift.appendChild(door1);
+ lift.appendChild(door2);
+
+
+ }
+ }
+
+ }
+
+
+ //------Reset Button Click---------
+ backButton.addEventListener('click',()=>{
+ const bb = document.querySelector('body');
+ bb.removeChild(section1);
+ const form = document.querySelector(".flexClass");
+ const input1 = document.querySelector(".input1")
+ const input2 = document.querySelector(".input2")
+ input1.value = '';
+ input2.value = '';
+ form.style.display = "block";
+ backButton.style.display = "none";
+ });
+}
+
+
+let liftRequest = []; // this stores the floor numbers of the button where the lifts are called in a queue
+
+let liftAvail = []; // shows the availability of the lifts, the size of this changes according to the number of lifts available
+
+let currentOccupiedFloors = []; // shows on which floors are the lifts available currently
+
+let currentClick = [];
+
+function LiftStatus(Array){
+
+ for(let i = 0; i < Array.length; i++)
+ {
+ let status = Array[i].getAttribute("data-liftAvailability");
+ if(status == "Available"){
+ return i;
+ }
+ }
+
+}
+
+function checkingAllBusy(Array){
+
+ for(let i = 0; i < Array.length; i++)
+ {
+ let status = Array[i].getAttribute("data-liftAvailability");
+ if(status == "Available"){
+ return false;
+ }
+ }
+ return true;
+}
+
+function closestLift(buttonFloor,Array){
+ let cL;
+ let minDistance = Infinity;
+ for(let i = 0; i< Array.length; i++)
+ {
+ diffInFloors = 0;
+ if(Array[i].getAttribute("data-liftAvailability") == "Available"){
+ let floorOccupiedByLift = Array[i].getAttribute("data-liftfloor");
+ let diffInFloors = Math.abs(buttonFloor-floorOccupiedByLift);
+ if(minDistance > diffInFloors){
+ cL = i;
+ minDistance = diffInFloors;
+ }
+ }
+ }
+ return cL;
+};
+
+
+const callingLift = (event)=>{
+
+
+ const buttonClicked = event.target;
+
+ const buttonFloor = buttonClicked.getAttribute("data-buttonFloor");
+
+ if(currentClick.includes(buttonFloor))
+ {
+ return;
+ }
+
+ currentClick.push(buttonFloor);
+ console.log("clicked floors are",currentClick)
+
+
+ console.log("According to new fn floor clicked is ",buttonFloor);
+
+ const liftObject = document.querySelectorAll('.lift');
+ let liftArray = Array.from(liftObject);
+ // console.log(liftArray)
+ // LiftStatus(liftArray)
+ // let AvailableLift = LiftStatus(liftArray);
+ let AvailableLift = closestLift(buttonFloor,liftArray);
+ console.log("available closest lift = ",AvailableLift);
+ // console.log("Available lift is", LiftStatus(liftArray));
+ // console.log(typeof(AvailableLift))
+ if(checkingAllBusy(liftArray))
+ {
+ console.log("all lifts are busy");
+ if(!liftRequest.includes(parseInt(buttonFloor))){
+ liftRequest.push(parseInt(buttonFloor));
+ }
+
+ console.log(liftRequest);
+ }
+ else{
+
+ movingLift(buttonFloor,AvailableLift);
+ }
+
+
+
+}
+
+
+const movingLift = (floorCalled, AvailableLift)=>{
+
+ const liftObject = document.querySelectorAll('.lift');
+ let liftArray = Array.from(liftObject);
+
+ const currentfloor = liftArray[AvailableLift].getAttribute("data-liftfloor");
+
+ const floorDiff = Math.abs(floorCalled - currentfloor);
+
+ setTimeout(() => {
+ liftArray[AvailableLift].setAttribute("data-liftAvailability", "busy");
+ liftArray[AvailableLift].style.transition = `transform ${floorDiff * 2}s ease-in-out`;
+ liftArray[AvailableLift].style.transform = `translateY(${-(floorCalled - 1) * 100}px)`;
+ liftArray[AvailableLift].setAttribute("data-liftfloor", floorCalled);
+ }, 0);
+
+ setTimeout(() => {
+ openDoors(liftArray, AvailableLift);
+ }, floorDiff * 2000);
+
+ setTimeout(() => {
+ closeDoors(liftArray, AvailableLift);
+ // liftArray[l].setAttribute("data-liftAvailability", "Available");
+ }, floorDiff * 2000 + 2500);
+ setTimeout(()=>{
+ liftArray[AvailableLift].setAttribute("data-liftAvailability", "Available");
+ if(liftRequest.length !== 0 ){
+ const consequentRequest = liftRequest[0];
+ movingLift(consequentRequest,AvailableLift);
+ liftRequest.shift();
+ console.log(liftRequest);
+ }
+ currentClick.shift();
+ },(floorDiff*2000)+5000)
+
+
+}
+
+function openDoors(liftArray,l){
+ liftArray[l].children[0].style.transform=`translateX(${-100}%)`;
+ liftArray[l].children[1].style.transform=`translateX(${100}%)`;
+ liftArray[l].children[0].style.transition=`transform 2.5s`;
+ liftArray[l].children[1].style.transition=`transform 2.5s`;
+}
+
+function closeDoors(liftArray,l){
+ const floorNumber = parseInt(liftArray[l].getAttribute("data-liftfloor"));
+ liftArray[l].removeAttribute("data-assigned");
+ liftArray[l].children[0].style.transform=`translateX(${0}%)`;
+ liftArray[l].children[1].style.transform=`translateX(${0}%)`;
+ liftArray[l].children[0].style.transition=`transform 2.5s`;
+}
+
+
+
+
+
+const inputValidation = (floorCount, liftCount) => {
+ if (isNaN(floorCount) || isNaN(liftCount) || floorCount === "" || liftCount === "") {
+ alert("Input cannot be empty");
+ return false;
+ } else if (floorCount % 1 !== 0 || liftCount % 1 !== 0) {
+ alert("Numbers should be whole (non-decimal) values");
+ return false;
+ } else if (floorCount <= 0 || liftCount <= 0) {
+ alert("Numbers should be positive and also greater than zero");}
+ else if (window.innerWidth <= 1000 && liftCount > 3) {
+ alert("On mobile, for flawless experience, number of lifts should be 3 or less");
+ return false;
+ }else if (window.innerWidth <= 1000 && floorCount > 5) {
+ alert("On mobile, for flawless experience, number of floors should be 5 or less");
+ return false;
+ } else if (window.innerWidth > 1000 && liftCount > 10) {
+ alert("On desktop,for flawless experience, number of lifts should be 10 or less");
+ return false;
+ } else {
+ return true;
+ }
+};
+
+
+
+
+function adjustPlaceholderText() {
+ const input1 = document.querySelector('.input1');
+ const input2 = document.querySelector('.input2');
+ const isMobile = window.innerWidth <= 1000; // Adjust the breakpoint to 1000px
+
+}
+
+adjustPlaceholderText();
+
+window.addEventListener('resize', adjustPlaceholderText);
diff --git a/src/popular_v1.svg b/src/popular_v1.svg
new file mode 100644
index 00000000..6f36e4d9
--- /dev/null
+++ b/src/popular_v1.svg
@@ -0,0 +1,1821 @@
+