DEV Community

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

Posted on • Edited on

Project 3: Build keyboard using Javascript

#javascript #html #css #discuss

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

Top comments (0)

Read next

neetigyachahar profile image

What's new in Next.js 15

Neetigya Chahar -

maieonbrixx profile image

Structuring Your React Applications with "Layout Primitives": Today, let's focus on the unbeatable <Stack /> 🚀

Mahdy -

dhanushnehru profile image

Should you STOP using VPN for Security ?

Dhanush N -

andrewdejackson profile image

Tiiny Host Alternatives: Why Static.app is Better

Andrew Jackson -