Elevator Challenge

elevator-challenge.md

Elevator Challenge

Create a virtual elevator that meets the following requirements:

1. Ability to select floor 1 to 10 on a keypad.
2. 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.
3. A current floor display shows what floor the elevator is currently on.
4. 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

5. 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.

Notes

Some key things to keep in mind as you complete the challenge:

• Please use Typescript
• Include a README file that contains any setup instructions and any notes that could be helpful for us (e.g. any interesting challenges you came across, things that you would do to improve your solution if you had more time to work on it, etc.)
• Don't create everything with just one commit. We would love to see how you structure your commits.
• Try to structure it as a real application, so feel free to separate out any config values or utility functions into their own respective files. Don't feel like everything needs to be done in a single file.
• 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.

Bonus Points

• Add some nice styles and animations / transitions to the UI (feel free to use TailwindCSS)
• If you have extra time, adding a few tests using your favorite testing library would be great to see.
• A deployed solution to Netlify or Github Pages