Introduction:
Welcome to this exciting code tutorial where we will embark on a journey to build a shake on invalid input effect. Whether you are a seasoned developer looking to enhance your skills or a beginner eager to dive into web development, this tutorial is designed for you.
Things You Will Learn:
- HTML Structure: We’ll start by setting up the basic HTML structure to create a form with an input field and an error message container.
- CSS Styling: Learn how to style the form, input field, and error message using CSS to make your validator visually appealing.
- JavaScript Logic: Dive into the JavaScript code to understand how the input validation works. We’ll cover the process of checking for valid and invalid inputs and providing real-time feedback to the user.
- Animation Effects: Implement a subtle animation effect to enhance the user interface. The shake effect adds a touch of dynamism when there’s an invalid input.
Video Tutorial:
I would suggest you to watch the video down below for a better understanding of how we have implemented the functionality of this project. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ”Shake On Invalid Input”. Inside this folder, we have 3 files. These files are :
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. 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>Shake On Invalid Input</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form id="myForm">
<div id="errorMessage" class="error-message">Invalid Input</div>
<input
type="text"
id="inputField"
placeholder="Input Some Text"
required
/>
<button type="button" onclick="validateInput()">Submit</button>
</form>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #01dd8f;
}
form {
width: min(90%, 25em);
background-color: #151729;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 5em 2em;
border-radius: 0.5em;
}
.error-message {
color: #ff3434;
visibility: hidden;
}
input,
button {
display: block;
width: 100%;
padding: 1em;
outline: none;
border: none;
border-radius: 0.3em;
}
button {
background-color: #01dd8f;
margin-top: 1em;
cursor: pointer;
}
.shake {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
function validateInput() {
let inputField = document.getElementById("inputField");
let inputValue = inputField.value.trim();
let errorMessage = document.getElementById("errorMessage");
//Add your validation logic here
if (inputValue === "") {
//Invalud input,apply shake effect and display the error message
inputField.classList.add("shake");
errorMessage.style.visibility = "visible";
//Remove the shake class and hide the error message after the animation completes
setTimeout(function () {
inputField.classList.remove("shake");
errorMessage.style.visibility = "hidden";
}, 500);
} else {
//Valid input, proceed with your logic
alert("Valid input");
}
}
Conclusion:
Congratulations! You’ve successfully built a shake on invalid input effect from scratch, incorporating HTML for structure, CSS for styling, and JavaScript for interactivity. Remember, a well-organized project structure is crucial for scalability and maintainability. Now that you’ve completed this tutorial, feel free to explore and expand your website further, adding more features and refining your skills in the exciting world of web development. Happy coding!
