Card Design, JavaScript, Sections

Email verification template using Html, CSS and javascript

In the last lesson, we have gone through making a Rotating navigation menu with Html, CSS, and javascript but now we are focusing on making verification of your account system using Html, CSS and javascript.

Email verification:

It has a text at the top ”Verify your account”. Below it, it has a text which contains a description about sending a verification code to a number or email. Then it has 6-digit fields which are used for entering verification numbers. code sent to our email or number will be inserted in these fields. All this is entered in a box and that box is rectangular in shape.

How to create an email verification system:

For creating this we are going to create three files of Html, CSS, and javascript.

Email verification is used when users want to create a new account or want to access the account. It is used for confirmation and security purposes. It enables the system to understand that owner wants to access the account. Someone else can’t access that account through the email verification process. You must have access to email to log into your account.
We have created some steps for the development of our projects. Follow the below steps.

Html code:

First of all, we are gonna create a file of HTML. Html is always used for writing the content of the project like images, text, categories, etc. Therefore, it is free to copy.

<!--https://fantacydesigns.com/-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Verify Account| Fantacy Design</title>
  </head>
  <body>
    <div class="container">
      <h2>Verify Your Account</h2>
      <p>We emailed you the six digit code to fantacydesignss@gmail.com <br/> Enter the code below to confirm your email address.</p>
      <div class="code-container">
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
      </div>
      <small class="info">
        This is design only. We didn't actually send you an email as we don't have your email, right?
      </small>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Verify Account| Fantacy Design</title>

</head>

<body>

<h2>Verify Your Account</h2>

<p>We emailed you the six digit code to fantacydesignss@gmail.com <br/> Enter the code below to confirm your email address.</p>

</div>

This is design only. We didn't actually send you an email as we don't have your email, right?

</small>

</div>

</body>

</html>

CSS code:

Then we need to create a file of CSS because it is used for doing the design of our project. We have to create a file of CSS and name it account.css and save this in the same folder.

@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #1DBF73;
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  max-width: 1100px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.code-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0;

}

.code {
  border-radius: 5px;
  font-size: 75px;
  height: 120px;
  width: 100px;
  border: 1px solid #eee;
    outline-width: thin;;
    outline-color: #ddd;
  margin: 1%;
  text-align: center;
  font-weight: 300;
  -moz-appearance: textfield;
  margin-left: 10px;
}

.code::-webkit-outer-spin-button,
.code::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.code:valid {
  border-color: #1DBF73;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.info {
  background-color: #eaeaea;
  display: inline-block;
  padding: 10px;
  line-height: 20px;
  max-width: 400px;
  color: #777;
  border-radius: 5px;
}

@media (max-width: 600px) {
  .code-container {
    flex-wrap: wrap;
  }

  .code {
    font-size: 60px;
    height: 80px;
    max-width: 70px;
  }
}

@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: #1DBF73;

font-family: 'Muli', sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

.container {

background-color: #fff;

border-radius: 10px;

padding: 30px;

max-width: 1100px;

text-align: center;

box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

.code-container {

display: flex;

align-items: center;

justify-content: center;

margin: 40px 0;

}

.code {

border-radius: 5px;

font-size: 75px;

height: 120px;

width: 100px;

border: 1px solid #eee;

outline-width: thin;;

outline-color: #ddd;

margin: 1%;

text-align: center;

font-weight: 300;

-moz-appearance: textfield;

margin-left: 10px;

}

.code::-webkit-outer-spin-button,

.code::-webkit-inner-spin-button {

-webkit-appearance: none;

margin: 0;

}

.code:valid {

border-color: #1DBF73;

box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;

}

.info {

background-color: #eaeaea;

display: inline-block;

padding: 10px;

line-height: 20px;

max-width: 400px;

color: #777;

border-radius: 5px;

}

@media (max-width: 600px) {

.code-container {

flex-wrap: wrap;

}

.code {

font-size: 60px;

height: 80px;

max-width: 70px;

}

Javascript code:

Again create a file of javascript because Javascript will help us to give functionality to our project and make it responsive and functional. Create a file and this file as account.js and also save it in the same folder where other files are present.
Must save all these files with the extension of Html, CSS, and js because it helps the browser to understand the type of the file and run it properly. Without writing the extension with the file the browser will treat it as a text file.

const codes = document.querySelectorAll('.code')

codes[0].focus()

codes.forEach((code, idx) => {
    code.addEventListener('keydown', (e) => {
        if(e.key >= 0 && e.key <=9) {
            codes[idx].value = ''
            setTimeout(() => codes[idx + 1].focus(), 10)
        } else if(e.key === 'Backspace') {
            setTimeout(() => codes[idx - 1].focus(), 10)
        }
    })
})

const codes = document.querySelectorAll('.code')

codes[0].focus()

codes.forEach((code, idx) => {

code.addEventListener('keydown', (e) => {

if(e.key >= 0 && e.key <=9) {

codes[idx].value = ''

setTimeout(() => codes[idx + 1].focus(), 10)

} else if(e.key === 'Backspace') {

setTimeout(() => codes[idx - 1].focus(), 10)

}

})

By doing all these things you will be able to create it and run it properly. Therefore, if you are still facing any problems in making it then I have created a zip file. It contains all these files and just needs to download them from the below button. You need to extract these files and run the main file of the Html and you will see your output in the browser.

If you find this post helpful then must like it, share it, and comment below.

Thanks for reading this article.

Download Source File