Newsletter sign-up form with success message

Solution retrospective
This was my first time using Vite to automatically bundle HTML, CSS, Tailwind, and TypeScript. I am proud of the result, as the setup process turned out to be faster and more flexible compared to traditional bundlers.
What challenges did you encounter, and how did you overcome them?I encountered issues with relative paths not working correctly when publishing to GitHub Pages. To fix this, I had to explicitly set the base option in the Vite config and connect Tailwind through a plugin:
// vite.config.ts import { defineConfig } from "vite"; import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ base: "/newsletter-sign-up-with-success-message/", plugins: [tailwindcss()], });
Additionally, setting up GitHub Actions for automatic deployment was necessary. I used a static.yml template and added an extra build step:
What specific areas of your project would you like help with?- name: Build run: npm run build
Currently, I am resetting the application state by triggering a page reload via an <a href=""> element. I would like to find a more elegant solution using TypeScript, such as resetting the state without a full page reload. However, my current knowledge of TS is not sufficient to implement this yet.
<a href="">Dismiss message</a>
Please log in to post a comment
Log in with GitHubCommunity feedback
- @amikoelvis
Your code is clean, well-typed with TypeScript, and the validation logic is solid. However, replacing the entire main content with innerHTML isn't ideal consider toggling visibility instead. Also, the "Dismiss message" link doesn't work as expected; use a button or prevent the default behavior. Overall, great job with structure and user feedback handling.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord