Hello!
I've got task keyboard. I did it (but there are some bugs). But I'm interested in how can i rewrite javascript code to make it look more 'professional'
Thank You!
<script src="script.js"></script>
</body>[/CODE]
I've got task keyboard. I did it (but there are some bugs). But I'm interested in how can i rewrite javascript code to make it look more 'professional'
Thank You!
HTML:
<body >
<div class="wrapper">
<textarea name='' readonly></textarea>
<div class="wrapper-keyboard">
<div class='letter'>`</div>
<div class='letter'>1</div>
<div class='letter'>2</div>
<div class='letter'>3</div>
<div class='letter'>4</div>
<div class='letter'>5</div>
<div class='letter'>6</div>
<div class='letter'>7</div>
<div class='letter'>8</div>
<div class='letter'>9</div>
<div class='letter'>0</div>
<div class='letter'>-</div>
<div class='letter'>=</div>
<div class='backspace '>Backspace</div>
<div class='tab '>Tab</div>
<div class='letter'>q</div>
<div class='letter'>w</div>
<div class='letter'>e</div>
<div class='letter'>r</div>
<div class='letter'>t</div>
<div class='letter'>y</div>
<div class='letter'>u</div>
<div class='letter'>i</div>
<div class='letter'>o</div>
<div class='letter'>p</div>
<div class='letter'>[</div>
<div class='letter'>]</div>
<div class='letter'>\</div>
<div class='CapsLock '>CapsLock</div>
<div class='letter'>a</div>
<div class='letter'>s</div>
<div class='letter'>d</div>
<div class='letter'>f</div>
<div class='letter'>g</div>
<div class='letter'>h</div>
<div class='letter'>j</div>
<div class='letter'>k</div>
<div class='letter'>l</div>
<div class='letter'>;</div>
<div class='letter'>'</div>
<div class='Enter '>Enter</div>
<div class='shiftLeft '>shift</div>
<div class='letter'>z</div>
<div class='letter'>x</div>
<div class='letter'>c</div>
<div class='letter'>v</div>
<div class='letter'>b</div>
<div class='letter'>n</div>
<div class='letter'>m</div>
<div class='letter'>,</div>
<div class='letter'>.</div>
<div class='letter'>/</div>
<div class='shiftRight '>shift</div>
<div class="space "></div>
</div>
</div>
[CODE=javascript]let get=elem=>document.querySelectorAll(elem)
let divs = get('.letter')
let textarea = document.querySelector('textarea')
let tab = document.querySelector('.tab')
let capslock=document.querySelector('.CapsLock')
let shiftRight = document.querySelector('.shiftRight')
let shiftLeft = document.querySelector('.shiftLeft')
let Enter = document.querySelector('.Enter')
let backspace = document.querySelector('.backspace')
let space = document.querySelector('.space')
window.addEventListener('keydown', function (event) {
if (event.keyCode == 20) {
capslock.classList.toggle('pressed')
}
if (event.code == 'ShiftLeft') {
shiftLeft.classList.add('pressed')
}
if (event.code == 'ShiftRight') {
shiftRight.classList.add('pressed')
}
for (let div of divs) {
if (event.key == div.textContent) {
div.classList.add('pressed')
textarea.value += div.textContent
}
if (capslock.classList.contains('pressed')||shiftRight.classList.contains('pressed')||shiftLeft.classList.contains('pressed')) {
if (event.key.toLowerCase() == div.textContent) {
div.classList.add('pressed')
textarea.value += div.textContent.toUpperCase()
}
}
}
if (event.keyCode == 8) {
textarea.value = textarea.value.slice(0, -1)
backspace.classList.add('pressed')
}
if (event.keyCode == 9) {
textarea.value += '\t'
tab.classList.add('pressed')
}
if (event.keyCode == 13) {
textarea.value += '\n'
Enter.classList.add('pressed')
}
if (event.keyCode == 32) {
textarea.value += ' '
space.classList.add('pressed')
}
})
window.addEventListener('keyup',function(event){
for (let div of divs) {
if (event.key == div.textContent) {
div.classList.remove('pressed')
}
if (capslock.classList.contains('pressed')||shiftRight.classList.contains('pressed')||shiftLeft.classList.contains('pressed')) {
div.classList.remove('pressed')
}
}
if (event.code == 'ShiftLeft') {
shiftLeft.classList.remove('pressed')
}
if (event.code == 'ShiftRight') {
shiftRight.classList.remove('pressed')
}
if (event.keyCode == 9) {
tab.classList.remove('pressed')
}
if (event.keyCode == 8) {
backspace.classList.remove('pressed')
}
if (event.keyCode == 13) {
Enter.classList.remove('pressed')
}
if (event.keyCode == 32) {
space.classList.remove('pressed')
}
})
<script src="script.js"></script>
</body>[/CODE]