Frontend

vanilla JS challenge: if you ever asked yourself why peeps use state management libraries or why front-end frameworks like React exist, try to code this simple app using only vanilla JS:

User requirements
===============
 - User must enter an email, name. Phone number is optional.
 - Email must be a valid email.
 - Name must have at least two letters.
 - Phone must be a valid US number.
 - Disable the submit button whenever the form is invalid (and enable it  whenever the form is valid). 
 - Show an error state on the first invalid user input (and hide it whenever the form is valid)

Code is my canvas  | AI art IS art | the future of art is not set in stone | Uriel Avalos | linktr.ee/robotandkid

oh nuice! 

yea i've been doing a stackblitz project and it's been fun. Certainly still many gotchas.

/frontend dev・founder/decentralized data wrangler /blockhead・ritual.net・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx・x.com/darryl__yeo

oh nuice! 

yea i've been doing a stackblitz project and it's been fun. Certainly still many gotchas. https://stackblitz.com/edit/vitejs-vite-qsbpcy?file=main.js

Seems doable actually – vanilla HTML form attributes have gotten quite good!

I like to keep the submit button enabled to let the user manually trigger validation, but visually “disabling” it trivial now that we have `:has()` in CSS:

```css
form:has(:invalid) button[type="submit"] {
    opacity: 0.5;
}
```