<div class="container wordleSolver-container">
<div class="row">
<div class="col-md-10 mx-auto ws">
<div style="font-size: 15px;" class="alert errMessage" role="alert"></div>
<form name="verify" class="forms_data">
<div class="form-group">
<label for="greenLetters" class="my-1 p-0 wordleSolver-label">Enter green letters at correct
position</label>
<div class="col-md-6 p-0">
<div class="d-flex">
<input data-id="0" type="text" autocomplete="off" tabIndex="0"
class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
id="first" onkeyup="move(this,'second')">
<input data-id="1" type="text" autocomplete="off" tabIndex="1"
class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
id="second" onkeyup="move(this,'third')">
<input data-id="2" type="text" autocomplete="off" tabIndex="2"
class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
id="third" onkeyup="move(this,'fourth')">
<input data-id="3" type="text" autocomplete="off" tabIndex="3"
class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
id="fourth" onkeyup="move(this,'fivth')">
<input data-id="4" type="text" autocomplete="off" tabIndex="4"
class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
id="fivth" onkeyup="move(this,'six')">
</div>
</div>
</div>
<div class="form-group">
<label for="yellowLetters" class="my-1 p-0 wordleSolver-label">Enter letters in yellow below</label>
<div class="col-md-6 p-0">
<div class="d-flex">
<input type="text" autocomplete="off" tabIndex="1"
class="wordleSolver-field yellowLetters form-control px-5" maxlength="1" id="six"
tabIndex="5" onkeyup="move(this,'seven')">
<input type="text" autocomplete="off"
class="wordleSolver-field yellowLetters form-control px-5" maxlength="1" id="seven"
tabIndex="6" onkeyup="move(this,'eight')">
<input type="text" autocomplete="off"
class="wordleSolver-field yellowLetters form-control px-5" maxlength="1" id="eight"
tabIndex="7" onkeyup="move(this,'nine')">
<input type="text" autocomplete="off"
class="wordleSolver-field yellowLetters form-control px-5" maxlength="1" id="nine"
tabIndex="8" onkeyup="move(this,'ten')">
<input type="text" autocomplete="off"
class="wordleSolver-field yellowLetters form-control px-5" maxlength="1" id="ten"
tabIndex="9" onkeyup="move(this,'eleven')">
</div>
</div>
</div>
<div class="form-group">
<label for="greyLetters" class="my-1 p-0 wordleSolver-label">Enter letters in grey below</label>
<div class="col-md-6 p-0 wrapper">
<div class="d-flex">
<input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
id="eleven" value="" autocomplete="off" tabIndex="10" onkeyup="move(this,'twelve')">
<input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
id="twelve" value="" autocomplete="off" tabIndex="11" onkeyup="move(this,'thirteen')">
<input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
id="thirteen" value="" autocomplete="off" tabIndex="12" onkeyup="move(this,'fourteen')">
<input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
id="fourteen" value="" autocomplete="off" tabIndex="13" onkeyup="move(this,'fifteen')">
<input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
id="fifteen" value="" autocomplete="off" tabIndex="14" onkeyup="move(this,'sixteen')">
</div>
<div class="d-flex mt-2">
<input type="text" autocomplete="off" tabIndex="15"
class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="sixteen"
onkeyup="move(this,'seventeen')">
<input type="text" autocomplete="off" tabIndex="16"
class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="seventeen"
onkeyup="move(this,'eightteen')">
<input type="text" autocomplete="off" tabIndex="17"
class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="eightteen"
onkeyup="move(this,'nineteen')">
<input type="text" autocomplete="off" tabIndex="18"
class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="nineteen"
onkeyup="move(this,'twenty')">
<input type="text" autocomplete="off" tabIndex="19"
class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="twenty"
onkeyup="move(this,'eleven')">
</div>
</div>
</div>
<button type="button" data-toggle="tooltip" data-placement="top" title="Add more greyletters fields"
id="addMore"><i class="bi bi-plus"></i>
</button>
<div class="form-group text-right">
<div class="col-md-4 p-0" style="margin: 0 0 0 auto;">
<button type="submit" id="wordlesolver_submit" class="btn wordlesolver-btn mt-3">
<span id="updateTxt">Solve</span>
<div class="spinner"></div>
</button>
</div>
</div>
</form>
</div>
<div class="col-md-10 mx-auto p-0 mt-3">
<div id="wordleWordCount"></div>
<div id="wordleSolverData"></div>
<div class="alert" role="alert" id="wordleSolvererrorMsg" style="font-size: 15px; padding:15px"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).on('keypress', 'input', function (e) {
if (e.which === 32) {
e.preventDefault();
var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
if (!$next.length) {
$next = $('[tabIndex=1]');
}
$next.focus().click();
}
});
function move(first, last) {
if (first.value.length) {
document.getElementById(last).focus()
}
}
</script>
<script defer src="../assets/js/wordleSolver.js"></script>