Learn how to build a password-protected screen using HTML, CSS, and JavaScript. Enhance web security with user authentication.
Table of Contents
In today's digital age, web security is paramount. With cyber threats on the rise, protecting sensitive content and user data has become a top priority for web developers and businesses. One effective way to bolster security is by implementing a password-protected screen on your web applications.
In this comprehensive guide, we will take you step by step through the process of creating a password-protected screen using the powerful trio of HTML, CSS, and JavaScript. Whether you're a seasoned developer looking to enhance your web security knowledge or a newcomer eager to learn, this tutorial will equip you with the skills to fortify your web projects.
Get ready to delve into the world of front-end development as we explore the creation of a secure, user-friendly environment for your web users. Let's begin by understanding the prerequisites and then proceed to build an impenetrable fortress around your valuable web content.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our password-protected screen.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down what each part of the code does:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used. In this case, it's HTML5, the latest version of HTML.
2. <html lang="en">: This opening tag marks the beginning of the HTML document. The lang attribute is set to "en," indicating that the document is written in English.
3. <head>: This section contains metadata about the web page, such as the title, character encoding, and links to external resources. It doesn't display any content on the web page itself.
- <title>Password Protective Screen</title>: This sets the title of the web page, which appears in the browser's title bar or tab.
- <meta charset="UTF-8" />: This meta tag specifies the character encoding of the document, which is UTF-8 in this case, ensuring that text is displayed correctly.
- <meta name="viewport" content="width=device-width" />: This meta tag is used for responsive web design. It tells the browser to set the viewport width to the device width, making the page adapt to different screen sizes.
- <link rel="stylesheet" href="styles.css" />: This link tag links an external CSS stylesheet file named "styles.css" to the HTML document. This file is used for styling the web page.
4. <body>: This section contains the visible content of the web page that users will see and interact with.
- <label class="password_label" for="text_input">Password</label>: This is a label element associated with an input field. It is typically used to provide a text description for the input element with the for attribute pointing to the input element with the id of "text_input."
- <input id="text_input" name="text_input" class="password visible" type="text" spellcheck="false">: This is an input element of type "text" with an id of "text_input" and a name attribute set to "text_input." It also has two class attributes, "password" and "visible," and the spellcheck attribute is set to "false," which disables browser spell checking.
- <input class="password hidden" type="password" disabled>: This is another input element of type "password" with the class "password" and "hidden." It is also disabled, meaning users cannot interact with it. Password input fields typically hide the entered characters for security reasons.
- <img class="left" src="..." draggable="false">, <img class="handle" src="..." draggable="false">, <img class="right" src="..." draggable="false">: These are three image elements with different classes. They display images sourced from the URLs provided in the src attribute. The draggable="false" attribute prevents users from dragging these images.
- <script src="script.js"></script>: This script tag links an external JavaScript file named "script.js" to the HTML document. JavaScript is used for adding interactivity and dynamic behavior to the web page.
This is the basic structure of our password-protected screen using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the password-protected screen is in place, the next step is to add styling to the screen using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our screen.
Let's break down each part of the code:
1. @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
- This line imports a font called "Press Start 2P" from Google Fonts and makes it available for use on the web page. It will be used as the default font for all elements on the page.
2. * {...}
- This is a wildcard selector that applies the following styles to all elements on the page:
- padding: 0; removes all padding.
- margin: 0; removes all margins.
- box-sizing: border-box; sets the box-sizing property to border-box, which ensures that padding and border are included in an element's total width and height.
- font-family: "Press Start 2P", cursive; sets the font family to "Press Start 2P" for all elements, with a fallback to the generic "cursive" font.
3. body {...}
- This selector targets the <body> element of the web page. It sets various styles for the body element, including:
- display: flex; makes the body a flex container.
- flex-direction: column; arranges its children in a column layout.
- justify-content: center; centers its content vertically.
- align-items: center; centers its content horizontally.
- min-height: 100vh; sets the minimum height of the body to 100% of the viewport height.
- background-color: #50bdc7; sets the background color to a shade of blue (#50bdc7).
- overflow: hidden; hides any content that overflows the body.
4. body:before {...}
- This pseudo-element (body:before) creates a decorative background element behind the body content.
- It is positioned absolutely with respect to the body.
- The background-image property sets an image as the background.
- transform: rotate(-23deg); rotates the background element by -23 degrees.
- opacity: 0.7; sets the opacity to 0.7.
5. body.grabbing {...}
- This selector targets the body element when it has the class "grabbing."
- It changes the cursor to a grabbing hand icon when the user clicks and drags.
6. body .password_label {...}
- This selector targets an element with the class "password_label" within the body.
- It positions the element absolutely and adjusts its font size and vertical position.
7. body .password {...}
- This selector targets an element with the class "password" within the body.
- It sets various styles for this password input field, including its font size, width, height, and border.
8. body .password.visible {...}
- This selector targets an element with the class "password" that also has the class "visible."
- It modifies the password input field's appearance when it is visible, changing its letter spacing, padding, and color.
9. body .password.hidden {...}
- This selector targets an element with the class "password" that also has the class "hidden."
- It modifies the password input field's appearance when it is hidden, changing its font size, letter spacing, and background image.
10. body .password.hidden.slide {...}
- This selector targets an element with the class "password" that has both "hidden" and "slide" classes.
- It further modifies the hidden password input field, rotating it 180 degrees.
11. body img {...}
- These selectors target all <img> elements within the body.
- They set the position of the images to absolute and prevent them from being selectable by the user.
12. body img.left {...} and body img.right {...}
- These selectors target specific images with classes "left" and "right" and translate them horizontally.
13. body img.handle {...}
- This selector targets an image with the class "handle."
- It adjusts the position, z-index, and cursor style for this image, making it appear draggable.
This will give our password-protected screen an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Press Start 2P", cursive;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #50bdc7;
overflow: hidden;
}
body:before {
z-index: -1;
content: "";
position: absolute;
width: 200%;
height: 200%;
background-image: url("https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/hint.png");
background-repeat: no-repeat;
background-size: 100px;
background-position: calc(50% + 195px) calc(50% - 55px);
transform: rotate(-23deg);
opacity: 0.7;
}
body.grabbing {
cursor: grabbing;
}
body.grabbing * {
cursor: grabbing !important;
}
body .password_label {
position: absolute;
font-size: 25px;
transform: translateY(-70px);
}
body .password {
font-size: 20px;
outline: none;
width: 300px;
height: 80px;
border: 1px solid #686868;
}
body .password.visible {
letter-spacing: 12px;
padding: 20px 7px 20px 35px;
color: black;
}
body .password.hidden {
padding: 20px;
font-size: 50px;
pointer-events: none;
z-index: 1;
letter-spacing: -18px;
position: absolute;
opacity: 1;
background-image: url("https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/glass.svg");
transform-origin: 50% 100%;
}
body .password.hidden.slide {
transform: rotateX(180deg);
}
body img {
position: absolute;
user-select: none;
}
body img.left {
transform: translate(-100px, 40px);
}
body img.right {
transform: translate(100px, 40px);
}
body img.handle {
transform: translateY(-40px);
z-index: 3;
transform-origin: 50% calc(50% + 80px);
cursor: grab;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. This JavaScript code controls a user interface element that allows the user to reveal or hide a password input field by dragging a handle. Let's break down the code step by step:
1. It starts by selecting three elements from the HTML document:
- text: It selects an input field with the class "password" and "visible".
- pass: It selects another input field with the class "password" and "hidden".
- handle: It selects an image element with the class "handle".
2. The code adds an event listener to the text input field. When the user inputs text into this field, it copies the entered text into the pass input field. This is often used for password input fields where the actual password characters are hidden but need to be synchronized with a visible field for user confirmation.
3. Several variables are defined:
- startingPos: Initially undefined, this variable will store the starting vertical position of the mouse pointer when the user clicks on the handle.
- paneUp: A boolean variable that determines whether the "password pane" is currently visible or hidden.
- angle: This variable will be used to store the rotation angle for the password pane.
4. An event listener is added to the handle image element for the "mousedown" event. When the user clicks and holds the mouse button on the handle, it records the vertical position of the mouse pointer (startingPos) and adds a "grabbing" class to the body element, changing the cursor to indicate grabbing.
5. Another event listener is added to the document for the "mousemove" event. While the user is dragging the handle, this code calculates the rotation angle based on the movement of the mouse pointer. It checks whether the user is dragging the handle up or down and adjusts the angle accordingly. It also updates the pass and handle elements' transforms to create a rotating animation effect for the password pane.
6. A third event listener is added to the document for the "mouseup" event. When the user releases the mouse button, it removes the "grabbing" class from the body element, changes the cursor back to the default, and sets the rotation angle for the password pane based on whether it should be revealed or hidden (paneUp variable). The startingPos variable is reset to undefined.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const text = document.querySelector('input.password.visible');
const pass = document.querySelector('input.password.hidden');
const handle = document.querySelector('img.handle');
text.addEventListener('input', (e)=>{
pass.value = e.target.value;
});
let startingPos;
let paneUp = true;
let angle;
handle.addEventListener('mousedown', (e)=>{
startingPos = e.clientY;
document.body.classList.add('grabbing');
})
document.addEventListener('mousemove', (e)=>{
if (startingPos) {
if (paneUp) {
if (e.clientY > startingPos && e.clientY < startingPos+160) {
angle = ((e.clientY-startingPos) * 180) / 160;
pass.style.transform = `rotateX(${angle}deg)`;
handle.style.transform = `translateY(-40px) rotateX(${angle}deg)`;
}
} else {
if (e.clientY < startingPos && e.clientY > startingPos-160) {
angle = 360 + ((e.clientY-startingPos-160) * 180) / 160;
pass.style.transform = `rotateX(${angle}deg)`;
handle.style.transform = `translateY(-40px) rotateX(${angle}deg)`;
}
}
}
})
document.addEventListener('mouseup', (e)=>{
document.body.classList.remove('grabbing');
if (startingPos) {
if (angle >= 90) {
pass.style.transform = `rotateX(180deg)`;
handle.style.transform = `translateY(-40px) rotateX(180deg)`;
paneUp = false;
} else {
pass.style.transform = `rotateX(0)`;
handle.style.transform = `translateY(-40px) rotateX(0)`;
paneUp = true;
}
}
startingPos = undefined;
})Final Output:
Conclusion:
As we bring this journey to a close, you've embarked on a path that leads to stronger web security and a deeper understanding of front-end development. You've learned how to create a password-protected screen using HTML, CSS, and JavaScript, equipping yourself with a valuable skillset in today's digital landscape.
In a world where data breaches and cyber threats loom large, the ability to safeguard your web content and user data is invaluable. By implementing user authentication and a password-protected screen, you've taken a proactive step toward fortifying your web applications.
Remember, the knowledge you've gained doesn't end here. Continue to explore and refine your web development skills. Stay updated with the latest security best practices, and always prioritize the safety of your users' information.
With your newfound expertise, you're now better equipped to build secure web applications that inspire trust and confidence among your audience. Your commitment to web security will not only protect your assets but also enhance the user experience, setting you on a path to success in the ever-evolving digital landscape.
Thank you for joining us on this journey, and here's to a future of secure, user-friendly web projects. Happy coding!
Credit: Nik439
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
