DEV Community

Cover image for Project 3: Build keyboard using Javascript
Kurapati Mahesh
Kurapati Mahesh

Posted on • Edited on

5 2

Project 3: Build keyboard using Javascript

I want to build this keyboard phase by phase as we regularly do. Today[25-FEB-2021], I am going to build basic keyboard implementation.

Task 1: Show all alphabets on web page.
Task 2: Print the letter in browser console on click.

Here is the code:

<html>

<body>
</body>
<script>
    for (let i = 65; i <= 90; i++) {
        const button = document.createElement('button');
        const char = String.fromCharCode(i);
        const span = document.createElement('span');
        span.style.fontSize = '50px';
        span.appendChild(document.createTextNode(char));
        button.appendChild(span);
        document.body.appendChild(button);
        button.setAttribute('id', char);
        button.style.padding = '30px';
        button.style.margin = '10px';
        button.onclick = function () { getLetter(char) };
    }
    function getLetter(id) {
        const letter = document.getElementById(id).textContent;
        console.log(letter);
    }
</script>

</html>
Enter fullscreen mode Exit fullscreen mode

Task1:

for (let i = 65; i <= 90; i++) { -> 65 - 90 ASCII values for alphabets. Loop iterates between 65-90 and produces one letter for iteration.

const button = document.createElement('button'); -> creates a button.

const char = String.fromCharCode(i); -> returns alphabets equivalent to ASCII value. like 65 -> A, 66 -> B, .... 90 -> Z.

const span = document.createElement('span');
span.style.fontSize = '50px';
span.appendChild(document.createTextNode(char));
button.appendChild(span);
Enter fullscreen mode Exit fullscreen mode

creates text to show on button and appending it. Set fontSize for better view.

document.body.appendChild(button); -> Appending each button to body.

button.setAttribute('id', char);
button.style.padding = '30px';
button.style.margin = '10px';
Enter fullscreen mode Exit fullscreen mode

setting id attribute useful for firing click event and setting this as character itself. Also, setting some padding and margin for better view.

button.onclick = function () { getLetter(char) }; -> Setting onclick for each button to trigger getLetter function to perform action.

function getLetter(id) {
       const letter = document.getElementById(id).textContent;
       console.log(letter);
    }
Enter fullscreen mode Exit fullscreen mode

We are getting the button by its id and capturing its textContent which basically the letter you clicked.

Next, printing to console.

Here is the result:

Image description

That is it for today. I will try to improve further tomorrow.

Thanks😊 Happy Reading!.


💎 Love to see your response

  1. Like - You reached here means. I think, I deserve a like.
  2. Comment - We can learn together.
  3. Share - Makes others also find this resource useful.
  4. Subscribe / Follow - to stay up to date with my daily articles.
  5. Encourage me - You can buy me a Coffee

Let's discuss further.

  1. Just DM @urstrulyvishwak
  2. Or mention
    @urstrulyvishwak

For further updates:

Follow @urstrulyvishwak

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up