Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Calculator app

@AndresMpa

Desktop design screenshot for the Calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Community feedback

@Ayoubrabiae

Posted

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))
  1. 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

@AndresMpa

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord