Hey everyone. Welcome to today’s tutorial. In this tutorial, we will learn how to create an interactive login form. To build this form, we need HTML, CSS and Javascript.
This is a beginner-friendly javascript project. If you are looking for more complex javascript projects you can check out this playlist here. This playlist consists of 100+ javascript projects. The difficulty of these projects varies from simple to quite complex ones. Thus this playlist is suitable for everyone including javascript beginners to javascript experts.
Let us take a look at how this project works. This project consists of a panda illustration holding an HTML form. We have created this panda illustration from scratch with CSS.
When the user focuses on the username input field, the panda moves its eye towards the input field. And when the user starts typing the password, the panda covers up his eyes with his hands. If we click outside the username field/password field, we make the panda go to its original state. We add smooth transitions to these movements.
Video Tutorial:
If you are interested to learn by watching a video tutorial instead of 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. We create a project folder called-“Interactive Panda Form”. Inside this folder, we have three files. The first file is index.html which is the HTML document. Next is the style.css file which is the stylesheet. And finally, we have script.js which is a script file.
HTML:
We begin with the HTML code. First, 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>Interactive Panda Form</title>
<!-- Google Font -->
<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">
<form>
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Username here..." />
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Password here..." />
<button>Login</button>
</form>
<div class="ear-l"></div>
<div class="ear-r"></div>
<div class="panda-face">
<div class="blush-l"></div>
<div class="blush-r"></div>
<div class="eye-l">
<div class="eyeball-l"></div>
</div>
<div class="eye-r">
<div class="eyeball-r"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="hand-l"></div>
<div class="hand-r"></div>
<div class="paw-l"></div>
<div class="paw-r"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style the form and create the panda illustration 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: #f4c531;
}
.container {
height: 31.25em;
width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
form {
width: 23.75em;
height: 18.75em;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: calc(50% + 3.1em);
left: 50%;
padding: 0 3.1em;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 0.5em;
}
form label {
display: block;
margin-bottom: 0.2em;
font-weight: 600;
color: #2e0d30;
}
form input {
font-size: 0.95em;
font-weight: 400;
color: #3f3554;
padding: 0.3em;
border: none;
border-bottom: 0.12em solid #3f3554;
outline: none;
}
form input:focus {
border-color: #f4c531;
}
form input:not(:last-child) {
margin-bottom: 0.9em;
}
form button {
font-size: 0.95em;
padding: 0.8em 0;
border-radius: 2em;
border: none;
outline: none;
background-color: #f4c531;
color: #2e0d30;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.15em;
margin-top: 0.8em;
}
.panda-face {
height: 7.5em;
width: 8.4em;
background-color: #ffffff;
border: 0.18em solid #2e0d30;
border-radius: 7.5em 7.5em 5.62em 5.62em;
position: absolute;
top: 2em;
margin: auto;
left: 0;
right: 0;
}
.ear-l,
.ear-r {
background-color: #3f3554;
height: 2.5em;
width: 2.81em;
border: 0.18em solid #2e0d30;
border-radius: 2.5em 2.5em 0 0;
top: 1.75em;
position: absolute;
}
.ear-l {
transform: rotate(-38deg);
left: 10.75em;
}
.ear-r {
transform: rotate(38deg);
right: 10.75em;
}
.blush-l,
.blush-r {
background-color: #ff8bb1;
height: 1em;
width: 1.37em;
border-radius: 50%;
position: absolute;
top: 4em;
}
.blush-l {
transform: rotate(25deg);
left: 1em;
}
.blush-r {
transform: rotate(-25deg);
right: 1em;
}
.eye-l,
.eye-r {
background-color: #3f3554;
height: 2.18em;
width: 2em;
border-radius: 2em;
position: absolute;
top: 2.18em;
}
.eye-l {
left: 1.37em;
transform: rotate(-20deg);
}
.eye-r {
right: 1.37em;
transform: rotate(20deg);
}
.eyeball-l,
.eyeball-r {
height: 0.6em;
width: 0.6em;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
left: 0.6em;
top: 0.6em;
transition: 1s all;
}
.eyeball-l {
transform: rotate(20deg);
}
.eyeball-r {
transform: rotate(-20deg);
}
.nose {
height: 1em;
width: 1em;
background-color: #3f3554;
position: absolute;
top: 4.37em;
margin: auto;
left: 0;
right: 0;
border-radius: 1.2em 0 0 0.25em;
transform: rotate(45deg);
}
.nose:before {
content: "";
position: absolute;
background-color: #3f3554;
height: 0.6em;
width: 0.1em;
transform: rotate(-45deg);
top: 0.75em;
left: 1em;
}
.mouth,
.mouth:before {
height: 0.75em;
width: 0.93em;
background-color: transparent;
position: absolute;
border-radius: 50%;
box-shadow: 0 0.18em #3f3554;
}
.mouth {
top: 5.31em;
left: 3.12em;
}
.mouth:before {
content: "";
position: absolute;
left: 0.87em;
}
.hand-l,
.hand-r {
background-color: #3f3554;
height: 2.81em;
width: 2.5em;
border: 0.18em solid #2e0d30;
border-radius: 0.6em 0.6em 2.18em 2.18em;
transition: 1s all;
position: absolute;
top: 8.4em;
}
.hand-l {
left: 7.5em;
}
.hand-r {
right: 7.5em;
}
.paw-l,
.paw-r {
background-color: #3f3554;
height: 3.12em;
width: 3.12em;
border: 0.18em solid #2e0d30;
border-radius: 2.5em 2.5em 1.2em 1.2em;
position: absolute;
top: 26.56em;
}
.paw-l {
left: 10em;
}
.paw-r {
right: 10em;
}
.paw-l:before,
.paw-r:before {
position: absolute;
content: "";
background-color: #ffffff;
height: 1.37em;
width: 1.75em;
top: 1.12em;
left: 0.55em;
border-radius: 1.56em 1.56em 0.6em 0.6em;
}
.paw-l:after,
.paw-r:after {
position: absolute;
content: "";
background-color: #ffffff;
height: 0.5em;
width: 0.5em;
border-radius: 50%;
top: 0.31em;
left: 1.12em;
box-shadow: 0.87em 0.37em #ffffff, -0.87em 0.37em #ffffff;
}
@media screen and (max-width: 500px) {
.container {
font-size: 14px;
}
}
Javascript:
Finally, we implement the functionality using Javascript. Now copy the code below and paste it into your script file.
let usernameRef = document.getElementById("username");
let passwordRef = document.getElementById("password");
let eyeL = document.querySelector(".eyeball-l");
let eyeR = document.querySelector(".eyeball-r");
let handL = document.querySelector(".hand-l");
let handR = document.querySelector(".hand-r");
let normalEyeStyle = () => {
eyeL.style.cssText = `
left:0.6em;
top: 0.6em;
`;
eyeR.style.cssText = `
right:0.6em;
top:0.6em;
`;
};
let normalHandStyle = () => {
handL.style.cssText = `
height: 2.81em;
top:8.4em;
left:7.5em;
transform: rotate(0deg);
`;
handR.style.cssText = `
height: 2.81em;
top: 8.4em;
right: 7.5em;
transform: rotate(0deg)
`;
};
//When clicked on username input
usernameRef.addEventListener("focus", () => {
eyeL.style.cssText = `
left: 0.75em;
top: 1.12em;
`;
eyeR.style.cssText = `
right: 0.75em;
top: 1.12em;
`;
normalHandStyle();
});
//When clicked on password input
passwordRef.addEventListener("focus", () => {
handL.style.cssText = `
height: 6.56em;
top: 3.87em;
left: 11.75em;
transform: rotate(-155deg);
`;
handR.style.cssText = `
height: 6.56em;
top: 3.87em;
right: 11.75em;
transform: rotate(155deg);
`;
normalEyeStyle();
});
//When clicked outside username and password input
document.addEventListener("click", (e) => {
let clickedElem = e.target;
if (clickedElem != usernameRef && clickedElem != passwordRef) {
normalEyeStyle();
normalHandStyle();
}
});
That’s it for this tutorial. You can now go ahead and customize this the way you like.
If you face any issues while creating this project, you can download the source code by clicking on the ‘Download Code’ button below.
Also, I would love to hear from you guys. So if you have any queries, suggestions, or feedback, you can comment below.
Happy Coding!
