Lesson: Creating a Password-Protected Page with JavaScript and HTML

Introduction

In this lesson, you’ll learn how to create a password-protected web page using HTML, CSS, and JavaScript. You’ll understand how to use the

onclick

attribute to make HTML elements interactive and how to use the

tag for user input. You’ll also learn how to use JavaScript to check the password entered by the user.

Basic HTML Structure

Let’s start with the basic HTML structure of our page:

Explanation

• HTML Elements:
  • <h1>: Header tag for the title.
  • <p>: Paragraph tag for instructions.
  • <label>: Label for the password input.
  • <input>: Input tag for the password box.
  • <a>: Anchor tag for the clickable link.
• JavaScript:
  • getElementById: Finds the HTML element with the specified id.
  • value: Gets the value of the input field.
  • if statement: Checks if the entered password is correct.
  • alert: Displays an alert if the password is incorrect.

Adding CSS for Styling

Let’s add some basic CSS to style our page:

Explanation

• CSS Properties:
  • background-color: Sets the background color of the page.
  • padding: Adds padding around elements.
  • font-family: Sets the font of the text.
  • display: Controls the layout of elements.
  • margin-top: Adds space above elements.
  • padding: Adds padding inside elements.
  • font-size: Sets the size of the text.
  • color: Sets the color of the text.
  • text-decoration: Removes the underline from links.
  • border-radius: Rounds the corners of elements.
  • hover: Changes the background color when hovering over the link.

Complete Project Files

1. index.html

2. index.js

3. index.css

4. secretpage.html

Here is the finished working app: