DO IT YOURSELF TASK CREATE A PASSWORD
It’s time to have a go at using all the JavaScript Code Skills you’ve learnt, to create a new web page that asks the user to enter a password.
This web page will protect the web page you built in previous sections. If the user gets the password right, they will be able to access the secretinfo.html web page.
If they get it wrong, an alert will pop up telling them that access is denied.
Assignment tasks:
- When you build your new web page make sure you code these things using HTML
and JavaScript: - A function that will check your password when it is called.
- Variables that will store the value of the data the user enters into the
password box. - An if statement that will check if the password the user enters is correct.
- An alert that will pop up if an incorrect password is entered.
- A text box the user can enter data into.
- A hyperlink that connects this web page to the secretinfo.html web page.
- Save your file in your Coding folder and call it password.html.
Your finished code should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Password</title>
<style>
body {
background-color: lightblue;
padding: 30px;
}
</style>
<script>
function checkPassword() {
var password = document.getElementById("passwordBox");
var passwordText = password.value;
if(passwordText === "GabbaGabbaHey") {
return true;
}
alert("Access denied! Incorrect password!");
return false;
}
</script>
</head>
<body>
<p style="font-size: 30pt;">Hello World.</p>
<p>Please enter the password to view this website.</p>
<p>Password:<input id="passwordBox" type="password"/>
<a href="secretpage.html" onclick="return checkPassword();">Click here to submit password and view website </a>
</body>
</html>
Below is an online emulation of our password app. It contains 4 files, with the following code:
1) index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="index.js"></script>
<p style="font-size: 30pt;">Hello World.</p>
<p>Please enter the password to view this website.</p>
<p>Password:<input id="passwordBox" type="password"/></p>
<a href="secretpage.html" onclick="return checkPassword();">Click here to submit password and view website</a>
</body>
</html>
2) index.js
function checkPassword() {
var password = document.getElementById("passwordBox");
var passwordText = password.value;
if(passwordText === "GabbaGabbaHey") {
return true;
}
alert("Access denied! Incorrect password!");
return false;
}
3) index.css
body {
background-color: lightblue;
padding: 30px;
}
4) secretpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="index.js"></script>
<p style="font-size: 30pt;">Hello World.</p>
<p>Welcome to the Top-Secret Page.</p>
<a href="index.html">Log Out.</a>
</body>
</html>
Brilliant coding! This password page will keep the page safe. Don’t forget you can use more CSS properties to change the look of the page.
JavaScript is a powerful and dynamic programming language, used by all modern web browsers.
Knowing JavaScript allows you to create interactive and responsive web pages that allow a user to enter information. It’s also great for building web-based apps.
