diff --git a/src/css/main.css b/src/css/main.css index e69de29b..77aec0df 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -0,0 +1,202 @@ +*{ + 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:greenyellow; +} + +.input_container{ + display: flex; + flex-direction: column; + margin-bottom: 1rem; +} + + +label, +input { + font-family: var(--font-secondary); +} + +label{ + margin-left: 2%; + color: greenyellow; +} + + +.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); + border-color: greenyellow; + } + +.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); + color: greenyellow; + +} + +.createLiftFloorButton:hover{ + background-color: black; + color:white; +} + +.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: greenyellow +} +.down{ + font-size: 13px; + border-radius: 4px; + transition-duration: 0.4s; + background-color: white; + color: greenyellow +} +.up:hover{ + background-color: black; + color: white; +} +.down:hover{ + background-color: black; + color: white; +} + +.mainLift{ + display: flex; + margin-left: 10px; +} +.lift{ + width: 50px; + height: 60px; + background-color: greenyellow; + 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:black; + transition: width 2.5s ease-in-out; +} +.gate1-move{ + transform: translateX(-100%); +} + +.gate2-move{ + transform: translateX(100%); +} + +/* second page ko none krh de rha hai */ +.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:rgb(15, 4, 4); + color: greenyellow; + 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..858ee609 100644 --- a/src/index.html +++ b/src/index.html @@ -0,0 +1,30 @@ + + + + + + + + + Linked List + + + +
+

Lift Simulation

+
+ + +
+
+ + +
+ +
+
+ +
+ + + diff --git a/src/js/main.js b/src/js/main.js index e69de29b..c0598a89 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -0,0 +1,316 @@ + +let simulate = document.querySelector('.createLiftFloorButton'); + + +let restart = document.querySelector('.goToFirstPage'); + +restart.addEventListener('click', hideSecondPage); + +simulate.addEventListener('click', () => { + + + let floorInputValue = document.querySelector('#floorNumber').value; + let liftInputValue = document.querySelector('#liftNumber').value; + + + if (floorInputValue == "" || liftInputValue == "") { + alert('please enter the value') + } + + else if (floorInputValue >= 8) { + alert('please enter max 7 floor') + + } + + else if (floorInputValue <= 0 && liftInputValue<=0) + { + alert("please select valid number of floors and lifts") + } + + else if (floorInputValue <= 0 ) { + alert("please select valid number of floors") + } + + else if (liftInputValue <= 0) { + alert("please select valid number of lifts") + } + + else if (window.innerWidth <= 500 && +liftInputValue > 4) { + alert("This screen size can't have more than 4 lifts"); + } + else if (window.innerWidth > 500 && window.innerWidth <= 768 && +liftInputValue > 5) { + alert("This screen size can't have more than 5 lifts"); + } + else if (window.innerWidth > 500 && window.innerWidth <= 1024 && +liftInputValue > 7) { + alert("This screen size can't have more than 7 lifts"); + } + else if (window.innerWidth > 500 && window.innerWidth <= 1440 && +liftInputValue > 11) { + alert("This screen size can't have more than 11 lifts"); + } + else if (window.innerWidth > 500 && window.innerWidth <= 2560 && +liftInputValue > 20) { + alert("This screen size can't have more than 20 lifts"); + } + + //when simulate button clicked hide .firstPage class div and display .secondPage class div + else { + document.querySelector('.firstPage').style.display = 'none'; + document.querySelector('.secondPage').style.display = 'block'; + // console.log('second') + makingFloors(); + } +}); + +//when button back clicked hide .secondPage class div and display .firstPage class div +function hideSecondPage() { + document.querySelector('.secondPage').style.display = 'none'; + document.querySelector('.firstPage').style.display = 'flex'; + + deletingFloors(); + +} + + +function makingFloors() { + + // collect the input no. of floor and lift value + let floorInput = document.querySelector('#floorNumber').value; + let liftInput = document.querySelector('#liftNumber').value; + + + for (let i = floorInput; i > 0; i--) { + + let floordiv = document.createElement('div'); + floordiv.className = 'box'; + + + let buttonLift = document.createElement('div'); + buttonLift.className = 'buttonLift'; + + + let buttondiv1 = document.createElement('div'); + buttondiv1.className = 'button'; + + + let button1 = document.createElement("button"); + let text1 = document.createTextNode("Up"); + button1.className = "up"; + button1.setAttribute('id', `up${i}`); + button1.appendChild(text1); + + + let button2 = document.createElement("button"); + let text2 = document.createTextNode("Down"); + button2.className = "down"; + button2.setAttribute('id', `down${i}`); + button2.appendChild(text2); + + //button1 and button2 append in this div
+ buttondiv1.appendChild(button1); + buttondiv1.appendChild(button2); + + // buttondiv1 append in
+ buttonLift.appendChild(buttondiv1); + + //buttonLift append in this div
+ floordiv.appendChild(buttonLift); + + + //Creating HrFloor + //
+ let hrdiv = document.createElement('div'); + hrdiv.className = 'hrfloorName'; + + //
+ let hr = document.createElement('hr'); + + //Floor 1 + let spanFloorNo = document.createElement('span'); + spanFloorNo.innerText = `Floor ${i}`; + + //
append in this div
+ hrdiv.appendChild(hr); + + //Floor 1 append in this div
+ hrdiv.appendChild(spanFloorNo); + + //
is append in this div
+ floordiv.appendChild(hrdiv); + + //
is append in this div
+ document.querySelector('.secondPage').appendChild(floordiv); + } + + + + let mainLift = document.createElement('div'); + mainLift.className = 'mainLift'; + + for (let j = 1; j <= liftInput; j++) { + + //
+ let liftdiv = document.createElement('div'); + liftdiv.className = 'lift'; + liftdiv.setAttribute('id', `lift${j}`); + + //adding flag="free" attribute in
+ liftdiv.setAttribute('flag', `free`); + + //
+ let gates = document.createElement('div'); + gates.className = 'gates'; + gates.setAttribute('id', `gates`); + + //
+ let gate1 = document.createElement('div'); + gate1.className = 'gate1'; + //
append in this div
+ gates.appendChild(gate1); + + //
+ let gate2 = document.createElement('div'); + gate2.className = 'gate2'; + //
append in this div
+ gates.appendChild(gate2); + + //
append in this div
+ liftdiv.appendChild(gates); + + //
append in this div
+ mainLift.appendChild(liftdiv); + } + + + + //selecting all the div class .buttonLift we created using querySelectorAll + const mainbuttonlift = document.querySelectorAll('.buttonLift'); + // console.log(mainbuttonlift); + + //selecting last div class .buttonLift + const lastbox = mainbuttonlift[mainbuttonlift.length - 1]; + // console.log(lastbox) + + //
append in this div
+ lastbox.appendChild(mainLift); + + + + // select all lift we created above using querySelectorAll + let selectAllLift = document.querySelectorAll('.lift'); + // console.log('s',selectAllLift) + + // select all up button using querySelectorAll + let up = document.querySelectorAll('.up'); + + // select all down button using querySelectorAll + let down = document.querySelectorAll('.down'); + + //store no. of lifts in nUp + let nUp = up.length; + let prev = 0; + + //create oldFloorValueArray for calculation purpose + let oldFloorValueArray = []; + + for (let i = 0; i < selectAllLift.length; i++) { + oldFloorValueArray.push(1) + } + // console.log(oldFloorValueArray)//oldFloorValueArray=[1,1,1,1]; + + //Now we loop through all up button and add eventListener in all up button + up.forEach((e, i) => { + e.addEventListener('click', () => { + + //create floorValue for calculation purpose + let floorValue = nUp - i; + for (let i = 0; i < selectAllLift.length; i++) { + // console.log(selectAllLift) + + //check
lift attribute flag has value free + if (selectAllLift[i].getAttribute('flag') === 'free') { + // set attribute flag value busy i.e.
+ selectAllLift[i].setAttribute('flag', 'busy'); + + + moveLift(selectAllLift[i], floorValue, oldFloorValueArray[i]); + oldFloorValueArray[i] = floorValue; + // console.log(oldFloorValueArray); + // console.log(selectAllLift[i]); + break; + } + } + }) + }) + + + + down.forEach((e, i) => { + e.addEventListener('click', () => { + let floorValue = nUp - i; + for (let i = 0; i < selectAllLift.length; i++) { + // console.log(selectAllLift) + if (selectAllLift[i].getAttribute('flag') === 'free') { + selectAllLift[i].setAttribute('flag', 'busy'); + moveLift(selectAllLift[i], floorValue, oldFloorValueArray[i]); + oldFloorValueArray[i] = floorValue; + + break; + } + } + }) + }) +} + + +function moveLift(liftno, floorNo, oldFloorValue) { + + + liftno.style.transform = `translateY(${-95 * (floorNo - 1)}px)`; + + + let prev = `${2 * Math.abs(floorNo - oldFloorValue)}s` + liftno.style.transitionDuration = prev; + + + + + + setTimeout(() => { + + gateopenclose(liftno); + setTimeout(() => { + liftno.setAttribute('flag', 'free') + }, 5500); + console.log(liftno.getAttribute('flag')) + }, 2 * Math.abs(floorNo - oldFloorValue) * 1000) + +} + +function gateopenclose(liftno) { + let gates = liftno.firstChild; + let gate1 = document.querySelector('.gate1'); + let gate2 = document.querySelector('.gate2'); + + + setTimeout(() => { + + gates.children[0].style.width = '3px'; + gates.children[1].style.width = '3px'; + }, 1000); + + + setTimeout(() => { + gates.children[0].style.width = '25px'; + gates.children[1].style.width = '25px'; + }, 3500) +} + + + +function deletingFloors() { + let floorInput = document.querySelector('#floorNumber').value; + + for (let i = floorInput; i > 0; i--) { + let floordiv = document.querySelector('.box'); + floordiv.remove(); + } +}