Interactive online courses HTML Academy
2026-03-09 12:56 Diff
https://htmlacademy.org/courses/javascript-basics/element-collections-properties/virtual-keyboard

Meow! I spilled milk on my laptop. Yes, it happened again. So what would you expect? All I have is paws, after all!

After Muffin once again knocked over his saucer of milk on the keyboard, some keys began to stick, making it impossible for him to do his work. However, he still has pressing deadlines! Muffin decided that he needed a virtual keyboard so that he could type text by clicking on the buttons with the mouse (which is something cats are more used to handling anyways).

The web designer completed his part of the work. He laid out the keyboard itself and the display window where the typed text will be shown. The keyboard consists of 33 buttons with letters, a space bar button, and a button to clear the display. The display is the <div> element. The text that is typed using the virtual keyboard is its text content.

Your assignment is to write a script that will make the keyboard work.

Buttons with letters and “space bar” have the key class, and the display has the display class. When you click on a button with a letter or the space bar, the text content of this button should be added to the text content of the display.

When you click on the clear button, all of the text inside the display should be deleted. To accomplish this, you need to write an empty line to the text content of the display.

You can add a new letter to the text content of the element in various ways.

// Create (or find) the element let text = document.createElement('p'); // Let it have the following text content text.textContent = 'Letters: ';

Add a new letter using concatenation:

// Full record text.textContent = text.textContent + 'a'; // Result: 'Letters: a' // Short record text.textContent += 'b'; // Result: 'Letters: ab'

Add a new letter using the append method:

text.append('c'); // Result: 'Letters: abc'

Muffin wants to type text by clicking on the buttons of the virtual keyboard and then having the letters shown on the display. When you click on the “Clear” button, the display should be cleared. Write a script that can accomplish this.