I want to improve my Password Generator. I want that the user can choose what the password should include. For example you can choose that the password has letters but no numbers and characters. Can someone say me what i have to do?
here is my javascript and html:-
function randomPassword(length) {
var chars = "abcdefghijklmnopqrstuvwxyz!##$%^&*()-+<>ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
var pass = " ";
for (var x = 0; x < length; x++) {
var i = Math.floor(Math.random() * chars.length);
pass += chars.charAt(i);
}
return pass;
}
function generate() {
myform.row_password.value = randomPassword(myform.length.value);
}
<form name="myform" method="post" class="form-horizontal">
<div class="form-group " >
<div class="col-sm-10">
<br>
<input class="rowpassword" type="text" name="row_password" size="45s">
<br>
<input class="form-control passwordlength" type="text" name="length" value="8" > password length
<br>
<br>
<input type="checkbox"> Groß - und Kleinbuchstaben
<br>
<input type="checkbox"> numbers
<br>
<input type="checkbox"> specialcharacters
<br>
<br>
<input type="button" class="form-control button" value="Passwort generieren" onClick="generate();" tabindex="2">
</div>
</div>
</form>
Firstly, check for the checked property for the checkboxs.
Then you can decide whether to have more than one pool of characters, or to apply filters which depend on what is checked.
For the former, you can add the appropriate pools together, so something along the lines of
var chars ="";
var letterPool= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var specialPool="!##$%^&*()-+<>"
var numberPool="1234567890"
if(characterType.checked)
{
chars+=characterTypePool;
}
etc.
If you do this, don't forget to have error handling for when none are selected.
UPDATE:
I've added a snippet (minus error handling) to demonstrate (don't forget to check the boxes!)
function randomPassword(length) {
var chars ="";
var letterPool= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var specialPool="!##$%^&*()-+<>";
var numberPool="1234567890";
if(document.getElementById('letters').checked)
{
chars+=letterPool;
}
if(document.getElementById('numbers').checked)
{
chars+=numberPool;
}
if(document.getElementById('speChars').checked)
{
chars+=specialPool;
}
var pass = " ";
for (var x = 0; x < length; x++) {
var i = Math.floor(Math.random() * chars.length);
pass += chars.charAt(i);
}
return pass;
}
function generate() {
myform.row_password.value = randomPassword(myform.length.value);
}
<form name="myform" method="post" class="form-horizontal">
<div class="form-group " >
<div class="col-sm-10">
<br>
<input class="rowpassword" type="text" name="row_password" size="45s">
<br>
<input class="form-control passwordlength" type="text" name="length" value="8" > password length
<br>
<br>
<input type="checkbox" id='letters'> Groß - und Kleinbuchstaben
<br>
<input type="checkbox" id='numbers'> numbers
<br>
<input type="checkbox" id='speChars'> specialcharacters
<br>
<br>
<input type="button" class="form-control button" value="Passwort generieren" onClick="generate();" tabindex="2">
</div>
</div>
</form>
UPDATE TWO:
To guarantee that there will be at least one of each selected character type, you would need to add code. one way is to choose one at the start, and to add it to a random position in the final password. The following adaptation of the code does so by using an array and splice:
function randomPassword(length) {
var chars ="";
var letterPool= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var specialPool="!##$%^&*()-+<>";
var numberPool="1234567890";
var guaranteed="";
if(document.getElementById('letters').checked)
{
chars+=letterPool;
guaranteed+=letterPool.charAt(Math.floor(Math.random() * letterPool.length));
}
if(document.getElementById('numbers').checked)
{
chars+=numberPool;
guaranteed+=numberPool.charAt(Math.floor(Math.random() * numberPool.length));
}
if(document.getElementById('speChars').checked)
{
chars+=specialPool;
guaranteed+=specialPool.charAt(Math.floor(Math.random() * specialPool.length));
}
var pass =[];
for (var x = 0,len=length-guaranteed.length; x < len; x++) {
var i = Math.floor(Math.random() * chars.length);
pass.push(chars.charAt(i));
}
for(var x = 0,len=guaranteed.length; x < len; x++)
pass.splice(Math.floor(Math.random() * pass.length),0,guaranteed.charAt(x));
pass=pass.join('');
return pass;
}
function generate() {
myform.row_password.value = randomPassword(myform.length.value);
}
Related
I'm having trouble permuting the values.
<head>
<link rel="stylesheet" type="text/css" href="PinStyle.css"/>
</head>
<body onload="startTime()">
<h1><div id="txt"></div></h1>
<br>
<h1>Pin Algorithm</h1>
<div class="container"
<form action="/action_page.php">
<input type="text" name="message" id="myInput1" value="" maxlength="1">
<input type="text" name="message" id="myInput2" value="" maxlength="1">
<input type="text" name="message" id="myInput3" value="" maxlength="1">
<input type="text" name="message" id="myInput4" value="" maxlength="1"><br><br>
<input id="demo" type="button" value="Permutation" onclick="permute()" /><br/>
</form>
<p id="demo"></p>
These are my textbox inputs
var test1 = "test1";
test1 = document.getElementById("myInput1").value;
var test2 = "test2";
test2 = document.getElementById("myInput2").value;
var test3 = "test3";
test3 = document.getElementById("myInput3").value;
var test4 = "test4";
test4 = document.getElementById("myInput4").value;
var permArr = [],
usedChars = [];
function permute(test1,test2,test3,test4) {
var i, ch;
input=[test1,test2,test3,test4]
for (i = 0; i < input.length; i++) {
ch = input.splice(i, 1)[0];
usedChars.push(ch);
if (input.length == 0) {
permArr.push(usedChars.slice());
}
permute(input);
input.splice(i, 0, ch);
usedChars.pop();
}
return permArr
};
document.write(JSON.stringify(permute(var test1,test2,test3,test4)));
var combinations = permute(input);
document.getElementById("demo").innerHTML = combinations;
</script>
</div>
</body>
This is code to permute values typed into a text-box, I am having trouble getting javascript to read the values, find all combinations, and display the results.
Here it is. I adapted the perm() function, which does the actual permutation, from the accepted answer to this question.
<form action="/action_page.php">
<input type="text" name="message" id="myInput1" value="5" maxlength="1" size="1">
<input type="text" name="message" id="myInput2" value="9" maxlength="1" size="1">
<input type="text" name="message" id="myInput3" value="6" maxlength="1" size="1">
<input type="text" name="message" id="myInput4" value="2" maxlength="1" size="1">
<input type="button" value="Permutation" onclick="permute()" />
</form>
<p id="demo"></p>
<script>
function permute() {
// Create an array with the values of all inputs
const ar = [document.getElementById("myInput1").value,
document.getElementById("myInput2").value,
document.getElementById("myInput3").value,
document.getElementById("myInput4").value];
// Get array of permutations
const permutations = perm(ar);
// Convert array to string before printing it
document.getElementById("demo").innerHTML = JSON.stringify(permutations);
}
function perm(ar) {
let ret = [];
for (let i = 0; i < ar.length; i = i + 1) {
let rest = perm(ar.slice(0, i).concat(ar.slice(i + 1)));
if(rest.length) {
for(let j = 0; j < rest.length; j = j + 1) {
ret.push([ar[i]].concat(rest[j]))
}
} else {
ret.push([ar[i]]);
}
}
return ret;
}
</script>
I have been trying to get the values from the textView box but it's not displaying in the p field at all, and also I am trying to add the 2 values together into one value and display it.
function() {
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + x.elements[i].value;
}
document.getElementById("demo").innerHTML = text;
}
<h2>Finding HTML Elements Using document.forms</h2>
<form id="frm1" action="/action_page.php">
First name: <input type="text" name="fname" value="123"><br>
Last name: <input type="text" name="lname" value="123"><br><br>
<input type="submit" value="Submit">
</form>
<p id="demo"></p>
You need to call the function on the document load. And make these changes inside the function
var myValue = 0;
for (i = 0; i < x.length; i++) {
if (x.elements[i].type === "text")
myValue += Number(x.elements[i].value);
}
document.getElementById("demo").innerHTML = myValue;
Try this. In your code.
document.getElementById("demo").innerHTML =
myfunction(document.forms["frm1"]);
should be called outside the function. Also, you should include a name for the function you've created.
function myfunction(input) {
var text = "";
for (var i = 0; i < input.length; i++) {
text += input[i].value;
}
return text;
}
document.getElementById("demo").innerHTML = myfunction(document.forms["frm1"]);
<h2>Finding HTML Elements Using document.forms</h2>
<form id="frm1" action="/action_page.php">
<label>First name:</label> <input type="text" name="fname" value="123" /><br>
<label>Last name:</label> <input type="text" name="lname" value="123" /><br><br>
<input type="submit"/>
</form>
<p id="demo"></p>
I am so lost as to why this is not working properly, as it is on similar previous code. This is for field personnel, a cheat Sheet to simply enter values and get a fast answer (calculation). They enter the value of Num5/6/7 code multiplies 3 values one hidden then adds the last value together and upon click button the result is shown.
Here is my code (taken from copy/paste of a working conversion).
<div class="containerHydro">
<p>
<label >Fluid Column Length</label>
<input type="number" id="num5">
<label >Fluid Weight</label>
<input type="number" id="num6">
<label >Well Head Pressure</label>
<input type="number" id="num7">
<p>
<input type="button" value="Sum" onclick="calculate()"/>
</p>
<p id="total1"></p>
</div>
The Function also copy/paste of multiply two int then divide by hidden (which works BTW)
function calculate() {
var numFive = document.getElementById('num5').value;
var numSix = document.getElementById('num6').value;
var numSvn = document.getElementById('num7').value;
var total1 = parseInt(numFive) * parseInt(numSix) * 0.052 + parseInt('numSvn');
var p =document.getElementById('total1');
p.innerHTML += total1;
}
Here is the same idea which works fine-
Code-
<div class="container7">
<p>
<label id="H2S Percent">H2S Percentage</label>
<input id="num3" type="number" name="num3" placeholder="H2S Percent">
<label id="H2S Percent">WHP</label>
<input id="num4" type="number" name="num4"placeholder="Well Head Pressure" > <br>
</p>
<input type="button" value="H2S Partial Pressure" onclick="math()"/>
<p id="result"></p>
</div>
Function
function math() {
var numThree = document.getElementById('num3').value;
var numFour = document.getElementById('num4').value;
var result = parseInt(numThree) * parseInt(numFour) / 1000000;
var p = document.getElementById('result');
p.innerHTML += result;
}
function calculate() {
var numFive = document.getElementById('num5').value;
var numSix = document.getElementById('num6').value;
var numSvn = document.getElementById('num7').value;
var total1 = parseInt(numFive) * parseInt(numSix) * 0.052 + parseInt(numSvn);
var p = document.getElementById('total1');
p.innerHTML += total1;
}
input {
display: block;
}
<div class="containerHydro">
<p>
<label>Fluid Column Length</label>
<input type="number" id="num5">
<label>Fluid Weight</label>
<input type="number" id="num6">
<label>Well Head Pressure</label>
<input type="number" id="num7">
<p>
<input type="button" value="Sum" onclick="calculate()" />
</p>
<p id="total1"></p>
</div>
I am having a problem with the array of an array. I need the function clickMe() to allow me to output an array such as [[1,1,1,1,1],[2,2,2,2,2],etc].
My problem is that right now the values come up as [1,1,1,1,1,2,2,2,2,2,etc]. I know a for loop inside a for loop would be the best way for this, but how would I get the inputs in sections of five?
Once I can figure this out, I should be able to pull from those arrays without any issues. I would prefer to keep this completely in Javascript.
var qNumber;
function onEnter() {
var qNumber = document.getElementsByName("numberBox")[0].value;
if(event.keyCode == 13) {
if (typeof(Storage) !== "undefined") {
localStorage.setItem("qNumber", qNumber);
console.log(qNumber + " stored successfully");
} else {
console.log("Sorry, your browser does not support Web Storage...");
}
var qID = document.getElementById("numBox");
var submitBtn = document.getElementById("submitButton");
var a = qNumber - 1;
var b = 0;
while (b < a) {
var formClone = document.getElementsByClassName("formBox")[0];
var listClone = formClone.cloneNode(true);
var text =b+2;
document.getElementById("forms").append(listClone);
b++;
}
return qID.parentNode.removeChild(qID);
}
return qNumber;
}
function clickMe() {
var q = localStorage.getItem("qNumber");
console.log(q);
var inputNow = [];
var allInputs = [];
var eachArray = [];
var inputNow = document.getElementsByTagName("input");
for(x=0; x < inputNow.length; x++) {
allInputs.push(inputNow[x].value);
console.log(allInputs);
}
localStorage.clear();
}
input{
display: block;
}
<div id="forms">
<span id="numBox">
<label for="numberBox">Number of Forms</label>
<input type="number" name="numberBox" onkeydown="onEnter()" />
</span>
<form id="formBox" name="formBox" action="#" onsubmit="return false;">
<label for="info1">Input 1:</label>
<input type="text" name="info1" />
<label for="info2">Input 2:
</label>
<input type="text" name="info2" />
<label for="info3">Input 3:
</label>
<input type="text" name="info3" />
<label for="info4">Input 4:
</label>
<input type="text" name="info4" />
<label for="info5">Input 5:
</label>
<input type="text" name="info5" />
</form>
</div>
<input type="submit" value="Submit" id="submitButton" onclick="clickMe()" />
<div id="content">
<span id="info1">input1</span>
<br/>
<span id="info2">input2</span>
<br/>
<span id="info3">input3</span>
<br/>
<span id="info4">input4</span>
<br/>
<span id="info5">input5</span>
</div>
You can always do something like:
var allInputs = [];
var groupInputs = [];
for (x=0; x < inputNow.length; x++) {
groupInputs.push(inputNow[x].value);
if (groupInputs.length === 5 || x === inputNow.length - 1) {
allInputs.push(groupInputs);
groupInputs = [];
}
}
I want to get a number from a form-control type = "number", compare it, and then if OK with the condition, perform multiplication, and division on it. After that I want to display the result as the contents of a <p> tag. How to accomplish this?
Here is what I have tried so far:
let amount = document.getElementById(".amount");
let marginAmount = document.getElementById(".marginAmount")
let submit = document.getElementById(".submit");
submit.addEventListener('click', calcAmount);
const calcLevel1 = amount * 7 / 100;
function calcAmount() {
let userAmount = Number(amount.value);
let level1 = 351;
if (userAmount <= level1) {
marginAmount.textContent = calcLevel1.value;
}
}
<div class="form">
<label for="points amount">Entrez un montant en points</label>
<input type="number" class="amount-enter" id="amount">
<input type="submit" value="Montant marge additionnelle" id="submit" class="submit-enter">
</div>
<p id="marginAmount" class="enter-margin"></p>
Here is the code corrected, there are. Which are to be deleted
I also added math.round to get rounded result:
<html>
<head>
<script>
function calcAmount() {
let userAmount = document.getElementById("amount").value;
let level1 = 351;
if (userAmount <= level1) {
document.getElementById("marginAmount").textContent = Math.round(userAmount * 7) / 100;
} else {
document.getElementById("marginAmount").textContent = "Amount is > 351";
}
}
</script>
</head>
<body>
<div class="form">
<label for="points amount">Entrez un montant en points</label>
<input type="number" class="amount-enter" id="amount">
<input type="submit" value="Montant marge additionnelle" id="submit" class="submit-enter" onclick="calcAmount()">
</div>
<p id="marginAmount" class="enter-margin"></p>
</body>
Three things:
You had . in your ID selectors, these shouldn't be there (they should be # but only in a querySelector method).
You were calculating calcLevel1 straightaway, which meant it was 0 * 7 / 100 which is 0.
You needed to calculate calcLevel1 with amount.value, which means you can remove calcLevel1.value when you're setting the textContent of the paragraph.
I also added an else statement so the textContent is emptied when the statement is false.
let amount = document.getElementById("amount");
let marginAmount = document.getElementById("marginAmount")
let submit = document.getElementById("submit");
submit.addEventListener('click', calcAmount);
function calcAmount() {
const calcLevel1 = amount.value * 7 / 100;
let userAmount = Number(amount.value);
let level1 = 351;
if (userAmount <= level1) {
marginAmount.textContent = calcLevel1;
} else {
marginAmount.textConten = "";
}
}
<div class="form">
<label for="points amount">Entrez un montant en points</label>
<input type="number" class="amount-enter" id="amount">
<input type="submit" value="Montant marge additionnelle" id="submit" class="submit-enter">
</div>
<p id="marginAmount" class="enter-margin"></p>