Disable submit if word is unchanged
This commit is contained in:
parent
ac765e5646
commit
a365d85764
1 changed files with 20 additions and 1 deletions
|
|
@ -46,8 +46,9 @@ class="w-full bg-black border-red-500 text-red-400 focus:border-red-300 font-mon
|
|||
<div class="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
id="submit-btn"
|
||||
@class([
|
||||
'bg-black hover:bg-red-500 text-red-400 hover:text-black font-mono text-sm font-bold border-red-500 rounded-none border-2 uppercase tracking-wider transition-all glow-red cursor-pointer px-4 py-2',
|
||||
'bg-black hover:bg-red-500 text-red-400 hover:text-black font-mono text-sm font-bold border-red-500 rounded-none border-2 uppercase tracking-wider transition-all glow-red cursor-pointer px-4 py-2 disabled:cursor-not-allowed disabled:bg-black disabled:text-red-400/30 disabled:border-red-500/30 disabled:shadow-none',
|
||||
'w-2/3' => isset($matches),
|
||||
'w-full' => ! isset($matches),
|
||||
])
|
||||
|
|
@ -89,5 +90,23 @@ class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-red-950 t
|
|||
</section>
|
||||
@endisset
|
||||
</main>
|
||||
|
||||
@isset($anagram)
|
||||
<script>
|
||||
(() => {
|
||||
const input = document.getElementById('anagram');
|
||||
const button = document.getElementById('submit-btn');
|
||||
const original = @json($anagram);
|
||||
|
||||
const sync = () => {
|
||||
const value = input.value.trim().toLowerCase();
|
||||
button.disabled = value === original.trim().toLowerCase() || value === '';
|
||||
};
|
||||
|
||||
input.addEventListener('input', sync);
|
||||
sync();
|
||||
})();
|
||||
</script>
|
||||
@endisset
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue