Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jomagene/newsletter-sign-up-with-success-message
Responsive form with email validation, built with Flexbox and Sass. Uses local storage to display email on the success page.
https://github.com/jomagene/newsletter-sign-up-with-success-message
flexbox mobile-first sass validation
Last synced: about 1 month ago
JSON representation
Responsive form with email validation, built with Flexbox and Sass. Uses local storage to display email on the success page.
- Host: GitHub
- URL: https://github.com/jomagene/newsletter-sign-up-with-success-message
- Owner: Jomagene
- License: mit
- Created: 2024-08-25T03:10:26.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-09-08T18:35:01.000Z (2 months ago)
- Last Synced: 2024-10-15T16:05:32.753Z (about 1 month ago)
- Topics: flexbox, mobile-first, sass, validation
- Language: SCSS
- Homepage: https://jomagene.github.io/newsletter-sign-up-with-success-message/
- Size: 1.09 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Mentor - Newsletter Sign-Up Form with Success Message Solution
This is a solution to the [Newsletter Sign-Up Form with Success Message challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/newsletter-signup-form-with-success-message-3FC1AZbNrv). This challenge helps improve your frontend coding skills by building realistic projects.
## Table of Contents
- [Overview](#overview)
- [The Challenge](#the-challenge)
- [Screenshots](#screenshots)
- [Links](#links)
- [My Process](#my-process)
- [Built With](#built-with)
- [What I Learned](#what-i-learned)
- [Continued Development](#continued-development)
- [Useful Resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The Challenge
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.
### Screenshots
Newsletter Sign-Up Form
Invalid Email State
Successful Subscription
### Links
- [Visit the solution](https://www.frontendmentor.io/solutions/newsletter-signup-with-success-message-validation-and-local-storage-W1qGM42_UD)
- [Visit live URL](https://jomagene.github.io/newsletter-sign-up-with-success-message/)
## My Process
### Built With
- Semantic HTML5 markup
- Sass for styling
- Flexbox
- Mobile-first workflow
- JavaScript for form validation and local storage handling
### What I Learned
It was a pleasure working with the DOM and storing data in local storage. I learned how to retrieve data using the DOMContentLoaded event, which was new to me. This project deepened my understanding of handling user input dynamically.
### Continued Development
In the future, I plan to explore how to send emails to users who submit their information, adding more functionality to the form.
### Useful Resources
- [FreeCodeCamp - Build and Validate Beautiful Forms with Vanilla HTML, CSS, and JavaScript](https://www.freecodecamp.org/news/build-and-validate-beautiful-forms-with-vanilla-html-css-js/) - This article was instrumental in helping me understand form validation and building user-friendly forms with HTML, CSS, and JavaScript.
- [MDN Web Docs - Form Validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) - Provided a solid foundation for understanding form validation.
## Author
- Frontend Mentor - [@Jomagene](https://www.frontendmentor.io/profile/Jomagene)
- Twitter - [@Jomagene](https://www.twitter.com/Jomagene)
## Acknowledgments
Thanks to the Frontend Mentor community for providing feedback and inspiration throughout the challenge.