Calculator app

Community feedback

• 

  Ayoub RABIE•430

  @AyoubrabiaePosted about 1 year ago

  Hey Andres,

  Great job! 👏

  I have an awesome idea to make things more fun and user-friendly. 🤗

  Let's add a feature that lets users do calculations using their keyboard. 💻🖱️

  Here's how to do it:

  1. In your HTML code, for each button, add a data-key attribute with the corresponding keyboard key name (e.g., "1" for number keys, "Backspace" for the delete key).

  2. Now, in your JavaScript, add an event listener like this:

  // Listen for keyboard input
  addEventListener("keydown", (event) => handleKeyboardInput(event))
  

  3. You can choose any name for the function; let's call it handleKeyboardInput. Here's the function with comments to explain:

  // Function to handle keyboard input
  function handleKeyboardInput(event) {
    // Find the button with the data-key attribute matching the pressed key
    const button = document.querySelector(`[data-key="${event.key}"]`);
  
    // If the button exists, trigger a click event on it
    if (button) {
      button.click();
    }
  }
  

  That's it! 🚀 Happy coding, and enjoy the improved functionality! If you have questions or need more help, feel free to ask. 😊💻🌟

  1

  ---

  

  Andres M. Prieto•150

  @AndresMpaPosted about 1 year ago

  Hey @Ayoubrabiae thanks for your idea. I already started with that, but I haven't submitted it yet since I uploaded the solution today at 5 a.m so that smoothie of brain that I got since I went to bed is still figuring out how to end the awesome idea it started a couple of hours ago. Thanks anyway, it's kind of you to take the time to make a guide for me.

  1