Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 25, 2022 03:58 pm GMT

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>

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

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


Original Link: https://dev.to/urstrulyvishwak/project-3-build-keyboard-using-javascript-59fg

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To