Hello Guys! Welcome to Coding Torque. In this blog, we are going to create an annoying submit button using HTML, CSS & JavaScript. This button doesn't allow you to click on it until you enter a valid email and password. This is a great project to create if you are a beginner and learning web development.
Before we start, here are some more projects for you:
2. Tip Calculator using JavaScript
3. QR Code Generator using JavaScript
I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.
Let's go step by step:
Step 1: HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Annoying Submit Button using JavaScript with Source Code - @code.scientist x @codingtorque</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag
<div class="container">
<form>
<h2>Login</h2>
<label for="email">Email</label>
<input type="email" id="email" required>
<label for="password">Password</label>
<input type="password" id="password" required autocomplete>
<a href="#">Forgot Password?</a>
<button id="submitBtn">Submit</button>
<p id="help-text"></p>
</form>
</div>Output Till Now
Step 2: CSS Code
Create a file style.css and paste the code below.
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Potta+One&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
background: white;
color: black;
width: 20rem;
padding: 30px 30px;
border-radius: 10px;
}
form {
display: flex;
flex-direction: column;
}
form input {
margin-bottom: 10px;
border: 2px solid gainsboro;
outline: none;
}
form a {
text-decoration: none;
}
#submitBtn {
margin-top: 30px;
align-self: flex-start;
padding: 5px 15px;
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
color: white;
border-radius: 5px;
border: none;
cursor: pointer;
transition: 0.5s ease;
}
#help-text {
margin-top: 10px;
font-size: 12px;
}
Output Till Now
Step 3: JavaScript Code
Create a file script.js and paste the code below.
let submitBtn = document.getElementById("submitBtn");
let email = document.getElementById("email");
let password = document.getElementById("password");
let helpText = document.getElementById("help-text");
const validateEmail = (email) => {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
};
submitBtn.onmouseover = () => {
if (validateEmail(email.value) && password.value.length > 8) {
helpText.innerText = "Now you can submit"
} else {
if (submitBtn.style.alignSelf === "flex-end") {
submitBtn.style.alignSelf = "flex-start"
}
else {
submitBtn.style.alignSelf = "flex-end"
}
helpText.innerText = "You cannot submit until your email is validated and passowrd is greater than 8 characters"
}
}
Written by: Coding Torque | Piyush Patil
If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖
Follow us on Instagram for more projects like this👨💻