Question: In this exercise, youll develop an application that generates strong passwords of the length entered by the user. The interface looks like this: 2. In
In this exercise, youll develop an application that generates strong passwords of the length entered by the user. The interface looks like this:
2. In the JavaScript file, note that the jQuery ready event handler contains three functions: the getRandomNumber() function, the handler for the click event of the Get Password button, and the handler for the click event of the Clear button. The handler for the Get Password button clears the password text box and has a string variable that contains several characters, but it doesnt do anything else. The handler for the Clear button resets the text boxes and moves the focus to the first text box.
3. In the handler for the Get Password button, get the value entered by the user and make sure its a number. If it isnt, display an alert dialog box with this message: Please enter a valid number.
4. If the number entered by the user is valid, code a for loop that iterates that number of times. In each iteration of the loop, randomly select one of the characters from the chars variable and concatenate it to the password variable.
5. When the loop is finished, display the password in the password textbox.
HTML
html> <html> <head> <meta charset="UTF-8"> <title>Password Generatortitle> <link rel="stylesheet" href="password.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js">script> <script src="password.js">script> head> <body> <main> <h1>Generate a strong passwordh1> <label for="num">Number of characters:label> <input type="text" id="num"><br> <label for="password">Password:label> <input type="text" id="password" disabled><br> <label> label> <input type="button" id="generate" value="Get Password"> <input type="button" id="clear" value="Clear"><br> main> body> html>
CSS
article, aside, figure, footer, header, main, nav, section { display: block; } body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 500px; border: 3px solid blue; padding: 0 2em 1em; } h1 { color: blue; } label { float: left; width: 11em; text-align: right; padding-bottom: .5em; } input { margin-left: 1em; margin-bottom: .5em; } Javascript
"use strict"; $(document).ready(function() { var getRandomNumber = function(max) { var random; if (!isNaN(max)) { random = Math.random(); //value >= 0.0 and < 1.0 random = Math.floor(random * max); //value is an integer between 0 and max - 1 random = random + 1; //value is an integer between 1 and max } return random; }; $("#generate").click(function() { $("#password").val( "" ); // clear previous entry var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_-+!@"; var password = ""; var start, stop, char; // get password length entered by user var num = parseInt( $("#num").val() ); // validate length if (isNaN(num)) { alert("Please enter a valid number"); } else { // loop number of times entered by user - on each iteration... for (var i = 0; i < num; i++) { // get a random character from the chars string start = getRandomNumber(chars.length); stop = start + 1; char = chars.substring(start, stop); // add the random character to the password string password = password += char; } // display the password string when the loop is done $("#password").val( password ); } }); // end click() $("#clear").click(function() { $("#num").val( "" ); $("#password").val( "" ); $("#num").focus(); }); // end click() // set focus on initial load $("#num").focus(); }); // end ready() Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help