⏰ 15 mins

1. For this exercise, I’ve hidden the profile form and included a button that allows the user to toggle its appearance. This already works great.
2. Your task is to create some keyboard shortcuts that do the same thing.
   1. esc - hide the form
   2. ⌘ + e or ⊞ + e on windows - show the form

<aside> 💡 HINT: you can use e.metaKey to check for ⌘ or ⊞

</aside>

<aside> 💡 HINT: you can use e.key to check for which key has been pressed. Use console log to test that

</aside>

1. You should use Vue’s lifecycle hooks to add a keydown listener to the window and make sure to remove it whenever the current page component is no longer in use

keyboard-shortcuts.mp4

Helpful Resources

1. Vue.js Docs - Lifecycle Hooks
2. MDN Docs - addEventListener
3. MDN Docs - removeEventListener
4. MDN Docs - Keydown Event