Javacript
const ignoreOtherSymbols = document.querySelector(".word .first")
let counter = 1
let word = ''
let fifthValue = ''
let row = 0
let container = document.getElementsByClassName("word")[row]
let container2 = document.getElementsByClassName("word")[row]
let inputs = document.getElementsByClassName('first')[0] // class name as number in html and increment this when user lose in press enter
function isLetter(letter) {
return /^[a-zA-Z]$/.test(letter)
}
ignoreOtherSymbols.addEventListener("keydown", function (event) {
if (!isLetter(event.key)) {
event.preventDefault()
}
})
container.onkeyup = function(event) {
let target = event.srcElement || event.target
let myLength = target.value.length
if (isLetter(event.key) && counter < 5) {
word += target.value
}
if (event.key === 'Enter' && counter == 5) {
row++
fifthValue = target.value
const wordArray = word.split('')
wordArray[4] = fifthValue
let newWord = wordArray.join('')
console.log(row)
console.log(newWord)
const apiUrl = 'https://words.dev-apis.com/word-of-the-day?puzzle=1337'
fetch(apiUrl)
.then(response => response.json())
.then(data => {
console.log(data);
if (data.word === newWord) {
console.log('You win')
}
else {
console.log('Try again')
console.log(row)
if (document.getElementsByClassName("word")[row]) {
counter = 1
word = ''
fifthValue = ''
// I need to connect this if else (mylength) to jump between inputs with the same row
inputs.focus()
}
}
})
.catch(error => {
console.error(error)
})
}
if (event.key === 'Backspace') {
target.value = ''
}
if (myLength === 1) {
while (target = target.nextElementSibling) {
if (target.tagName.toLowerCase() === "input") {
if (isLetter(event.key)) {
target.focus()
counter++
}
break
}
}
}
console.log(counter)
console.log(word)
}
container2.onkeydown = function(event) {
let target = event.srcElement || event.target
let myLength = target.value.length
if (isLetter(event.key) && counter === 5) {
target.value = target.value.slice(0, -1)
}
if (myLength === 0) {
while (target = target.previousElementSibling) {
if (target.tagName.toLowerCase() === "input") {
if (event.key === 'Backspace') {
target.focus()
counter--
target.value = ''
word = word.slice(0, -1)
}
break
}
}
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" /> <!--for emoticons, ASCII don't give emoticons-->
<meta name="viewport" content="width=device-width, initial-scale.0" /> <!--for view side on smartphone-->
<title>Word Master</title> <!--title of my side-->
<link rel="stylesheet" href="index.css" />
</head>
<body class="page">
<h1 class="logo">Word Masters</h1>
<div class="line"></div>
<div class="nothing"></div>
<div class="letter">
<div class="firstWord word">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
</div>
<div class="secondWord word">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1" class="first">
</div>
<div class="thirdWord word">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
</div>
<div class="fourthWord word">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
</div>
<div class="fifthWord word">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
</div>
<div class="sixthWord word">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
</div>
</div>
<script src="./wordMaster.js"></script>
</body>
</html>
I try to increment number of row if user press ‘Enter’ to start again the same what is going in container and container2. My result is that in first row everything is ok, but when focus jump to first input in second row, focus of my input don’t change when user press letter (when myLength = 1). I need some advice how to resolve this. Thank you a lot for help.