<style>
body {
background-color: gray;
}
.rowOne,
.rowTwo,
.rowThree,
.rowFour,
.rowFive,
.rowZiro {
width: 1000px;
margin: auto;
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
}
#col {
width: 860px;
height: 150px;
}
.rowZiro > div {
background-color: white;
border: 1px solid black;
margin: 5px;
border-radius: 10px;
display: flex;
font-size: 16px;
justify-content: space-between;
flex-wrap: wrap;
}
.rowOne > div,
.rowTwo > div,
.rowThree > div,
.rowFour > div,
.rowFive > div {
height: 55px;
background-color: white;
border: 1px solid black;
margin: 5px;
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.rowOne > div:active,
.rowTwo > div:active,
.rowThree > div:active,
.rowFour > div:active,
.rowFive > div:active {
background-color: rgb(150, 150, 150);
}
</style>
</head>
<body>
<div class="rowZiro">
<div id="col"></div>
</div>
<div id="keyboard">
<div class="rowOne">
<div>`</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
<div>-</div>
<div>=</div>
<div style="width: 80px" id="b">Backspace</div>
</div>
<div class="rowTwo">
<div style="width: 80px">Tab</div>
<div>q</div>
<div>w</div>
<div>e</div>
<div>r</div>
<div>t</div>
<div>y</div>
<div>u</div>
<div>i</div>
<div>o</div>
<div>p</div>
<div>[</div>
<div>]</div>
<div>\</div>
</div>
<div class="rowThree">
<div style="width: 95px">Caps Lock</div>
<div>a</div>
<div>s</div>
<div>d</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>j</div>
<div>k</div>
<div>l</div>
<div>;</div>
<div>'</div>
<div style="width: 95px">Enter</div>
</div>
<div class="rowFour">
<div style="width: 125px">shift</div>
<div>z</div>
<div>x</div>
<div>c</div>
<div>v</div>
<div>b</div>
<div>n</div>
<div>m</div>
<div>,</div>
<div>.</div>
<div>/</div>
<div style="width: 125px">shift</div>
</div>
<div class="rowFive">
<div style="width: 860px"></div>
</div>
</div>
document.getElementById("keyboard").addEventListener("click", function (e) {
const key = e.target.closest("#keyboard div ");
if (!key) {
return;
}
const letter = key.textContent;
if (letter.length == 1) {
document.getElementById("col").insertAdjacentHTML("beforeend", letter);
}
});
