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 by Dacardonac. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Frontend Mentor - Newsletter sign-up form with success message
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
    • How to use
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Users should be able to see in this project:

• View the optimal layout depending on their device's screen size (Responsive)
• Styles in Components (Sass/Scss)
• DOM (Document Object Model)
• BEM Methodology (Block Element Modifier)
• Alerts

Desktop 🖥️

Desktop error 🖥️✖️

Laptop 💻

Mobile 📱

Success Message ✅

• Solution URL: Frontend Mentor Solution 👨‍💻
• Live Site URL: Solution Deploy in Vercel 🚀

To use this project, you need to follow these steps:

1. Clone the repository:

git clone https://github.com/Dacardonac/fem-newsletter-sign-up-form.git

2. Navigate to the project directory:

cd newsletter-sign-up-form

3. Install dependencies: Make sure you have Node.js installed, then run:

npm install

4. Run the project: Start the development server with:

npm run dev

This will start the project locally, typically accessible at http://localhost:3000.

Important ⚠️

5. Start the JSON server: To simulate a backend for data collection, run:

npx json-server --watch db.json --port 3001

This will start the JSON server on http://localhost:3001.

Now you can view the project in your browser and test its functionality, including form submissions that will be stored in ./assets/db/db.json.

• Semantic HTML5 Markup - Structure
• CSS3 Custom Properties - Styles
• Mobile-first Workflow
• JavaScript - Programming Logic
• Flexbox - Spaces and Alignments
• Conventional Commits - Commit Specification
• json-server - Backend (Data Base)
• Vite - Frontend Tooling
• Sass/Scss - Modules and Styles
• BEM Methodology - Nomenclature for Classes
• Markdown - README.md file (Documentation)

With this project I learned, implemented and practiced Javascript, along with its properties and methods for alerts or success messages when submitting the form. I also reinforced and practiced my knowledge of CSS3 with Sass, I worked on semantic HTML5 while applying the BEM methodology for class naming and on my own I wanted to manage the data collected from the form in a JSON file, thus simulating a Database with json-server.

You can see an example below:

async function sendEmail(email) {
  try {
    const response = await fetch('http://localhost:3000/emails', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email })
    });

    if (!response.ok) throw new Error('Network response was not ok');

    formInput.value = '';
    showMessage();
  } catch (error) {
    console.error('Error:', error);
  }
}

With this path, I want to continue learning more about JavaScript, Responsive Design and how to work across different devices with Flexbox and Grid, also I want continue using BEM methodology and perfect the technique in aspects like name the classes, also I want to improve in modularize the component's styles with Sass and learn about Conventional Commits.

• MDN - This helped me with Documentation on many topics, mostly with HTML and CSS properties.
• ChatGPT - This is an incredible Artificial Intelligence (AI) tool, ChatGPT helps me with specific topics, errors in the project and investigations.

• Frontend Mentor - @Dacardonac
• LinkedIn - @Daniel Alejandro Cano Cardona

I want to thank Jairovg for the teachings and his help to complete this challenge in a good way and with good practices.

thank you frontend mentor for promoting learning and providing knowledge with these challenges 🙌

Have fun building! 🚀