addEventListener in a keyboard button project

To achieve this, you can listen for the keydown event in your JavaScript code and trigger a function when a key is pressed. This event will be fired whenever a key is pressed on your physical keyboard, and then you can find the corresponding button in your keyboard project, display it, and change its background color.

In your JavaScript file, add an event listener to detect when a key is pressed on your physical keyboard.

    document.addEventListener('keydown', function(event) {
  // Get the pressed key
  const pressedKey = event.key.toUpperCase(); // Ensure it's uppercase

  // Find the corresponding button in the virtual keyboard
  const button = document.querySelector(`button[data-key="${pressedKey}"]`);

  if (button) {
    // Change the background color of the button when the key is pressed
    button.style.backgroundColor = 'yellow'; // You can change this color
  }
});

// Optional: Remove the background color when the key is released
document.addEventListener('keyup', function(event) {
  const releasedKey = event.key.toUpperCase();
  const button = document.querySelector(`button[data-key="${releasedKey}"]`);
  
  if (button) {
    // Reset the background color when the key is released
    button.style.backgroundColor = ''; // Reset to original color
  }
});

Example Angular Component:

import { Component, Renderer2, OnInit } from '@angular/core';

@Component({
  selector: 'app-virtual-keyboard',
  templateUrl: './virtual-keyboard.component.html',
  styleUrls: ['./virtual-keyboard.component.css']
})
export class VirtualKeyboardComponent implements OnInit {

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    // Listen for keydown events in the entire document
    this.renderer.listen('document', 'keydown', (event) => {
      this.highlightKey(event.key.toUpperCase());
    });

    this.renderer.listen('document', 'keyup', (event) => {
      this.removeHighlight(event.key.toUpperCase());
    });
  }

  highlightKey(key: string) {
    const button = document.querySelector(`button[data-key="${key}"]`);
    if (button) {
      button.style.backgroundColor = 'yellow'; // Change color
    }
  }

  removeHighlight(key: string) {
    const button = document.querySelector(`button[data-key="${key}"]`);
    if (button) {
      button.style.backgroundColor = ''; // Reset color
    }
  }
}

HTML Template for Angular Component:

<div id="keyboard">
  <button class="key" data-key="A">A</button>
  <button class="key" data-key="B">B</button>
  <button class="key" data-key="C">C</button>
  <!-- Add more keys as needed -->
</div>