HomeJavascriptThe Trending Submit Button

The Trending Submit Button

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create the submit button that has been trending on Instagram.

So there is this interactive submit button reel that is trending on Instagram in the developer’s community for a while. I couldn’t keep myself from trying out this trend. The inspiration for this tutorial is achrafcodes On Instagram.

We need HTML, CSS and Javascript to create this button. The user enters the username and password in the respective input fields. We check if the username and password are valid. In case any of them is invalid we make it impossible for the user to click on submit button. We do so by moving to submit button horizontally in the opposite direction.

The submit button is clickable only when both username and password are valid.

This is an intermediate-level javascript project. If you are interested to improve your javascript skills, you should check out this playlist here. This playlist consists of 100+ javascript projects with source code.

Video Tutorial:

If you prefer to learn by watching video tutorials rather than reading this blog post, you can check out the video down below. Also, subscribe to my youtube channel, where I post new tutorials every alternate day.

Project Folder Structure:

Before we start coding let us create the project folder structure. The project folder consists of three files. These files are index.html, style.css and script.js. The first file is our HTML document, the next one is the stylesheet and finally, we have the script file.

HTML:

We begin with the HTML code. The HTML code consists of elements that build the structure and layout of our form. For this copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Smart Submit Button</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <input type="text" placeholder="Username" id="username" />
      <input type="password" placeholder="Password" id="password" />
      <button id="submit">Submit</button>
      <p id="message-ref">Signed Up Successfully!</p>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style this form using CSS. Now copy the code provided to you below and paste it into your CSS file.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #ffc13d;
}
.container {
  width: 31.25em;
  background-color: #f8f8f8;
  padding: 5em 3.75em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 0.7em;
  box-shadow: 0 1em 4em rgba(71, 50, 4, 0.3);
}
input,
#submit {
  border: none;
  outline: none;
  display: block;
}
input {
  width: 100%;
  background-color: transparent;
  margin-bottom: 2em;
  padding: 1em 0 0.5em 0.5em;
  border-bottom: 2px solid #202020;
}
#submit {
  position: relative;
  left: 0;
  font-size: 1.1em;
  width: 7em;
  background-color: #ffc13d;
  padding: 0.8em 0;
  margin-top: 2em;
  border-radius: 0.3em;
}
#message-ref {
  font-size: 0.9em;
  margin-top: 1.5em;
  color: #34bd34;
  visibility: hidden;
}

Javascript:

Finally, we have functionality using javascript for this copy the code below and paste it into your script file.

/*
    /^[a-zA-Z][a-zA-Z0-9]{3,32}/gi
    /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm
*/
let usernameRef = document.getElementById("username");
let passwordRef = document.getElementById("password");
let submitBtn = document.getElementById("submit");
let messageRef = document.getElementById("message-ref");

let isUsernameValid = () => {
  /* Username should be contain more than 3 characters. Should begin with alphabetic character  Can contain numbers */
  const usernameRegex = /^[a-zA-Z][a-zA-Z0-9]{3,32}/gi;
  return usernameRegex.test(usernameRef.value);
};

let isPasswordValid = () => {
  /* Password should be atleast 8 characters long. Should contain atleast 1 number, 1 special symbol , 1 lower case and 1 upper case */
  const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm;
  return passwordRegex.test(passwordRef.value);
};

usernameRef.addEventListener("input", () => {
  if (!isUsernameValid()) {
    messageRef.style.visibility = "hidden";
    usernameRef.style.cssText =
      "border-color: #fe2e2e; background-color: #ffc2c2";
  } else {
    usernameRef.style.cssText =
      "border-color: #34bd34; background-color: #c2ffc2";
  }
});

passwordRef.addEventListener("input", () => {
  if (!isPasswordValid()) {
    messageRef.style.visibility = "hidden";
    passwordRef.style.cssText =
      "border-color: #fe2e2e; background-color: #ffc2c2";
  } else {
    passwordRef.style.cssText =
      "border-color: #34bd34; background-color: #c2ffc2";
  }
});

submitBtn.addEventListener("mouseover", () => {
  //If either password or username is invalid then do this..
  if (!isUsernameValid() || !isPasswordValid()) {
    //Get the current position of submit btn
    let containerRect = document
      .querySelector(".container")
      .getBoundingClientRect();
    let submitRect = submitBtn.getBoundingClientRect();
    let offset = submitRect.left - containerRect.left;
    console.log(offset);
    //If the button is on the left hand side.. move it to the the right hand side
    if (offset <= 100) {
      submitBtn.style.transform = "translateX(16.25em)";
    }
    //Vice versa
    else {
      submitBtn.style.transform = "translateX(0)";
    }
  }
});
submitBtn.addEventListener("click", () => {
  messageRef.style.visibility = "visible";
});

Your smart submit button is now ready. That’s for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the download button below. Also, if you have any w=queries suggestions or feedback comment below.
Happy coding!

RELATED ARTICLES

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

six − three =

Most Popular