CODEWITHSUNDEEP
toggleaddeventlistenerkeypress
Murteza Mohasseliy
Murteza Mohasseliy

Reputation: 1

addEventListener in a keyboard button project

I have a mini project about a keyboard, I want to know how I can add the addEventListener in my JavaScript code to if I press a key in my own keyboard, show that button in my project and change the background color of that button as well I need your help very soon if there is anyone help me. thank you so much!!

I want to try if I press a key in my own keyboard, that key in keyboard project show for me and change the background color of that button.

Upvotes: 0

Views: 18

Answers (1)

Test
Test

Reputation: 61

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>

Upvotes: 0

Related Questions