Hello mischievous creators! Today, let’s spice up our web form with a bit of playful fun by creating a Naughty Submit Button using HTML, CSS, and JavaScript. This project is perfect for those who want to add a touch of humor to their user interactions or simply want to explore the creative side of web development.
We’ll keep it cheeky and entertaining, using HTML for the structure of our form, CSS to style our button with a mischievous flair, and JavaScript to add some naughty behavior to our submit button. No need for serious faces – let’s inject some fun into our coding!
So, join me in embracing the playful side of web development as we embark on creating a Naughty Submit Button. Whether you’re a coding enthusiast looking to try something new or just want to add a bit of humor to your projects, this tutorial offers a delightful opportunity to learn and have a laugh along the way.
HTML :
This HTML code creates a simple login form with a “Naughty Submit Button” heading, input fields for username and password, a submit button, and a message reference for successful sign-ups. The form is contained within a div with the class “container”. The HTML imports a Google Font called “Poppins” and links an external CSS file called “style.css” for styling. The script tag at the end links an external JavaScript file called “script.js” for handling form functionality.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Naughty Login form</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<h2>Naughty Submit Button</h2>
<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>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
CSS :
This CSS code styles a form container with input fields and a submit button. It resets default padding and margins, ensures consistent box sizing, and sets a default font family. The body has a dark background color, while the container has a light background with padding, rounded corners, and a shadow effect. Headings are centered with a specific font size and color. Input fields have no borders except for a bottom border, and the submit button has a background color, padding, and rounded corners. The message reference has a smaller font size, margin, and green color, initially hidden. Overall, it creates a clean and visually appealing form layout.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #262433;
}
.container {
width: 31.25em;
background-color: #f8f8f8;
padding: 1.4em 3.75em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.7em;
box-shadow: 0 1em 4em rgba(212, 234, 255, 0.2);
}
h2{
text-align: center;
font-size: 32px;
margin-bottom: 30px;
color: lightblack;
}
input,
#submit {
border: none;
outline: none;
display: block;
}
input {
width: 100%;
background-color: transparent;
margin-bottom: 2em;
font-size: 20px;
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: #3492eb;
color: white;
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:
This JavaScript code validates a username and password input form. It checks if the username starts with a letter and is at least four characters long, and if the password is at least eight characters with a mix of uppercase, lowercase, numbers, and special characters. It updates input field styles to indicate validation status and adjusts the submit button’s position if needed. Upon submission, it toggles the visibility of an accompanying message.
Overall, it provides real-time feedback to users while interacting with the form.
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";
});
In short, we’ve successfully created a Naughty Submit Button using HTML, CSS, and JavaScript. This playful addition to web forms adds a touch of humor and creativity to user interactions. Whether you’re a beginner or an experienced developer, embracing the fun side of coding can lead to memorable and delightful user experiences.
If you run into any problems with your project, worry not. The remedy is just a click away—Download the source code and confront your coding challenges with enthusiasm. Enjoy your coding adventure!
