Build An Interactive Monkey Login Panel Using HTML, CSS, and Javascript.

Abdul Wahid Naafi

Published in

codeburst

7 min readJul 6, 2020

Build it along — Fun-Filled Login Panel UI

Hola Amigos !!

Login panel is a common part found in most of the websites out there on the internet with two input fields; one for a username or email and another one for password.

In this tutorial, we’ll learn how to implement a fun-filled interactive monkey login panel with HTML, CSS, and a very little bit of Javascript. You don’t need to be an expert in any of the technology, just the fundamentals, sit back relax, and follow along to build this amazing login UI 👇.

Click here for Live Demo Codepen of this project.
Click here for GitHub repo of this project.

Before getting into the code let’s understand the logic behind it!

The Logic (It’s very simple 😉)

This is a GIF image of our hero monkey, this is set as the background image of the circular white portion in the login panel. This GIF loads when the page initializes and when the user types something on the email or the username field.

Don’t use this image for trying, use the one provided in the Github repo.

And then I photoshopped the monkey’s hand by cutting it out from the monkey closing its eye emoji ->🙈 (this) and then hid this hand by assigning a margin-top of 110% and overflow hidden property in CSS.

Most of you might have guessed the logic by now. When the user clicks on the password input field a Javascript function gets triggered which then makes the hidden hand visible by reducing the margin-top to 0% and it gets on top of the monkey’s face as if it closes its eyes.

One more thing, the animated monkey GIF turns his head around which makes it peek a little on the password 😉 even when the hands are over its face. So I trimmed a part of the monkey GIF where it doesn't move his head but stays in motion. This monkey GIF is replaced with the original GIF when the user clicks on the password field and the hand on top of its face.

Pretty Simple Right ! Still didn’t understand? No problem you’ll get it as we go into it.

Ok let’s dive into coding now beginning with HTML

HTML (for structuring the login panel)

<!DOCTYPE html>
<html>
<head>
 <title>Monkey Login</title>
 <link rel=”stylesheet” type=”text/css” href=”style.css”>
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
</head><body>
<div class=”maincontainer”>
<div class=”monkeylogin”>
 <div class=”animcon” id=”animcon”>
 <img id=”hands” src=”images/hands.png”/>
 </div> <div class=”formcon”>
 <form>
 <input type=”email” id=”mail” name=”” onclick=”openeye();” class=”tb” placeholder=”Email” autocomplete=”off”/>
 <br/>
 <br/>
 <input type=”password” id=”pwdbar” onclick=”closeye();” name=”pwd” class=”tb”placeholder=”Password” />
 <br/>
 <br/>
 <input type=”submit” name=”” class=”sbutton” value=”L O G I N” />
 </form>
 </div> <footer class=”foot”><a style=”color: #bababa; text-decoration: none;” href=”https://naaficodes.github.io">Naaficodes</a>
</footer></div>
</div>
<script type=”text/javascript” src=”script.js”></script>
</body>
</html>

Yeah! that’s all the HTML code we need to build the login panel

Beginning with the head tag we got <Title> tag and <link> tag to link the stylesheet and viewport meta for mobile responsive.

Next inside the <body> tag, we got four important div’s with classes:-

“maincontainer” class

This div acts as a wrapper to hold the white login panel at the center of the page.

“monkeylogin” class

This div is the white login panel in the center of the page and acts as the wrapper to all the elements including the animated monkey, login fields, and submit button.

“animcon” class

This div is the circular white region that holds the animated monkey GIF as the background image, and also the monkey hand is inside this div as a png image.

“formcon” class

This div holds the form elements (Input Fields and Submit button).

Onclick event handlers that trigger “openeye()” and “closeye()” functions are attached to email and password input fields respectively.

CSS (Styling)

Let’s begin with setting the background of the page.

body
{
 background:url(‘images/monkeybg.png’) #1b8c1b66 ;
 background-size: 5%;
 background-repeat: repeat;
}

“monkeybg.png” is available to download in the Github repo of this project, that image is set as the background image, the background-size is kept as 5% to reduce the size of the image and to show repetitively.

Now let's make the login panel.

//Wrapper.maincontainer
{
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100vw;
 height: 100vh;
}//White login panel in the center.monkeylogin
{
 width: 350px;
 height: 500px;
 box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
 display: flex;
 align-items: center;
 flex-direction: column;
 background-color: white;
 border-radius: 40px;
}

“maincontainer” class is the wrapper which covers the whole page.

//CSS Cose To Centering all elements both horizontally and verticallydisplay: flex;
align-items: center;
justify-content: center;

“monkeylogin” class is set with a width of 350px ,height of 500px, borer-radius of 40px which makes the border curved.

Moving ahead to the animation container (animcon) class.

.animcon
{
 
 overflow: hidden;
 /*overflow hidden because to keep the hand image hidden below*/ background-color: white;
 margin-top:20px;
 height: 170px;
 width: 170px;
 border-radius: 50%;
 background-image:url('images/monkey.gif');
 background-size: 90% 85%;
 background-repeat: no-repeat;
 background-position: center;
 box-shadow: 0 10px 25px rgba(0, 0, 0, .2);/*flex center to keep the hand image in the center*/
 display: flex;
 align-items: center;
 flex-direction: column;
}.animcon img
{
 margin-top:110%;
 height: 170px;
 width: 170px;
 transition: 1s;
}

“animcon” class is the animation container the white circular div in the login panel, the CSS code is pretty much self-explanatory. Just that background-size 90% refers to the width and 85% refers to the height of the background image.

“.animcon img” refers to the img element inside the animcon div which is the image of the hand, the margin-top property of the img element is set to 110% to hide it, and the transition 1s for the smooth arousal of the hand.

The last part of the CSS code is the form container (formcon) class.

.formcon
{
 margin-top: 38px;
}input
{
 height: 40px;
 width: 300px;
 border-radius: 20px;
 border:none;
 color: #5a5449;
 text-indent: 15px;
 font-size: 100%;
 box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
 outline: none;
}input::placeholder
{
 color:lightgrey;
 font-size: 100%;
 font-weight: lighter;
 text-indent: 15px;
}.sbutton
{
 text-indent: 0px;
 height: 40px;
 width: 300px;
 margin-top: 10px;
 background-color: #1b8c1b66;
 transition: "2s";
 border: none;
 color: white;
 font-weight: bolder;
 box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
 outline: none;}
.sbutton:hover
{
 color: #5a5449;
 cursor: pointer;
}.foot
{
 color: #5a5449;
 font-weight: lighter;
 margin-top: 40px;
}

In the above CSS code, we’re just styling the Input Fields like setting its background color, pseudo-class like hover, placeholder styling etc., “sbutton” class holds the styling property of Submit button. Lastly the “foot” class I used it to link my portfolio but for a realtime project, you can use it for like “Back to home” link.

Whew! It looks long but it’s pretty simple as all of them are just the fundamental CSS, and it’s clearly readable. Let’s proceed to Javascript, there ain't any complex javascript involved just 7–8 lines of code, yeah you heard me right.

Javascript (Where the magic happens).

var x=document.getElementById("hands");
var y=document.getElementById("animcon");
function closeye()
{
 y.style.backgroundImage="url('images/monkey_pwd.gif')";
 x.style.marginTop="0%";
}
function openeye()
{
 y.style.backgroundImage="url('images/monkey.gif')";
 x.style.marginTop="110%";
}

That’s the total javascript code for this project 😂.

So what we got here, 2 variable “X” and “Y” and two functions “closeye()” and “openeye()”.

X — Refers to the Image DOM element (“Monkey’s hand image in the animcon div”).

Y— Refers to the animcon div.

Closeye() function — Sets the background image of the animcon div to the trimmed (No head moment) animated monkey GIF and set’s the margin-top property of Hand image to 0% which makes it floats up and closes the monkey’s eyes. This function is triggered when the user clicks on the Password field.

Openeye() function — Sets the background image of the animcon div to the original animated monkey GIF and set’s the margin-top property of Hand image to 110% which makes it goes down hiding the hand. This function is triggered when the user clicks on the email field.

Tadaaa!!! That’s all folks, Here’s the final output.

I hope you enjoyed this tutorial. Try making this login panel and share a picture in your Instagram story tagging me ( @iam_naafi or @naaficodes) or post it in LinkedIn and mention me.

Conclusion:

Thank you for reading this, I hope you find this article helpful, it’s all about learning and sharing, I’ve done my part and hope you do the same, share this article with your fellow friends.