Disable submit if word is unchanged

This commit is contained in:
myrmidex 2026-08-23 14:53:59 +02:00
parent ac765e5646
commit a365d85764

View file

@ -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>