Project 3: Build keyboard using Javascript
Tags: javascript, html, css, discuss
Published: 2022-02-25 15:58:46

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>
```

**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);
```
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';
```
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);
    }
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jue8mdmf6e0n4e8ena6t.gif)

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

Thanks😊 Happy Reading!.

<hr style="border-width: 2px;border-color: #87CEEB;">
<h1> 💎 Love to see your response</h1>
<ol>
<li style="padding: 10px;font-size: 30px;"><b>Like</b> - You reached here means. I think, I deserve a like.  </li>
<li style="padding: 10px;font-size: 30px;"><b>Comment</b> - We can learn together. </li>
<li style="padding: 10px;font-size: 30px;"><b>Share</b> - Makes others also find this resource useful.</li>
<li style="padding: 10px;font-size: 30px;"><b>Subscribe / Follow</b> - to stay up to date with my daily articles. </li>
<li style="padding: 10px;font-size: 30px;"><b>Encourage me</b> - <a href="https://www.buymeacoffee.com/urstrulyvishwak" target="_blank">You can buy me a Coffee</a>
</ol>
<hr style="border-width: 2px;border-color: #87CEEB;">

<h2> Let's discuss further. </h2>

<ol style="padding: 20px;">
<li style="padding: 10px;font-size: 30px;">Just DM <br> <a href="https://twitter.com/messages/compose?recipient_id=1388837509824610314&text=Hello world"
class="twitter-dm-button" data-screen-name=“@urstrulyvishwak” data-size="large">@urstrulyvishwak</a>
</li>
<li style="padding: 10px;font-size: 30px;">
<p> Or mention <br> <a href="https://twitter.com/intent/tweet?screen_name=urstrulyvishwak&ref_src=twsrc^tfw" class="twitter-mention-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">@urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> </li>
</ol>

<h2> For further updates: </h2>
<a href="https://twitter.com/urstrulyvishwak?ref_src=twsrc^tfw" class="twitter-follow-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">Follow @urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>