Project 4: Speaking keyboard in Javascript
Tags: javascript, html, css, discuss
Published: 2022-02-26 07:07:43

This article is the extension for [project 3] (https://dev.to/urstrulyvishwak/project-3-build-keyboard-using-javascript-59fg). Please visit it before starting this for better understanding.

In the last article, we have shown `keyboard` and printed clicked `letter` in `console`. We are going to do following tasks in this article:

**Task 1**: Speak the clicked letters
**Task 2**: Print letters just below the keyboard instead in console.

Here is the whole 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 speech = new SpeechSynthesisUtterance();
        const letter = document.getElementById(id).textContent;
        speech.text = letter;
        window.speechSynthesis.speak(speech);
        const p = document.createElement('p');
        p.style.fontSize = '30px';
        p.innerHTML = letter;
        document.body.appendChild(p);
    }
</script>

</html>
```

We have pretty much seen what are we doing inside `for` loop in project 3.

We don't need to reinvent the wheel here. Let's jump and understand how we can achieve Task 1 & 2 now.

`getLetter` function gets triggered when user clicks on any letter in keyboard.

so, understanding what's inside of it would be suffice.

```
const speech = new SpeechSynthesisUtterance();
        const letter = document.getElementById(id).textContent;
        speech.text = letter;
        window.speechSynthesis.speak(speech);
```
The above snippet is responsible for speaking the clicked letter.

`SpeechSynthesisUtterance` is the class instantiated in first line. Then, we captured `textContent` of the letter clicked. Assign that to `speech` to inform `synthesisUtterance` which text to speech. After that, use `speak` function to speak the word. We are done with **Task 1**.

Let's move on to **Task 2** i.e. printing the clicked item just below the keyboard itself. It's quite straightforward. 

```
const p = document.createElement('p');
p.style.fontSize = '30px';
p.innerHTML = letter;
document.body.appendChild(p);

```

creating `p` element with `fontSize` as `30px` for better view. `innerHtml` sets `letter` to `p` and `appendChild` appends `p` to document `body`.

Now, if you click on any letter which will be uttered and displayed on web page.

Here is the result:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11vwaej97ufpvh6qcchc.gif)


Thank You :) 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>