window.onload = function() { var abc = [ ['1','2','3','4','5','6','7','8','9','0'], ['q','w','e','r','t','y','u','i','o','p'], ['a','s','d','f','g','h','j','k','l'], ['z','x','c','v','b','n','m'], [',',' ','@','.'] ]; //Create element table var table = document.createElement("table"); //Use the div for input the table var div = document.getElementById("demo"); //Input de table in div div.appendChild(table); //---------------------------------------------------- for (let v = 0; v < abc.length; v++) { //Create element tr with id=create var tr = document.createElement("tr"); tr.setAttribute('id', 'id'+v); //Input tr in the table table.appendChild(tr); for (let i = 0; i < abc[v].length; i++) { //create td's with class name equal to value var td = document.createElement("td"); td.setAttribute('class', 'cl'+abc[v][i]); tr = document.getElementById('id'+v); tr.appendChild(td); td.innerHTML = abc[v][i]; } } var text = document.getElementById('text'); var click = document.getElementsByTagName('td'); Array.prototype.forEach.call(click,addEvent); function addEvent(td) { td.addEventListener('click', function(event){ var tdClicked = event.target.innerHTML; text.innerHTML += tdClicked; }); } let itens = document.getElementsByTagName("td"); let count = 0; tr = document.getElementsByTagName('tr')[3]; td = document.createElement('td'); td.setAttribute('class', 'clclean'); tr.appendChild(td); td.innerHTML = '⬅️'; itens[36].onclick = () => { text.innerHTML = text.innerHTML.substr(0, (text.innerHTML.length -1));}; td = document.createElement('td'); td.setAttribute('class', 'clucase'); td.innerHTML = '⬆️'; tr.insertBefore(td, itens[29]); itens[29].onclick = () => { for (x = 10; x <= 36; x++) { itens[x].innerHTML = itens[x].innerHTML.toUpperCase()} count++ if (count % 2 == 0) { for (x = 10; x <= 36; x++) { itens[x].innerHTML =itens[x].innerHTML.toLowerCase()} }}; tr = document.getElementsByTagName('tr')[4]; td = document.createElement('td'); td.setAttribute('class', 'cldowm'); tr.appendChild(td); td.innerHTML = '⤵️'; itens[42].onclick = () => { text.innerHTML += '\n' }; td = document.createElement('td'); td.setAttribute('class', 'cl123'); td.innerHTML = '🔢'; tr.insertBefore(td, itens[38]); itens[38].onclick = () => { demo.innerHTML = ""; secondkeyword()}; td = document.createElement('td'); td.setAttribute('class', 'clemoji'); td.innerHTML = '😀'; tr.insertBefore(td, itens[39]); itens[39].onclick = () => { demo.innerHTML = ""; emojikeyword(); } } function secondkeyword() { var abc = [ ['#','€',"&",'_','-','1','2','3','?'], ['@','(',')','=','+','4','5','6','!'], ["'",':','%','/','7','8','9'], ['"',' ','*',',','0','.'] ]; var table = document.createElement("table"); var div = document.getElementById("demo"); div.appendChild(table); for (let v = 0; v < abc.length; v++) { var tr = document.createElement("tr"); tr.setAttribute('id', 'id'+v); table.appendChild(tr); for (let i = 0; i < abc[v].length; i++) { var td = document.createElement("td"); td.setAttribute('class', 'cl'+abc[v][i]); var tr = document.getElementById('id'+v); tr.appendChild(td); td.innerHTML = abc[v][i]; } } var text = document.getElementById('text'); var click = document.getElementsByTagName('td'); Array.prototype.forEach.call(click,addEvent); function addEvent(td) { td.addEventListener('click', function(event){ var tdClicked = event.target.innerHTML; text.innerHTML += tdClicked; }); } let itens = document.getElementsByTagName("td"); tr = document.getElementsByTagName('tr')[2]; td = document.createElement('td'); td.setAttribute('class', 'clclean'); tr.appendChild(td); td.innerHTML = '⬅️'; itens[25].onclick = () => { text.innerHTML = text.innerHTML.substr(0, (text.innerHTML.length -1));}; td = document.createElement('td'); td.setAttribute('class', 'cl{&='); td.innerHTML = '🔣'; tr.insertBefore(td, itens[18]); itens[18].onclick = () => { demo.innerHTML = ""; thirdkeyword()}; tr = document.getElementsByTagName('tr')[3]; td = document.createElement('td'); td.setAttribute('class', 'clabc'); td.innerHTML = '🔤'; tr.insertBefore(td, itens[27]); itens[27].onclick = () => { demo.innerHTML = ""; window.onload()}; td = document.createElement('td'); td.setAttribute('class', 'cldowm'); tr.appendChild(td); td.innerHTML = '⤵️'; itens[34].onclick = () => { text.innerHTML += '\n' }; } function thirdkeyword() { var abc = [ ['$','€','¥','¢','©','®','™','~','¿'], ['[',']','{','}','<','>','^','¡'], ["`",';','÷','/','|','¦','¬'], [' ','×','§','¶','°'] ]; var table = document.createElement("table"); var div = document.getElementById("demo"); div.appendChild(table); for (let v = 0; v < abc.length; v++) { var tr = document.createElement("tr"); tr.setAttribute('id', 'id'+v); table.appendChild(tr); for (let i = 0; i < abc[v].length; i++) { var td = document.createElement("td"); td.setAttribute('class', 'cl'+abc[v][i]); var tr = document.getElementById('id'+v); tr.appendChild(td); td.innerHTML = abc[v][i]; } } var text = document.getElementById('text'); var click = document.getElementsByTagName('td'); Array.prototype.forEach.call(click,addEvent); function addEvent(td) { td.addEventListener('click', function(event){ var tdClicked = event.target.innerHTML; text.innerHTML += tdClicked; }); } let itens = document.getElementsByTagName("td"); tr = document.getElementsByTagName('tr')[1]; td = document.createElement('td'); td.setAttribute('class', 'cldoublespace'); tr.appendChild(td); td.innerHTML = '➡️'; tr.insertBefore(td, itens[9]); itens[9].onclick = () => { text.innerHTML += " ";}; tr = document.getElementsByTagName('tr')[2]; td = document.createElement('td'); td.setAttribute('class', 'cl123'); td.innerHTML = '🔢'; tr.insertBefore(td, itens[18]); itens[18].onclick = () => { demo.innerHTML = ""; secondkeyword()}; td = document.createElement('td'); td.setAttribute('class', 'clclean'); tr.appendChild(td); td.innerHTML = '⬅️'; itens[26].onclick = () => { text.innerHTML = text.innerHTML.substr(0, (text.innerHTML.length -1));}; tr = document.getElementsByTagName('tr')[3]; td = document.createElement('td'); td.setAttribute('class', 'clabc'); td.innerHTML = '🔤'; tr.insertBefore(td, itens[27]); itens[27].onclick = () => { demo.innerHTML = ""; window.onload()}; td = document.createElement('td'); td.setAttribute('class', 'cldowm'); tr.appendChild(td); td.innerHTML = '⤵️'; itens[33].onclick = () => { text.innerHTML += '\n' }; } function emojikeyword() { var abc = [ ['😀','😁','😂','🤣','😃','😄','😅','😆','😉'], ['😊','😋','😎','😍','😘','🥰','😗','😙','☺️'], ['🙂','🤗','🤩','🤔','🤨','😐','😑','😶','🙄'], ['😏','😣','😥','😮','🤐','😯','😪','😴','😫'], ['😴','😌','😛','😜','😝','🤤','😒','😔'], ['☹️','🙁','😖','😞','😟','😤','😢'] ]; var table = document.createElement("table"); var div = document.getElementById("demo"); div.appendChild(table); for (let v = 0; v < abc.length; v++) { var tr = document.createElement("tr"); tr.setAttribute('id', 'id'+v); table.appendChild(tr); for (let i = 0; i < abc[v].length; i++) { var td = document.createElement("td"); td.setAttribute('class', 'cl'+abc[v][i]); var tr = document.getElementById('id'+v); tr.appendChild(td); td.innerHTML = abc[v][i]; } } var text = document.getElementById('text'); var click = document.getElementsByTagName('td'); Array.prototype.forEach.call(click,addEvent); function addEvent(td) { td.addEventListener('click', function(event){ var tdClicked = event.target.innerHTML; text.innerHTML += tdClicked; }); } let itens = document.getElementsByTagName("td"); tr = document.getElementsByTagName('tr')[4]; td = document.createElement('td'); td.setAttribute('class', 'clclean'); tr.appendChild(td); td.innerHTML = '⬅️'; itens[44].onclick = () => { text.innerHTML = text.innerHTML.substr(0, (text.innerHTML.length -1));}; tr = document.getElementsByTagName('tr')[5]; td = document.createElement('td'); td.setAttribute('class', 'clabc'); td.innerHTML = '🔤'; tr.insertBefore(td, itens[45]); itens[45].onclick = () => { demo.innerHTML = ""; window.onload()}; td = document.createElement('td'); td.setAttribute('class', 'cldowm'); tr.appendChild(td); td.innerHTML = '⤵️'; itens[53].onclick = () => { text.innerHTML += '\n' }; }

Creat Keyboard with DOM