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">
|
<div class="flex gap-3">
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
id="submit-btn"
|
||||||
@class([
|
@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-2/3' => isset($matches),
|
||||||
'w-full' => ! 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>
|
</section>
|
||||||
@endisset
|
@endisset
|
||||||
</main>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue