This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This is my attempt to learn Svelte with SvelteKit framework and also enhancing my TailwindCSS skill.
Users should be able to:
- Add their email and submit the form
- See a success message with their email after successfully submitting the form
- See form validation messages if:
- The field is left empty
- The email address is not formatted correctly
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Svelte
- SvelteKit
- Tailwind CSS
- Playwright
- Vite
- Mobile-first workflow
SvelteKit has filesystem-based router. To create a route, you only need to create +page.svelte file under src/route/path/to/your/route directory. For example
src/routes/about/+page.sveltewill define/aboutroute
Svelte is superset of HTML. It means, any HTML file is a valid Svelte file, but not the other way around. This makes learning curve to start Svelte from learning HTML is incredibly easy.
When in doubt, you can launch Svelte REPL online and test your Svelte code there. Lot of people shared their knowledge throught snippets using online Svelte REPL. This makes the community grows fast.
We can decompose a page into smaller and reusable chunks / components. We can pass props to the component, make it reactive, and integrate with Svelte directives.
Handling forms in svelte is hard (at least that what I feel). So I decided to use another dependency (svelte-forms) for handling form validation.