Create a virtual elevator that meets the following requirements:
- Ability to select floor 1 to 10 on a keypad.
- There is a representation of an elevator and a building with 10 floors. This can be as simple as 10 blocks stacked on top of each other for the floors and a different colored block that represents the elevator.
- A current floor display shows what floor the elevator is currently on.
- Upon selecting a floor on the keypad
- The selected floor button lights up
- The elevator begins to move to the selected floor
- The current floor display updates as the elevator moves past each floor
- Once the elevator reaches the selected floor
- The selected floor button on the keypad dims
- The elevator waits for 3 seconds before returning to the lobby / 1st floor
- If other floors are selected while the elevator is traveling to the initially selected floor
- The elevator should stop at the newly selected floors only if it hasn't traveled beyond them yet.
- If the elevator has traveled beyond the newly selected floors, the elevator should first stop at the initially selected floor, pausing for 3 seconds, before continuing on to the newly selected floors.
Some key things to keep in mind as you complete the challenge:
- Code legibility and maintainability are the most important factors in this challenge. We are less concerned with whether you choose to use vanilla JS vs one of the many available JS frameworks. Use whatever you think the best tool for the job is that will lead to the most legible, maintainable code.
- Take your time to come up with the best possible variable names you can. Naming is an extremely important part of code legibility/maintainability
- Bonus points for adding some nice styles and animations / transitions to the UI.