Skip to content

Code-Beaker/newsletter-signup-code-beaker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Newsletter Signup Page with Email Validation

This is a solution to the Newsletter sign-up form with success message from Frontend Mentor.

Preview

Desktop

alt text

Mobile

Mobile

Tools and Language

Tools

Language

  • HTML
  • CSS
  • JS

Process

Creating the application using the command line.

npm create vite@latest -- --template vanilla app

cd app

npm install

npm install validator

npm run dev

What I learned

I learned to use the library. It is the first time ever that I have used an npm library to implement a function to my website. It was very useful and was easy to implement.

Adding the JS file to HTML

Add the app.js file to the HTML using the script tag.

import JS

Using the Validator Library

Import the library.

JavaScript Code

Implementing the validation

Add the submit event to the form and use Validator to check whether the value of the input is correctly formatted as an email.

Adding validation

Links