@sbaumruk
Posted
Love the solution! Didn't dive super deep into the code, but did notice one possible improvement.
Currently, the validation for enabling the QR code generation is triggered using onchange, which means I could type http://www.google.com (a valid url), click outside of the box, then delete the contents of the input and the button will still be enabled, because onchange is only triggered when the input element loses focus. Instead, it might be better to use oninput.
Big fan of the design system, I've never used anything like that!
Also, it may be better to make the button a button element instead of an a, and may be better to use the disabled attribute to disable the button rather than assigning it a class of disabled which uses the pointer-events and cursor properties. This semantic disabling of the button would be a bit better for readability and accessibility.
Last thing. I noticed in your stylesheet, that your rules use the most specific selector possible, e.g. body .container #url-container .submit-button whereas I think it could be possibly more readable or clean if just .submit-button was used. But that may be more down to preference.
@Vand1525
Posted
@sbaumruk Thanks a lot for the tips haha I have a lot of things to improve on this code but I wanted to upload a version of it before I go to sleep.
These specific selectors are generated by SCSS itself, so I have no control over them.
I'm trying to make a theme switcher for this project and tomorrow I'll upload some fixes with it.
Before using an input and a button inside a form, but it happened that it updated the page all the time and I didn't know how to avoid that (I confess that I was a little lost hahaha) so I used the <a> tag
