we have a number and a split number and we want to split the number 'split number' of times and all splitted div should take(or add up to) 100% width i.e the splitted divs should be on single row.Also we need to this dynamically.Please help me out on this.
var split_button = document.querySelector(".btn");
split_button.addEventListener("click", myfunc);
function myfunc() {
number = parseInt(document.querySelector("#number").value);
split = parseInt(document.querySelector("#split").value);
var displayDiv = document.getElementById("disp");
displayDiv.innerHTML = "";
if (split > number) {
generateErrorMessage(
"Please enter number of splits less than number itself!"
);
} else if (number > 100 || number < 1) {
generateErrorMessage(
"Please enter number greater than 0 and less than 101"
);
} else if (split == 0) {
generateErrorMessage("Split can't be done null");
} else {
let n = split;
for (var i = 0; i < split; i++) {
if (number % n == 0) {
var divWidth = number / n;
} else {
var divWidth = Math.floor(number / n) + 1;
}
let tag = document.createElement("div");
tag.className = "fill";
var randomcolor = getRandomColor();
tag.style.backgroundColor = randomcolor;
tag.style.width = divWidth + "%";
tag.textContent = divWidth;
displayDiv.appendChild(tag);
number = number - divWidth;
n = n - 1;
}
}
}
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function generateErrorMessage(msg) {
errdiv = document.querySelector(".err-div");
errpara = document.createElement("p");
errpara.textContent = msg;
errdiv.appendChild(errpara);
errdiv.classList.add("err-msgs");
console.log(errdiv);
setTimeout(() => {
errdiv.innerHTML = "";
errdiv.classList.remove("err-msgs");
}, 5000);
}
.container {
background-color: white;
padding-top: 10px;
}
body {
background-color: lightblue;
}
.num {
margin-bottom: 10px;
}
button {
margin-left: 10px;
}
.disp {
background-color: whitesmoke;
}
.fill {
display: inline-block;
background-color: aqua;
/* border: 2px solid black; */
height: 100px;
text-align: center;
color: white;
font-size: 50px;
/* padding: 10px; */
}
.err-msgs {
padding: 20px;
background-color: pink;
}
<div class="container my-5">
<!-- <p>Sorry there was an error</p> -->
<div class="err-div"></div>
<div class="form-group p-2">
<label for="number" class="num">Enter a Number</label>
<input type="number" class="form-control" id="number" />
</div>
<div class="form-group p-2">
<label for="split" class="num"
>Enter number of times you want to split</label
>
<input type="number" class="form-control" id="split" />
</div>
<button class="btn btn-primary my-2">Split</button>
<div id="disp"></div>
</div>
Also same value div should take same amount of width.
instead of giving them percentage values male the parent component a flex and give child component flex:1 then it will automatically adjust width and be responsive too.
You need to add flex to the parent.
#disp {
background-color: whitesmoke;
display: flex;
width:100%;
flex-direction: row;
}
and on the children you can use the css
.fill {
display: flex;
flex-grow: 1;
}
var split_button = document.querySelector(".btn");
split_button.addEventListener("click", myfunc);
function myfunc() {
number = parseInt(document.querySelector("#number").value);
split = parseInt(document.querySelector("#split").value);
var displayDiv = document.getElementById("disp");
displayDiv.innerHTML = "";
if (split > number) {
generateErrorMessage(
"Please enter number of splits less than number itself!"
);
} else if (number > 100 || number < 1) {
generateErrorMessage(
"Please enter number greater than 0 and less than 101"
);
} else if (split == 0) {
generateErrorMessage("Split can't be done null");
} else {
let n = split;
for (var i = 0; i < split; i++) {
if (number % n == 0) {
var divWidth = number / n;
} else {
var divWidth = Math.floor(number / n) + 1;
}
let tag = document.createElement("div");
tag.className = "fill";
var randomcolor = getRandomColor();
tag.style.backgroundColor = randomcolor;
// tag.style.width = divWidth + "%";
tag.textContent = divWidth;
displayDiv.appendChild(tag);
number = number - divWidth;
n = n - 1;
}
}
}
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function generateErrorMessage(msg) {
errdiv = document.querySelector(".err-div");
errpara = document.createElement("p");
errpara.textContent = msg;
errdiv.appendChild(errpara);
errdiv.classList.add("err-msgs");
console.log(errdiv);
setTimeout(() => {
errdiv.innerHTML = "";
errdiv.classList.remove("err-msgs");
}, 5000);
}
.container {
background-color: white;
padding-top: 10px;
}
body {
background-color: lightblue;
}
.num {
margin-bottom: 10px;
}
button {
margin-left: 10px;
}
#disp {
background-color: whitesmoke;
display: flex;
width:100%;
flex-direction: row;
}
.fill {
display: flex;
flex-grow: 1;
background-color: aqua;
/* border: 2px solid black; */
height: 100px;
text-align: center;
color: white;
font-size: 50px;
/* padding: 10px; */
}
.err-msgs {
padding: 20px;
background-color: pink;
}
<div class="container my-5">
<!-- <p>Sorry there was an error</p> -->
<div class="err-div"></div>
<div class="form-group p-2">
<label for="number" class="num">Enter a Number</label>
<input type="number" class="form-control" id="number" />
</div>
<div class="form-group p-2">
<label for="split" class="num"
>Enter number of times you want to split</label
>
<input type="number" class="form-control" id="split" />
</div>
<button class="btn btn-primary my-2">Split</button>
<div id="disp"></div>
</div>
Related
var grid = document.getElementById('grid');
var msg = document.querySelector('.message');
var chooser = document.querySelector('form');
var mark;
var cells;
// add click listener to radio buttons
function setPlayer() {
mark = this.value;
msg.textContent = mark + ', click on a square to make your move!';
chooser.classList.add('game-on');
this.checked = false;
buildGrid();
}
// add click listener to each cell
function playerMove() {
if (this.textContent == '') {
this.textContent = mark;
checkRow();
switchMark();
computerMove();
}
}
// let the computer make the next move
function computerMove() {
var emptyCells = [];
var random;
/* for (var i = 0; i < cells.length; i++) {
if (cells[i].textContent == '') {
emptyCells.push(cells[i]);
}
}*/
cells.forEach(function(cell){
if (cell.textContent == '') {
emptyCells.push(cell);
}
});
// computer marks a random EMPTY cell
random = Math.ceil(Math.random() * emptyCells.length) - 1;
emptyCells[random].textContent = mark;
checkRow();
switchMark();
}
// switch player mark
function switchMark() {
if (mark == 'X') {
mark = 'O';
} else {
mark = 'X';
}
}
// determine a winner
function winner(a, b, c) {
if (a.textContent == mark && b.textContent == mark && c.textContent == mark) {
msg.textContent = mark + ' is the winner!';
a.classList.add('winner');
b.classList.add('winner');
c.classList.add('winner');
return true;
} else {
return false;
}
}
// check cell combinations
function checkRow() {
winner(document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3'));
winner(document.getElementById('c4'), document.getElementById('c5'), document.getElementById('c6'));
winner(document.getElementById('c7'), document.getElementById('c8'), document.getElementById('c9'));
winner(document.getElementById('c1'), document.getElementById('c4'), document.getElementById('c7'));
winner(document.getElementById('c2'), document.getElementById('c5'), document.getElementById('c8'));
winner(document.getElementById('c3'), document.getElementById('c6'), document.getElementById('c9'));
winner(document.getElementById('c1'), document.getElementById('c5'), document.getElementById('c9'));
winner(document.getElementById('c3'), document.getElementById('c5'), document.getElementById('c7'));
}
// clear the grid
function resetGrid() {
mark = 'X';
/* for (var i = 0; i < cells.length; i++) {
cells[i].textContent = '';
cells[i].classList.remove('winner');
}*/
cells.forEach(function(cell){
cell.textContent = '';
cell.classList.remove('winner');
});
msg.textContent = 'Choose your player:';
chooser.classList.remove('game-on');
grid.innerHTML = '';
}
// build the grid
function buildGrid() {
for (var i = 1; i <= 9; i++) {
var cell = document.createElement('li');
cell.id = 'c' + i;
cell.addEventListener('click', playerMove, false);
grid.appendChild(cell);
}
/* cells = document.querySelectorAll('li'); //Returns a NodeList, not an Array
See https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches */
cells = Array.prototype.slice.call(grid.getElementsByTagName('li'));
}
var players = Array.prototype.slice.call(document.querySelectorAll('input[name=player-choice]'));
players.forEach(function(choice){
choice.addEventListener('click', setPlayer, false);
});
var resetButton = chooser.querySelector('button');
resetButton.addEventListener('click', function(e) {
e.preventDefault();
resetGrid();
});
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #996E89;
font-family: "Comfortaa", sans-serif;
}
h1 {
font-family: "Lobster", serif;
}
.message {
color: #fff;
font-size: 1.5em;
padding-bottom: 1em;
}
form {
label {
font-size: 4em;
font-weight: bold;
vertical-align: middle;
}
input[type=radio] {
margin: 1em;
cursor: pointer;
}
fieldset {
display: block;
opacity: 1;
transition: all ease 1s;
}
&.game-on fieldset {
opacity: 0;
display: none;
}
&.game-on button {
opacity: 1;
display: block;
margin: 0 auto;
}
}
#grid-section {
margin: 3em 0;
}
#grid {
width: 300px;
margin: 0 auto;
}
li {
border: 1px solid #000;
width: 100px;
height: 100px;
display: block;
float: left;
font-size: 3em;
text-align: center;
padding: .5em;
}
#c1, #c2, #c3 {
border-top: none;
}
#c3, #c6, #c9 {
border-right: none;
}
#c7, #c8, #c9 {
border-bottom: none;
}
#c1, #c4, #c7 {
border-left: none;
}
.winner {
color: #9AE1E5;
}
.btn-primary,
.btn-primary:focus {
background-color: #33B7A5;
opacity: 0;
outline: 0;
transition: all ease .3s;
}
.btn-primary:hover {
background-color: #4C2F39;
}
<div class="container">
<div class="row text-center" id="intro-section">
<h1>Player vs Computer Tic-Tac-Toe</h1>
<h2 class="message">Choose your player:</h2>
<form action="#">
<fieldset>
<input type="radio" name="player-choice" id="player-choice-1" value="X" />
<label for="player-choice-1">X</label>
<input type="radio" name="player-choice" id="player-choice-2" value="O" />
<label for="player-choice-2">O</label>
</fieldset>
<button id="reset" class="btn btn-primary">Reset</button>
</form>
</div>
<div class="row" id="grid-section">
<ul id="grid"></ul>
</div>
I wish to add a scoreboard on top where wins,loses,draws would be calculated. How do I go about the same? Also an another HTML page where I could see the number of wins, loses, draws.
I have tried adding table in the html and using it in JS but not able to implement the same.
Could you suggest any methods to implement these tasks in the project.
This is my current project: https://output.jsbin.com/zajocom
My code works decently (although yes, it is not the best code - I'm still a beginner). However, with big numbered exponents, the bottom of the green border gets messed up on Chrome. The specific example I have is 9.245 for the number, and -9000000 as the exponent. This is an image of my issue:
Is there any way to fix something like this?
This is my code (when placed in one HTML file):
function addCommas(num) {
return num.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}
function outputNumberForm() {
var numberInput = document.getElementById("numberInput");
var exponentInput = document.getElementById("exponentInput");
var outputId = document.getElementById("output");
var editedNumberInput = numberInput;
var multiplierNumber = (numberInput.value.split('.')[1] || []).length;
var zeroCount = "0";
var multiplierCount = "";
var outputText;
if (exponentInput.value % 1 != 0) {
outputId.style.border = `5px solid red`;
outputId.style.backgroundColor = `white`;
outputId.style.width = `300px`;
outputId.innerHTML = "Please put a whole number as an exponent.";
} else if (numberInput.value * 1000 % 1 != 0) {
outputId.style.border = `5px solid red`;
outputId.style.backgroundColor = `white`;
outputId.style.width = `300px`;
outputId.innerHTML = "The maximum amount of decimals is three digits.";
} else if (Math.floor(Math.abs(numberInput.value / 10)) != 0) {
outputId.style.border = `5px solid red`;
outputId.style.backgroundColor = `white`;
outputId.style.width = `300px`;
outputId.innerHTML = `Please put only a ones digit (Ex: "2.31" instead of "23.1")`;
} else if (exponentInput.value == 0) {
outputId.style.border = `5px solid #1ac729`;
outputId.style.backgroundColor = `white`;
outputId.style.width = `300px`;
outputId.innerHTML = "Your number in regular form is:<br>" + numberInput.value;
} else {
outputId.style.border = `5px solid #1ac729`;
outputId.style.backgroundColor = `white`;
outputId.style.width = `300px`;
outputId.style.wordWrap = `break-word`;
for (let i = 0; i < multiplierNumber; i++) {
multiplierCount = multiplierCount + "0";
}
multiplierCount = "1" + multiplierCount;
editedNumberInput = numberInput.value * multiplierCount;
if (exponentInput.value == -1) {
if (numberInput.value < 0) {
outputId.innerHTML = "Your number in regular form is:<br>" + "-0." + String(Math.abs(editedNumberInput)).replace(/\./g, '');
} else {
outputId.innerHTML = "Your number in regular form is:<br>" + "0." + String(editedNumberInput).replace(/\./g, '');
}
} else if (exponentInput.value < 0) {
for (let i = 2; i < Math.abs(exponentInput.value); i++) {
zeroCount = zeroCount + "0";
}
if (numberInput.value < 0) {
outputId.innerHTML = "Your number in regular form is:<br>" + "-0." + zeroCount + String(Math.abs(editedNumberInput)).replace(/\./g, '');
} else {
outputId.innerHTML = "Your number in regular form is:<br>" + "0." + zeroCount + String(editedNumberInput).replace(/\./g, '');
}
} else if (exponentInput.value - multiplierNumber > 0) {
for (let i = 1; i < (exponentInput.value - multiplierNumber); i++) {
zeroCount = zeroCount + "0";
}
outputId.innerHTML = "Your number in regular aform is:<br>" + addCommas(String(editedNumberInput).replace(/\./g, '') + String(zeroCount));
} else if (exponentInput.value - multiplierNumber < 0) {
outputText = (Math.round((numberInput.value * 10 ** exponentInput.value) * (10 ** Math.abs(exponentInput.value - multiplierNumber)))) / (10 ** Math.abs(exponentInput.value - multiplierNumber));
outputId.innerHTML = "Your number in regular form is:<br>" + outputText;
} else if (exponentInput.value - multiplierNumber == 0) {
outputText = addCommas(String(numberInput.value).replace(/\./g, ''));
outputId.innerHTML = "Your number in regular form is:<br>" + outputText;
}
}
}
* {
box-sizing: border-box;
user-select: none;
}
body {
background-color: #01a50f;
}
h1 {
text-align: center;
color: white;
margin-bottom: 70px;
}
h2 {
color: white;
}
.container {
margin: auto;
width: fit-content;
}
.big-row-container {
display: flex;
flex-direction: column;
}
.row-container {
display: flex;
flex-direction: row;
margin: 20px;
}
#button {
margin: 60px auto 0px auto;
background-color: #03750d;
border: 3px solid white;
border-radius: 5px;
color: white;
cursor: pointer;
display: block;
font-size: 15px;
padding: 5px;
text-align: center;
}
#output {
background-color: none;
padding: 5px;
margin: 20px auto;
border-radius: 15px;
width: 400px;
text-align: center;
user-select: text;
}
#numberInput {
height: fit-content;
width: 100px;
font-size: 20px;
}
#exponentInput {
height: fit-content;
width: 100px;
font-size: 20px;
}
.label-description {
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Scientific Notation Converter</title>
</head>
<body>
<h1>Scientific Notation Converter</h1>
<div class="container">
<h2 style="text-align: center;">Express scientific notation in regular number form.</h2>
<div class="big-row-container">
<div class="row-container">
<label class="label-description" for="numberInput">Input number (Ex: "2.31" from 2.31 x 10<sup>7</sup>): </label>
<input type="number" step="1" id="numberInput" name="numberInput">
</div>
<div class="row-container">
<label class="label-description" for="exponentInput">Input exponent (Ex: "7" from 2.31 x 10<sup>7</sup>): </label>
<input type="number" step="1" id="exponentInput" name="exponentInput">
</div>
</div>
</div>
<button id="button" onclick="outputNumberForm()">Calculate</button>
<p id="output"></p>
</body>
</html>
I am making a typing program. Each letter is in its own div, which is broken into words.
For example, the word other would be written as:
<div class="word">
<div class="letter" id="l184"></div>
<div class="letter" id="l185">o</div>
<div class="letter" id="l186">t</div>
<div class="letter" id="l187">h</div>
<div class="letter" id="l188">e</div>
<div class="letter" id="l189">r</div>
</div>
The letter with the cursor before it also has the class cursor.
.cursor:before {
position: absolute;
width: 2px;
height: 30px;
background: var(--accent);
content: ' ';
}
Sometimes, when typing the first word of a line, the completed part of the word, which has the cursor after it, is bumped up to the line before it. This does not happen when the :before has no content. Please help me figure out why something with position: absolute is moving elements around. Thank you!
EDIT: Snippet
EDIT 2: The glitch only works with a certain combination of words, so if you cannot reproduce the glitch, please try again.
let dict = ['test', 'stack', 'overflow'];
let index = 0, words, wrong = 0, last;
let running;
let sec = 0, min = 0;
const text = document.querySelector('#text');
const st = document.querySelector('#sec');
const mt = document.querySelector('#min');
function genTest() {
words = "";
for (let i = 0; i < 100; i++) {
words += dict[randomRange(0, 2)];
if (i !== 99) words += " ";
}
let html = `<div class='word'>`;
let i = 0;
words.split('').forEach(l => {
if (l === ' ') html += `</div><div class="word">`;
if (i === 0) html += `<div class="letter curs-fade" id='l${i}'>${l}</div>`;
else html += `<div class="letter" id='l${i}'>${l}</div>`;
i++;
});
last = i;
html += '</div>'
text.innerHTML = html;
}
function initTest() {
running = false;
genTest();
st.classList = "";
mt.classList = "";
l(0).classList.add('cursor');
}
function start() {
running = true;
st.classList.add('txt-active');
setInterval(() => {
sec++;
if (sec >= 60) {
sec %= 60;
min++;
if (min === 1) {
mt.classList.add('txt-active');
}
}
mt.innerHTML = min.toString() + ':';
st.innerHTML = ((sec < 10) ? '0' : '') + sec.toString();
}, 1000);
}
document.addEventListener('keydown', (e) => {
let key = e.key;
const cl = l(index);
if (wrong > 0 && key === 'Backspace') {
wrong--;
w(wrong).remove();
return;
}
if (key.match(/^[a-zA-Z"'\s]+$/) && key.length === 1) {
if (index === 0 && !running) {
start();
}
if (cl.innerHTML === key.toLowerCase() && wrong === 0) {
cl.classList.add('correct');
index++;
} else if (key !== ' ') {
let w = document.createElement('DIV');
w.classList.add('letter');
w.classList.add('incorrect');
w.id = "w" + wrong;
w.innerHTML = key;
wrong++;
if (index > 0) l(index - 1).appendChild(w);
else {
let n = l(index);
n.parentNode.insertBefore(w, n);
}
}
cl.classList.remove('cursor');
l(index).classList.add('cursor');
}
});
function l(index) {
return document.getElementById('l' + index);
}
function w(index) {
return document.getElementById('w' + index);
}
function randomRange(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
initTest();
#import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
* {
font-family: 'Roboto Mono', monospace;
}
body, html {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: #0f0f0f;
--accent: yellow;
--gray: #ababab;
--dark-gray: #8f8f8f;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.header {
margin: 10px 150px;
}
.title {
font-size: 50px;
font-weight: 200;
color: white;
}
#text {
color: var(--gray);
margin: 20px 150px;
text-align: left;
}
.timer {
color: var(--dark-gray);
font-size: 50px;
font-weight: 300;
text-align: center;
margin: 100px 0 0;
}
.txt-active {
color: white;
transition: color .7s ease;
}
#min, #sec {
display: inline;
}
.word {
display: inline;
}
.letter {
display: inline;
font-weight: 200;
font-size: 24px;
}
.correct {
color: white;
}
.incorrect {
color: #d26f6f;
}
.cursor:before {
position: absolute;
width: 2px;
height: 30px;
background: var(--accent);
content: ' ';
}
.curs-fade:before {
animation: cursor-fade alternate-reverse .8s infinite;
}
#keyframes cursor-fade {
80% {opacity: 1}
0% {opacity: 0}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/style.css">
<title>Typeracer++</title>
</head>
<body>
<div class="header">
<div class="title">typeracer++</div>
</div>
<div class="test">
<div class="timer"><div id="min">0:</div><div id="sec">00</div></div>
<div id="text"></div>
</div>
<script type="text/javascript" src="scripts/game.js"></script>
</body>
</html>
Can you help me find out why my code isn't working?
I have to chceck if password is
a)4-6 characters long (one or more numbers must be included) for password to be medium
b)7 and more characters (one or more numbers must be included) for strong. c)Anything else than a) and b) is weak.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<p>
<input type="password" id="password" />
<button onlick="spr()">check</button>
</p>
</form>
<div id="result"></div>
<script>
function spr()
{
var str = document.getElementById("password");
var medium = /^[A-Za-z0-9]{4,6}$/;
var strong = /^[A-Za-z0-9]{7,}$/;
if(medium.test(str))
document.getElementById("result").innerHTML="medium";
else if(silne.test(str))
document.getElementById("result").innerHTML="strong";
else
document.getElementById("result").innerHTML="weak";
return false;
}
</script>
</body>
</html>
follow this https://jsfiddle.net/umesh1990/hxjf74cz/35/#
i have done this using javascript
function password_validate(txt) {
var val1 = 0;
var val2 = 0;
var val3 = 0;
var val4 = 0;
var val5 = 0;
var counter, color, result;
var flag = false;
if (txt.value.length <= 0) {
counter = 0;
color = "transparent";
result = "";
}
if (txt.value.length < 8 & txt.value.length > 0) {
counter = 20;
color = "red";
result = "Short";
} else {
document.getElementById(txt.id + "error").innerHTML = " ";
txt.style.borderColor = "grey";
var regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
// document.getElementById("pass_veri").style.display="block";
var fletter = /[a-z]/;
if (fletter.test(txt.value)) {
val1 = 20;
} else {
val1 = 0;
}
//macth special character
var special_char = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
if (special_char.test(txt.value)) {
val2 = 30;
} else {
val = 0;
}
/*capital_letter*/
var cap_lett = /[A-Z]/;
if (cap_lett.test(txt.value)) {
val3 = 20;
} else {
val = 0;
}
/*one numeric*/
var num = /[0-9]/;
if (num.test(txt.value)) {
val4 = 20;
} else {
val4 = 0;
}
/* 8-15 character*/
var range = /^.{8,50}$/;
if (range.test(txt.value)) {
val5 = 10;
} else {
val5 = 0;
}
counter = val1 + val2 + val3 + val4 + val5;
if (counter >= 30) {
color = "skyblue";
result = "Fair";
}
if (counter >= 50) {
color = "gold";
result = "Good";
}
if (counter >= 80) {
color = "green";
result = "Strong";
}
if (counter >= 90) {
color = "green";
result = "Very Strong";
}
}
document.getElementById("prog").style.width = counter + "%";
document.getElementById("prog").style.backgroundColor = color;
document.getElementById("result").innerHTML = result;
document.getElementById("result").style.color = color;
}
body {
font-family: 'Rajdhani', sans-serif;
background-color: #E4E4E4;
}
/* tooltip*/
.hint {
width: 258px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: absolute;
left: 0px;
border: 1px solid #CC9933;
background-color: #FFFFCC;
display: none;
padding: 20px;
font-size: 11px;
}
.hint:before {
content: "";
position: absolute;
left: 100%;
top: 24px;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 1px solid transparent;
border-left: 22px solid #CC9933;
}
.hint:after {
content: "";
position: absolute;
left: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 1px solid transparent;
border-left: 20px solid #FFFFCC;
}
.parent {
position: relative;
}
.progress {
height: 7px;
}
#progres {
display: block;
}
p {
margin: 0px;
font-weight: normal;
}
.form-control {
width: none;
margin-left: 260px;
margin-top: 25px;
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-lg-12 parent ">
<label class="hint" id="pass-hint">
Password Strength:<span id="result"></span>
<br>
<div class="progress" id="progres">
<div class="progress-bar progress-bar-danger" role="progressbar" id="prog">
</div>
</div>
<p> passowrd must have atleast 8 charatcer</p>
</label>
<input type="password" class="form-control" data-toggle="tooltip" data-placement="left" id="pass" onfocus="document.getElementById('pass-hint').style.display='block'" onblur="document.getElementById('pass-hint').style.display='none'" placeholder="**********"
oninput="password_validate(this);document.getElementById('progres').style.display='block';">
<i class=" form-control-feedback" id="passsuccess" aria-hidden="true"></i>
<span id="passerror" class="help-block error"></span>
</div>
it may help you
I'm looking for a simple Password Strength Visualizer (like gmail's when you create a new account). I want to show the user how good their password is visually.
Does anyone have some source code they'd like to share? :)
i found this https://jsfiddle.net/umesh1990/hxjf74cz/35/# i have implement using javascript
function password_validate(txt) {
var val1 = 0;
var val2 = 0;
var val3 = 0;
var val4 = 0;
var val5 = 0;
var counter, color, result;
var flag = false;
if (txt.value.length <= 0) {
counter = 0;
color = "transparent";
result = "";
}
if (txt.value.length < 8 & txt.value.length > 0) {
counter = 20;
color = "red";
result = "Short";
} else {
document.getElementById(txt.id + "error").innerHTML = " ";
txt.style.borderColor = "grey";
var regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
// document.getElementById("pass_veri").style.display="block";
var fletter = /[a-z]/;
if (fletter.test(txt.value)) {
val1 = 20;
} else {
val1 = 0;
}
//macth special character
var special_char = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
if (special_char.test(txt.value)) {
val2 = 30;
} else {
val = 0;
}
/*capital_letter*/
var cap_lett = /[A-Z]/;
if (cap_lett.test(txt.value)) {
val3 = 20;
} else {
val = 0;
}
/*one numeric*/
var num = /[0-9]/;
if (num.test(txt.value)) {
val4 = 20;
} else {
val4 = 0;
}
/* 8-15 character*/
var range = /^.{8,50}$/;
if (range.test(txt.value)) {
val5 = 10;
} else {
val5 = 0;
}
counter = val1 + val2 + val3 + val4 + val5;
if (counter >= 30) {
color = "skyblue";
result = "Fair";
}
if (counter >= 50) {
color = "gold";
result = "Good";
}
if (counter >= 80) {
color = "green";
result = "Strong";
}
if (counter >= 90) {
color = "green";
result = "Very Strong";
}
}
document.getElementById("prog").style.width = counter + "%";
document.getElementById("prog").style.backgroundColor = color;
document.getElementById("result").innerHTML = result;
document.getElementById("result").style.color = color;
}
body {
font-family: 'Rajdhani', sans-serif;
background-color: #E4E4E4;
}
/* tooltip*/
.hint {
width: 258px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: absolute;
left: 0px;
border: 1px solid #CC9933;
background-color: #FFFFCC;
display: none;
padding: 20px;
font-size: 11px;
}
.hint:before {
content: "";
position: absolute;
left: 100%;
top: 24px;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 1px solid transparent;
border-left: 22px solid #CC9933;
}
.hint:after {
content: "";
position: absolute;
left: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 1px solid transparent;
border-left: 20px solid #FFFFCC;
}
.parent {
position: relative;
}
.progress {
height: 7px;
}
#progres {
display: block;
}
p {
margin: 0px;
font-weight: normal;
}
.form-control {
width: none;
margin-left: 260px;
margin-top: 25px;
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12 parent ">
<label class="hint" id="pass-hint">
Password Strength:<span id="result"></span>
<br>
<div class="progress" id="progres">
<div class="progress-bar progress-bar-danger" role="progressbar" id="prog">
</div>
</div>
<p> passowrd must have atleast 8 charatcer</p>
</label>
<input type="password" class="form-control" data-toggle="tooltip" data-placement="left" id="pass" onfocus="document.getElementById('pass-hint').style.display='block'" onblur="document.getElementById('pass-hint').style.display='none'" placeholder="**********"
oninput="password_validate(this);document.getElementById('progres').style.display='block';">
<i class=" form-control-feedback" id="passsuccess" aria-hidden="true"></i>
<span id="passerror" class="help-block error"></span>
</div>
Choose the one you like most:
10 Password Strength Meter Scripts For A Better Registration Interface
Drupal has one built into Drupal 6. The code for the backport to Drupal 5 may be of use to you.
This one seems great: http://www.geekwisdom.com/dyn/passwdmeter.
Depending on the password score, you can show a green, yellow or red marker, or whatever you want.