We Keep Coding

Keep Lines Containing

I am creating a "Keep Lines containing" project. I almost completed this task. But "Search Lines for" is working only 1 line. Multiple "Search
Lines for" is not working. I need "Search Lines for" in multiple lines.
All used HTML, CSS & javascript codes are here
I created a Codepen page for it. Please check : https://codepen.io/coderco/pen/LYGQyqr
function loadfile(fileid, loadid) {
document.getElementById(loadid).value = 'Loading...';
setTimeout(function() {
loadfile2(fileid, loadid)
}, 1000);
}
function loadfile2(fileid, loadid) {
if (!window.FileReader) {
document.getElementById(loadid).value = 'Your browser does not support HTML5 "FileReader" function required to open a file.';
} else {
fileis = document.getElementById(fileid).files[0];
var fileredr = new FileReader();
fileredr.onload = function(fle) {
var filecont = fle.target.result;
document.getElementById(loadid).value = filecont;
}
fileredr.readAsText(fileis);
}
}
function savefile(saveasid, saveid) {
if (!window.Blob) {
alert('Your browser does not support HTML5 "Blob" function required to save a file.');
} else {
var txtwrt = document.getElementById(saveid).value;
if (document.getElementById('dos').checked == true) txtwrt = txtwrt.replace(/\n/g, '\r\n');
var textblob = new Blob([txtwrt], {
type: 'text/plain'
});
var saveas = document.getElementById(saveasid).value;
var dwnlnk = document.createElement('a');
dwnlnk.download = saveas;
dwnlnk.innerHTML = "Download File";
if (window.webkitURL != null) {
dwnlnk.href = window.webkitURL.createObjectURL(textblob);
} else {
dwnlnk.href = window.URL.createObjectURL(textblob);
dwnlnk.onclick = destce;
dwnlnk.style.display = 'none';
document.body.appendChild(dwnlnk);
}
dwnlnk.click();
}
}
function destce(event) {
document.body.removeChild(event.target);
}
function cleartext() {
document.getElementById('input_output').value = '';
document.getElementById('removed').innerHTML = '';
document.getElementById('removed_box').value = '';
}
function SelectAll(id) {
document.getElementById(id).focus();
document.getElementById(id).select();
}
var fieldnum = 0;
var fieldtype = '';
var cacherem = 'no';
var enableregex = 'no';
function makeregexp() {
var regexpoutarr = new Array();
for (var x = 0; x < (fieldnum + 1); x++) {
regexpoutarr[x] = document.getElementById('addfield' + x).value.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
}
var regexpout = '';
if (fieldtype == 'AND') regexpout = '((?=.*' + regexpoutarr.join(')(?=.*') + ').*)';
if (fieldtype == 'OR') regexpout = '(' + regexpoutarr.join('|') + ')';
if (fieldtype == '') regexpout = document.getElementById('addfield0').value.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1');
return regexpout;
}
function removelines(whatlines) {
var textin = document.getElementById('input_output').value.replace(/\r/g, '');
var toremove = makeregexp();
var textinarr = textin.split('\n');
var textinarrcnt = textinarr.length;
var textoutarr = new Array();
var textoutarrcnt = 0;
var linesremovedcnt = 0;
var casen = 'i';
if (document.getElementById('case_sen').checked == true) casen = '';
if (enableregex == 'yes') toremove = document.getElementById('addfield0').value;
else toremove = makeregexp();
var killfun = 'no';
try {
var toremoveregx = new RegExp(toremove, casen);
} catch (err) {
alert('Something is incorrect (' + err + ') within your regular expression.\nBe sure special characters .*+?^=!:${}()|\\ used as literals have been escaped with a backslash.');
killfun = 'yes';
}
if (killfun == 'no') {
if (whatlines == 'containing' && cacherem == 'no') {
for (var x = 0; x < textinarrcnt; x++) {
if (toremoveregx.test(textinarr[x]) == false) {
textoutarr[textoutarrcnt] = textinarr[x];
textoutarrcnt++;
} else linesremovedcnt++;
}
}
if (whatlines == 'notcontaining' && cacherem == 'no') {
for (var x = 0; x < textinarrcnt; x++) {
if (toremoveregx.test(textinarr[x]) == true) {
textoutarr[textoutarrcnt] = textinarr[x];
textoutarrcnt++;
} else linesremovedcnt++;
}
}
var removedcachearr = new Array();
if (whatlines == 'containing' && cacherem == 'yes') {
for (var x = 0; x < textinarrcnt; x++) {
if (toremoveregx.test(textinarr[x]) == false) {
textoutarr[textoutarrcnt] = textinarr[x];
textoutarrcnt++;
} else {
removedcachearr[linesremovedcnt] = textinarr[x];
linesremovedcnt++;
}
}
}
if (whatlines == 'notcontaining' && cacherem == 'yes') {
for (var x = 0; x < textinarrcnt; x++) {
if (toremoveregx.test(textinarr[x]) == true) {
textoutarr[textoutarrcnt] = textinarr[x];
textoutarrcnt++;
} else {
removedcachearr[linesremovedcnt] = textinarr[x];
linesremovedcnt++;
}
}
}
var textout = textoutarr.join('\n');
document.getElementById('input_output').value = textout;
if (cacherem == 'yes') {
var removedcache = removedcachearr.join('\n');
document.getElementById('removed_box').value = removedcache;
}
document.getElementById('removed').innerHTML = '' + linesremovedcnt + ' removed / ' + textoutarrcnt + ' remain.';
}
}
function addfield(field) {
if (field == 'reset') {
document.getElementById('inputfields').innerHTML = '<input type="text" id="addfield0" value="" style="width:100%;" />'
document.getElementById('andbttn').style.display = 'inline-block';
document.getElementById('orbttn').style.display = 'inline-block';
fieldnum = 0;
fieldtype = '';
} else {
fieldnum++;
if (fieldnum == 1) {
if (field == 'andfield') {
document.getElementById('orbttn').style.display = 'none';
fieldtype = 'AND';
} else {
fieldtype = 'OR';
document.getElementById('andbttn').style.display = 'none';
}
}
var newfield = fieldtype + '<input type="text" id="addfield' + fieldnum + '" value="" style="width:100%;" />';
var newdiv = document.createElement('div');
newdiv.innerHTML = newfield;
document.getElementById('inputfields').appendChild(newdiv);
}
resizepage();
}
function disrem() {
var chkedstate = document.getElementById('dremoved').checked;
if (chkedstate == true) {
document.getElementById('removed_box').style.display = 'inline-block';
cacherem = 'yes';
} else {
cacherem = 'no';
document.getElementById('removed_box').value = '';
document.getElementById('removed_box').style.display = 'none';
}
resizepage();
}
function selectele(eleid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(eleid));
range.select();
} else {
var range = document.createRange();
range.selectNode(document.getElementById(eleid));
window.getSelection().addRange(range);
}
}
function regexsrch() {
var chkedstate = document.getElementById('regex_srch').checked;
if (chkedstate == true) {
addfield('reset');
enableregex = 'yes';
document.getElementById('addfielddiv').innerHTML =
'<div style="padding:3px 0px 3px 0px;"><input type="checkbox" id="regex_srch" onclick="regexsrch();" CHECKED />Enable regular expression search. ' +
'Use <span id="catordog" style="color:#990000;" onclick="selectele(this.id)">(cat|dog|bird)</span> for cat OR dog OR bird. Use <span id="catanddog" style="color:#990000;" onclick="selectele(this.id)">((?=.*cat)(?=.*dog)(?=.*bird).*)</span> for cat AND dog AND bird. ' +
'Remember to escape special characters .*+?^=!:${}()|\\ with a backslash when used as literals within a regular expression. Use the <a target="_blank" href="" style="color:#0000FF;">Escape Literal Characters</a> tool. ' +
'Learn more about regular expressions visit <a rel="nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" style="color:#0000FF;">developer.mozilla.org</a>.</div>';
} else {
document.getElementById('addfield0').value = '';
enableregex = 'no';
document.getElementById('addfielddiv').innerHTML =
'Add <input type="button" id="andbttn" value="AND" onClick="addfield(\'andfield\');" /> ' +
'<input type="button" id="orbttn" value="OR" onClick="addfield(\'orfield\');" /> search field. ' +
'<input type="button" value="Reset" onClick="addfield(\'reset\');" /> ' +
'<input type="checkbox" id="regex_srch" onclick="regexsrch();" />Enable regular expression search.';
}
resizepage();
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 16px;
line-height: 1.7;
}
h1 {
display: block;
font-size: 18px;
font-weight: bold;
margin: 0px;
padding: 0px;
}
.se-for {
font-size: 27px;
font-weight: bold;
color: #b93207;
padding-top: 54px;
}
.contentt,
.wordd {
display: block;
margin: 0px;
padding: 8px 10px 8px 10px;
overflow: scroll;
font-family: arial;
font-size: 16px;
line-height: 1.7;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #000000;
outline: none;
resize: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px 4px 4px 4px;
width: 100%;
font-size: 18px;
}
.contentt {
height: 400px;
overflow: auto;
}
.wordd {
height: 99px;
overflow: auto;
}
input {
display: inline-block;
height: 33px;
line-height: 1;
vertical-align: middle;
font-size: 16px;
outline: none;
resize: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input::-moz-focus-inner {
border: 0;
padding: 0
}
input[type='radio'] {
width: 20px;
height: 20px;
vertical-align: middle;
margin: 0px;
padding: 0px;
font-size: 16px;
}
input[type='checkbox'] {
width: 20px;
height: 20px;
vertical-align: middle;
margin: 0px;
padding: 0px;
font-size: 16px;
}
input[type='text'] {
width: auto;
margin: 3px 0px 3px 0px;
padding: 0px 10px 0px 10px;
font-family: arial;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #000000;
border-radius: 12px;
}
input[type='button'] {
width: auto;
margin: 3px 0px 3px 0px;
padding: 0px 10px 0px 10px;
font-family: arial;
font-weight: bold;
color: #000000;
border: 1px solid #000000;
background-color: #FFFFFF;
cursor: pointer;
border-radius: 5px;
background: #b93207;
color: #fff;
border: #b93207;
}
input[type='button']:hover {
color: #f9f900;
}
input[type='button']:hover {}
input[type='file'] {
width: 92px;
border-radius: 12px;
overflow: hidden;
padding: 0px;
margin: 0px 0px 0px -92px;
-moz-opacity: 0;
opacity: 0;
cursor: pointer;
}
input[type='file']::-webkit-file-upload-button {
cursor: pointer;
}
div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table {
border-collapse: collapse;
}
table,
td {
padding: 0px;
}
.buttonz {
width: 100%;
display: inline-block;
}
#menu {
position: absolute;
z-index: -1;
left: 0px;
top: 0px;
width: 0px;
height: 0%;
margin: 0px;
overflow: auto;
background-color: #E1E1D2;
border-right: 1px solid #000000;
}
div.navcat {
padding: 10px 0px 5px 12px;
font-size: 18px;
font-weight: bold;
font-style: italic;
}
div.navdiv {
height: 2px;
padding: 0px;
margin: 18px 10px 13px 10px;
background-color: #000000;
}
a.nav {
display: inline-block;
padding: 0px;
margin: 10px 0px 10px 10px;
text-decoration: underline;
color: #000000;
}
#toolpadding {
padding: 10px 10px 10px 10px;
}
#tool {
width: 1100px;
margin: 0px;
padding: 0px;
background-color: #fff;
margin: 0 auto;
}
<div id="tool">
<div id="toolpadding">
<div id="topdiv">
<div class="se-for">Search lines for:</div>
<div id="inputfields" style="padding-top:4px;">
<textarea type="text" id="addfield0" class="wordd">Three</textarea>
</div>
<div class="buttonz">
<input type="button" value="Keep Lines Containing" onClick="if(document.getElementById('addfield0').value!='') {removelines('notcontaining');}" />
<input type="checkbox" id="case_sen" />Case sensitive.
</div>
</div>
<div id="middiv" style="height:120px;">
<textarea id="input_output" class="contentt" wrap="off">
One One One One One One One One One One One One One One One
Three Three Three Three Three Three Three Three Three Three
Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two
Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two
Three Three Three Three Three Three Three Three Three Three
Three Three Three Three Three Three Three Three Three Three
Four Four Four Four Four Four Four Four Four Four Four Four
Five Five Five Five Five Five Five Five Five Five Five Five
Three Three Three Three Three Three Three Three Three Three
Five Five Five Five Five Five Five Five Five Five Five Five
Three Three Three Three Three Three Three Three Three Three
</textarea>
</div>
<div id="btmdiv">
<textarea id="removed_box" rows="4" style="display:none; width:100%; margin-top:10px;" wrap="off">
Removed Line Box - Removed/extracted lines will display here.</textarea>
</div>
</div>
</div>

Addition table to modal and catching data from array

I get a problem when I try generate table in modal with data from js code.
There is a problem with 249 line in js. I can not understand why my params.progress array is not defined.
rock-paper-scissors app on codepen
I create new object in empty params.progress array after every player move:
var objectResults = {
number: params.numberOfRounds,
playerMove: userChoice,
computerMove: computerChoice,
gameResult: params.userScore+":"+params.computerScore,
}
params.progress[params.numberOfRounds] = objectResults;
Finally I try to generate table with those data:
function makeTableFromProgress() {
var resultsTableBody = document.querySelector('#resultsTableBody');
var rows = params.progress.length;
for (i = 0; i<rows; i++) {
var row = resultsTableBody.insertRow(i);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = params.progress[i]['number'];
cell2.innerHTML = params.progress[i]['playerMove'];
cell3.innerHTML = params.progress[i]['computerMove'];
cell4.innerHTML = params.progress[i]['gameResult'];
}
}
In modal window, like this:
<table>
<thead>
<tr>
<th>No.</th>
<th>Player move</th>
<th>Computer move</th>
<th>Game result</th>
</tr>
</thead>
<tbody id="resultsTableBody"></tbody>
</table>
And it brings kind of that problem:
Cannot read property 'number' of undefined
Thanks for help

The problem is in function makeTableFromProgress. i must start with 1 instead of 0 and also insertRow(i - 1); instead of insertRow(i);
function makeTableFromProgress() {
var resultsTableBody = document.querySelector('#resultsTableBody');
var rows = params.progress.length;
for (i = 1; i < rows; i++) {
var row = resultsTableBody.insertRow(i - 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = params.progress[i]['number'];
cell2.innerHTML = params.progress[i]['playerMove'];
cell3.innerHTML = params.progress[i]['computerMove'];
cell4.innerHTML = params.progress[i]['gameResult'];
}
};
The final code will be this
var userScore_span = document.getElementById("user-score");
var computerScore_span = document.getElementById("computer-score");
var scoreBoard_div = document.querySelector(".score-board");
var result_p = document.querySelector(".result > p");
var moveButtons = document.querySelectorAll("[data-move]");
var newGame_div = document.querySelector(".newGame");
var choices_div = document.querySelector(".choices");
var message_p = document.getElementById("message");
var trophy_p = document.getElementById("numberOfWins");
var roundsCounter_p = document.getElementById("numberOfRounds");
var modal_h = document.getElementById("endMessage");
var userName_div = document.getElementById("user-label");
var userName;
var numberOfGames;
var params = {
userScore: 0,
computerScore: 0,
numberOfRounds: 0,
progress: []
}
function main() {
moveButtons.forEach(function(button) {
var userChoice = button.dataset.move;
button.addEventListener('click', function() {
game(userChoice);
});
});
}
function game(userChoice) {
var computerChoice = getComputerChoice();
switch (userChoice + computerChoice) {
case "RockRock":
case "PaperPaper":
case "ScissorsScissors":
draw(userChoice, computerChoice);
break;
case "RockScissors":
case "PaperRock":
case "ScissorsPaper":
win(userChoice, computerChoice);
break;
case "RockPaper":
case "PaperScissors":
case "ScissorsRock":
lose(userChoice, computerChoice);
break;
}
}
function getComputerChoice() {
var choices = ['Rock', 'Paper', 'Scissors'];
randomNumber = Math.floor(Math.random() * 3)
return choices[randomNumber];
}
function draw(userChoice, computerChoice) {
params.numberOfRounds++;
roundsCounter_p.innerHTML = "Number of rounds: " + params.numberOfRounds;
computerScore_span.innerHTML = params.computerScore;
userScore_span.innerHTML = params.userScore;
var smallerUserWord = "user ".fontsize(4);
var smallerCompWord = " comp".fontsize(4);
result_p.innerHTML = smallerUserWord + userChoice + " vs " + computerChoice + smallerCompWord + "<br>It is a draw!";
document.getElementById(userChoice).classList.add('gray-glow');
setTimeout(function() {
document.getElementById(userChoice).classList.remove('gray-glow')
}, 400);
var objectResults = {
number: params.numberOfRounds,
playerMove: userChoice,
computerMove: computerChoice,
gameResult: params.userScore + ":" + params.computerScore,
}
params.progress[params.numberOfRounds] = objectResults;
}
function win(userChoice, computerChoice) {
params.numberOfRounds++;
roundsCounter_p.innerHTML = "Number of rounds: " + params.numberOfRounds;
params.userScore++;
userScore_span.innerHTML = params.userScore;
computerScore_span.innerHTML = params.computerScore;
var smallerUserWord = "user ".fontsize(4);
var smallerCompWord = " comp".fontsize(4);
result_p.innerHTML = smallerUserWord + userChoice + " vs " + computerChoice + smallerCompWord + "<br>You won!";
document.getElementById(userChoice).classList.add('green-glow');
setTimeout(function() {
document.getElementById(userChoice).classList.remove('green-glow')
}, 400);
var objectResults = {
number: params.numberOfRounds,
playerMove: userChoice,
computerMove: computerChoice,
gameResult: params.userScore + ":" + params.computerScore,
}
params.progress[params.numberOfRounds] = objectResults;
endGame();
}
function lose(userChoice, computerChoice) {
params.numberOfRounds++;
roundsCounter_p.innerHTML = "Number of rounds: " + params.numberOfRounds;
params.computerScore++;
computerScore_span.innerHTML = params.computerScore;
userScore_span.innerHTML = params.userScore;
var smallerUserWord = "user ".fontsize(4);
var smallerCompWord = " comp".fontsize(4);
result_p.innerHTML = smallerUserWord + userChoice + " vs " + computerChoice + smallerCompWord + "<br>You lost!";
document.getElementById(userChoice).classList.add('red-glow');
setTimeout(function() {
document.getElementById(userChoice).classList.remove('red-glow')
}, 400);
var objectResults = {
number: params.numberOfRounds,
playerMove: userChoice,
computerMove: computerChoice,
gameResult: params.userScore + ":" + params.computerScore,
}
params.progress[params.numberOfRounds] = objectResults;
endGame();
}
function newGame() {
newGame_div.addEventListener('click', function() {
howManyWins();
})
main();
}
function howManyWins() {
var userAnswer = prompt("TILL HOW MANY WINS?");
if (userAnswer === null || userAnswer === "" || isNaN(userAnswer)) {
thereIsAnError();
} else {
giveMeYourName();
resetScore();
games(userAnswer);
}
}
function thereIsAnError() {
message_p.innerHTML = "Please press NEW GAME and choose the number!";
setTimeout(function() {
message_p.innerHTML = ""
}, 3000);
}
function giveMeYourName() {
var name = prompt("WHAT IS YOUR NAME?");
if (name === null || name === "" || isNaN(name) === false) {
thereIsAnError();
document.querySelector('#trophy').classList.add('trophydisabled');
} else if (name.length > 9) {
message_p.innerHTML = "Your name is too long. 9 letters summary!";
} else {
document.querySelector('#trophy').classList.remove('trophydisabled');
choices_div.classList.remove('choices-disabled');
newGame_div.classList.add('newGame-disabled');
userName_div.innerHTML = name;
userName = name;
}
}
function resetScore() {
params.userScore = 0;
params.computerScore = 0;
params.numberOfRounds = 0;
userScore_span.innerHTML = params.userScore;
computerScore_span.innerHTML = params.computerScore;
roundsCounter_p.innerHTML = "";
}
function games(userAnswer) {
trophy_p.innerHTML = "Up to: " + userAnswer;
numberOfGames = userAnswer;
}
function endGame() {
if (numberOfGames == params.userScore) {
choices_div.classList.add('choices-disabled');
newGame_div.classList.remove('newGame-disabled');
result_p.innerHTML = "";
userName_h = userName;
modal_h.innerHTML = userName + "<br>You won the ENTIRE game!";
makeTableFromProgress()
showModal();
} else if (numberOfGames == params.computerScore) {
choices_div.classList.add('choices-disabled');
newGame_div.classList.remove('newGame-disabled');
showModal();
result_p.innerHTML = "";
userName_h = userName;
modal_h.innerHTML = userName + "<br>You lose the ENTIRE game!";
makeTableFromProgress()
showModal();
}
}
newGame();
choices_div.classList.add('choices-disabled');
//MODAL
var modal = document.getElementById("modal-one");
var showModal = function() {
event.preventDefault();
document.querySelector('#modal-overlay').classList.add('show');
modal.classList.add('show');
};
var hideModal = function(event) {
event.preventDefault();
document.querySelector('#modal-overlay').classList.remove('show');
this.parentElement.classList.remove('show');
};
var closeButtons = document.querySelectorAll('.close');
for (var i = 0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener('click', hideModal);
}
document.querySelector('#modal-overlay').addEventListener('click', hideModal);
var modals = document.querySelectorAll('.modal');
for (var i = 0; i < modals.length; i++) {
modals[i].addEventListener('click', function(event) {
event.stopPropagation();
});
}
function makeTableFromProgress() {
var resultsTableBody = document.querySelector('#resultsTableBody');
var rows = params.progress.length;
for (i = 1; i < rows; i++) {
var row = resultsTableBody.insertRow(i - 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = params.progress[i]['number'];
cell2.innerHTML = params.progress[i]['playerMove'];
cell3.innerHTML = params.progress[i]['computerMove'];
cell4.innerHTML = params.progress[i]['gameResult'];
}
};
$black: #000;
$white: #fff;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: #2d3030;
}
header {
background-color: $white;
padding: 20px;
}
header>h1 {
color: #2d3030;
text-align: center;
text-transform: uppercase;
}
#trophy {
margin-top: 20px;
text-align: center;
font-size: 30px;
color: $white;
&.trophydisabled {
display: none;
}
}
#trophy>p {
color: $white;
font-size: 20px;
}
.roundsCounter {
margin-top: 20px;
text-align: center;
}
.roundsCounter>p {
color: $white;
font-size: 20px;
}
.score-board {
margin: 30px auto;
border: 3px solid $white;
border-radius: 5px;
width: 200px;
color: $white;
font-size: 50px;
text-align: center;
padding: 15px 20px;
position: relative;
}
.badge {
width: 100px;
background-color: #af0e0e;
color: $white;
font-size: 15px;
padding: 2px 10px;
text-transform: lowercase;
}
#user-label {
position: absolute;
top: 40px;
left: -110px;
}
#computer-label {
position: absolute;
top: 40px;
right: -110px;
}
.result {
font-size: 40px;
color: $white;
}
.result>p {
text-align: center;
}
.newGame {
margin: 20px auto;
width: 250px;
border: 4px solid $white;
}
.newGame>p {
padding: 10px;
color: $white;
text-align: center;
font-size: 40px;
text-transform: uppercase;
}
.newGame:hover p {
background-color: $white;
color: #d01115;
font-weight: bold;
cursor: pointer;
}
#message {
margin: 20px;
text-align: center;
color: $white;
font-size: 30px;
font-weight: bold;
}
.choices {
margin-top: 30px;
text-align: center;
}
.choices button {
background-color: #2d3030;
display: inline-block;
width: 115px;
border: 4px solid $white;
border-radius: 50%;
font-size: 50px;
color: $white;
padding: 20px;
margin: 10px;
transition: all 0.4s ease;
}
.choices button:hover {
cursor: pointer;
color: #2d3030;
;
background-color: $white;
}
.challenge {
margin-top: 30px;
text-align: center;
color: $white;
font-size: 20px;
font-weight: bold;
}
.gray-glow {
border: 4px solid #787c77;
box-shadow: 0 0 15px 10px #787c77;
}
.green-glow {
border: 4px solid #31b43a;
box-shadow: 0 0 15px 10px #31b43a;
}
.red-glow {
border: 4px solid #d01115;
box-shadow: 0 0 15px 10px #d01115;
}
.choices-disabled {
display: none;
}
.newGame-disabled {
display: none;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
&.show {
display: block;
}
}
.modal {
display: none;
background: $white;
width: 800px;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
padding: 20px;
text-align: center;
&.show {
display: block;
}
.close {
font-size: 20px;
position: absolute;
right: 0;
top: 0;
right: 5px;
padding: 5px;
color: $black;
text-decoration: none;
}
table {
text-align: center;
margin: 0 auto;
}
table th {
padding: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rock Paper Scissors Final</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900|Open+Sans:400,700,800&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<header>
<h1>Rock! Paper! Scissors!</h1>
</header>
<div id="trophy">
<i class="fas fa-trophy"></i>
<p id="numberOfWins"></p>
</div>
<div class="roundsCounter">
<p id="numberOfRounds"></p>
</div>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Rock beats Scissors
<br>Paper covers Rock
<br>Scissors cuts Paper</p>
</div>
<div class="newGame">
<p>New Game</p>
</div>
<p id="message"></p>
<div class="choices">
<button class="player-move" id="Rock" data-move="Rock">
<i class="fas fa-hand-rock"></i>
</button>
<button class="player-move" id="Paper" data-move="Paper">
<i class="fas fa-hand-paper"></i>
</button>
<button class="player-move" id="Scissors" data-move="Scissors">
<i class="fas fa-hand-scissors"></i>
</button>
</div>
<p class="challenge">Let me defeat you!</p>
<div class="overlay" id="modal-overlay">
<div class="modal" id="modal-one">
<i class="fas fa-times"></i>
<h2 id="endMessage">""</h2>
<h3><br>How it was?</h3>
<table>
<thead>
<tr>
<th>No.</th>
<th>Player move</th>
<th>Computer move</th>
<th>Game result</th>
</tr>
</thead>
<tbody id="resultsTableBody"></tbody>
</table>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

Uncaught ReferenceError: removeLine is not defined

I am using the following code from this SO answer, however it does work on here but when I try to remove an image on my side I get:
Uncaught ReferenceError: removeLine is not defined at
HTMLSpanElement.onclick (https://example.com/test/createst/?myDates=2017&myCountry=Italia:1)
NOTE
One other bit I need to do is to create a preview of the uploaded images, I've found the following code by asking another question on SO where I actually had the opposite situation, managed to have a preview but not the remove
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var inputFile = dropZone.find("input");
var finalFiles = {};
$(function() {
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({
top: y - 15,
left: x - 100
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({
top: y - 15,
left: x - 160
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function(e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
inputFile.on('change', function(e) {
finalFiles = {};
$('#filename').html("");
var fileNum = this.files.length,
initial = 0,
counter = 0;
$.each(this.files,function(idx,elm){
finalFiles[idx]=elm;
});
for (initial; initial < fileNum; initial++) {
counter = counter + 1;
$('#filename').append('<div id="file_'+ initial +'"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + ' <span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span></div>');
}
});
})
function removeLine(obj)
{
inputFile.val('');
var jqObj = $(obj);
var container = jqObj.closest('div');
var index = container.attr("id").split('_')[1];
container.remove();
delete finalFiles[index];
//console.log(finalFiles);
}
#drop-zone {
width: 100%;
min-height: 150px;
border: 3px dashed rgba(0, 0, 0, .3);
border-radius: 5px;
font-family: Arial;
text-align: center;
position: relative;
font-size: 20px;
color: #7E7E7E;
}
#drop-zone input {
position: absolute;
cursor: pointer;
left: 0px;
top: 0px;
opacity: 0;
}
/*Important*/
#drop-zone.mouse-over {
border: 3px dashed rgba(0, 0, 0, .3);
color: #7E7E7E;
}
/*If you dont want the button*/
#clickHere {
display: inline-block;
cursor: pointer;
color: white;
font-size: 17px;
width: 150px;
border-radius: 4px;
background-color: #4679BD;
padding: 10px;
}
#clickHere:hover {
background-color: #376199;
}
#filename {
margin-top: 10px;
margin-bottom: 10px;
font-size: 14px;
line-height: 1.5em;
}
.file-preview {
background: #ccc;
border: 5px solid #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
font-size: 14px;
margin-top: 5px;
}
.closeBtn:hover {
color: red;
display:inline-block;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="drop-zone">
<p>Drop files here...</p>
<div id="clickHere">or click here.. <i class="fa fa-upload"></i>
<input type="file" name="file" id="file" multiple />
</div>
<div id='filename'></div>
</div>

Password strength JavaScript

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

Password Strength Checker

i have a problem with my Password Strength checker.
Color of the result doesn't change according to the strength of the password.
I guess i have problem with "addClass" in javascript.
Here is the code...
html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<form name="pass_strength">
<p><label for="username">Username : </label>
<input type="text" name="username" class="input"/>
</p>
<p><label for="password">Password : </label>
<input type="password" name="password" id="password" class="input" />
<span id="result"></span>
</p>
</form>
</div>
</div>
</body>
</html>
css:
body
{ background-color:#CCC;}
#container
{
width:20%;
background-color:#000;
margin:0 auto;
border:5px solid #FFF;
margin-top:150px;
}
#content
{
padding:10px;
border: 2px solid rgb(105, 91, 91);
box-shadow: 2px 2px 10px #FFF;
background: #CCC;
}
.input
{
margin:10px;
}
#result
{
color:#F00;
text-shadow:#666;
}
a
{
color:#000;
}
.red{color:red;}
.orange{color:orange;}
.green{color:green;}
JS:
$(document).ready(function() {
$('#password').keyup(function(){
$('#result').html(checkStrength($('#password').val()))
})
function checkStrength(password){
var strength = 0
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short green')
return 'Too short'
}
if (password.length > 7) strength += 1
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
if (password.match(/([!,%,&,#,#,$,^,*,?,_,~])/)) strength += 1
if (password.match(/(.*[!,%,&,#,#,$,^,*,?,_,~].*[!,%,&,#,#,$,^,*,?,_,~])/)) strength += 1
if (strength < 2 ) {
$('#result').removeClass()
$('#result').addClass('weak')
$('#result').addClass('green')
return 'Weak'
} else if (strength == 2 ) {
$('#result').removeClass('green')
$('#result').addClass('orange')
return 'Good'
} else {
$('#result').removeClass('red')
$('#result').removeClass('orange')
$('#result').addClass('strong','green')
return 'Strong'
}
}
});

i have found this it may help you 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"/>
<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>

You have provided color to id of span element.Id attribute has an highest priority than class attribute so the color is not assigned to the result.
You can add class to the <span> element and give color to that class.
You can see demo here http://jsfiddle.net/tenigada/RH8f6/575/

Used to this
#result.red{color:red;}
#result.orange{color:orange;}
#result.green{color:green;}
Because you used to ID and than apply to class css but id is more power than class than used to with ID and class this css.
Demo code
$(document).ready(function() {
$('#password').keyup(function(){
$('#result').html(checkStrength($('#password').val()))
})
function checkStrength(password){
var strength = 0
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short green')
return 'Too short'
}
if (password.length > 7) strength += 1
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
if (password.match(/([!,%,&,#,#,$,^,*,?,_,~])/)) strength += 1
if (password.match(/(.*[!,%,&,#,#,$,^,*,?,_,~].*[!,%,&,#,#,$,^,*,?,_,~])/)) strength += 1
if (strength < 2 ) {
$('#result').removeClass()
$('#result').addClass('weak');
$('#result').addClass('green');
return 'Weak'
} else if (strength == 2 ) {
$('#result').removeClass('green');
$('#result').addClass('orange');
return 'Good'
} else {
$('#result').removeClass('red');
$('#result').removeClass('orange');
$('#result').addClass('strong green');
return 'Strong'
}
}
});
body
{ background-color:#CCC;}
#container
{
width:20%;
background-color:#000;
margin:0 auto;
border:5px solid #FFF;
margin-top:150px;
}
#content
{
padding:10px;
border: 2px solid rgb(105, 91, 91);
box-shadow: 2px 2px 10px #FFF;
background: #CCC;
}
.input
{
margin:10px;
}
#result
{
color:#F00;
text-shadow:#666;
}
a
{
color:#000;
}
#result.red{color:red;}
#result.orange{color:orange;}
#result.green{color:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<form name="pass_strength">
<p><label for="username">Username : </label>
<input type="text" name="username" class="input"/>
</p>
<p><label for="password">Password : </label>
<input type="password" name="password" id="password" class="input" />
<span id="result"></span>
</p>
</form>
</div>
</div>
</body>
</html>