We Keep Coding

TypeError in JavaScript when setting the Y position

When running this code I currently getting the error "TypeError: Invalid value for y-coordinate. Make sure you are passing finite numbers to setPosition(x, y)." all of my functions do work are are declared properly. When I use a println and print out letYPos it prints out "NaN" but when I call the function again it prints out the correct value. Does anyone know how I can fix this or if there even is a way to fix this?
var count = 0;
var letYPos = 0;
var y = 3;
function testing()
{
var letXPos = 25;
letYPos += 75;
if (count == 6)
{
println("You have ran out of guesses, the correct anwser was: " + secretWord);
return;
}
var input = readLine("Enter your word: ");
if (input == null)
{
println("You have to enter a word! ");
return;
}
if (input.length != 5)
{
println("That is not a five letter word, please try again.");
return;
}
var x = 3;
for (var i = 0; i < input.length; i++)
{
if (input.includes(secretWord.charAt(i)))
{
var index = input.indexOf(secretWord.charAt(i));
}
if (index == 0) { yellow(3, y ) }
if (index == 1) { yellow(83, y ) }
if (index == 2) { yellow(163, y) }
if (index == 3) { yellow(243, y) }
if (index == 4) { yellow(323, y) } index = null;
}
for (var i = 0; i < input.length; i++)
{
if (input.charAt(i) == secretWord.charAt(i))
{
green(x, y);
}
x += 80;
}
y += 80;
for (var i = 0; i < input.length; i++)
{
for (var a = 0; a <= 5; a++)
{
var txt = new Text(input.charAt(a), font);
txt.setPosition(letXPos, letYPos);
add(txt);
letXPos += 80;
}
}
if (input == secretWord)
{
println("That's Correct, Congratulations!");
return;
}
count++;
setTimeout(testing, 100);
}

How can I make this collision detection possible?

I'm using a number of boxes that are floating around the screen, I want for them to bounce away from each other when they collide and I am testing this by just changing their colours instead when they collide, for some reason their colour changes at the start(their starting colour is white and if they collide it should change to red but they start and stays red). Is there something I am doing wrong? I would also like for everything to be done within the constructor function. I am sorry for not commenting my code as yet.
function BoxSplash()
{
this.sample = [];
var test = false;
this.col = color(129)
this.changeColour = function()
{
this.col = color(random(0,255),random(0,128),random(0,255))
}
this.intersect = function(other)
{
for(var i = 0; i < numberss; i++)
{ var currentBox = this.sample[i]
var d = dist(currentBox.x,currentBox.y,other.x,other.y)
if(d < currentBox.width + other.width)
{
return true;
}
else
{
return false
}
}
noLoop()
}
this.draw = function()
{
stroke(255)
line(0,windowHeight/2,windowWidth,windowHeight/2)
stroke(0)
for(var i = 0; i < numberss; i++)
{
var box = {
x:random(0,windowWidth - 50),
y:random(windowHeight/2 ,windowHeight - 50),
width:50,
height:50,
speedX:random(1,5),
speedY:random(1,5)
}
this.sample.push(box)
}
//use numberss variable to work with gui
for(var i = 0; i < numberss; i++)
{
fill(this.col)
rect(this.sample[i].x,this.sample[i].y,50,50)
}
this.move()
}
this.move = function()
{
for(var i = 0; i < numberss; i++)
{
var shape = this.sample[i]
shape.x += shape.speedX
shape.y += shape.speedY
if(shape.x + shape.width >= windowWidth || shape.x <= 0 )
{
shape.speedX = -shape.speedX
}
if(shape.y + shape.height >= windowHeight || shape.y <= windowHeight/2)
{
shape.speedY = -shape.speedY;
}
for(var j = 0; j < numberss; j++)
{
var others = this.sample[j]
var d = dist(shape.x,shape.y,others.x,others.y)
if( i != j && d < shape.width + others.width)
{
test = true;
}
else
{
test = false
}
if(test)
{
this.col = color(255,0,0)
}
}
}
}
}

You should visit this link and transform their circles into your boxes.
1st: Calculate dist(object1.x, object.y, object2.x, object2.y) and save into a variable called d
2nd:
if (d < object1.h + object2.h) {
// Enter your code here
}

How to style tables dynamically using Javascript?

Is it possible to have the tables inside this snippet to be styled dynamically? Instead of splitting the data fetched each time and hardcoding it? They have different number of columns and rows. I'd like them to have the same style using only one split(), so I can have my code DRY. The approach to the solution would be on a complete different way than my code is written now? Thank you very much for the help.
function loadMountsVehicles() {
fetch('https://api.open5e.com/sections/mounts-and-vehicles/'
).then(function (responses) {
return responses.json();
}).then(function (data) {
displayMountsVehicles(data);
});
};
function displayMountsVehicles(data) {
let html = "";
html += `<h3>Mounts and Vehicles</h3>`;
for (let i = 0; i < data.desc.split(/\n/).length; i++) {
if (i < 16) {
html += `<p>${data.desc.split(/\n/)[i]}</p>`;
}
};
let mountsTable = data.desc.split(/[\n|]+/).splice(8, 40);
let index = mountsTable.indexOf("----------------");
if (index > -1) {
mountsTable.splice(index, 4);
};
let perrow = 4;
html += "<table><thead><tr>";
for (let i = 0; i < mountsTable.length; i++) {
html += `<td>${mountsTable[i]}</td>`;
let next = i + 1;
if (i === 3) {
html += `</thead>`;
} else if (next % perrow == 0 && next != mountsTable.length) {
html += "</tr><tr>";
}
};
html += "</tr></table>";
for (let i = 0; i < data.desc.split(/\n/).length; i++) {
if (i < 28 && i > 25) {
html += `<p>${data.desc.split(/\n/)[i]}</p>`;
}
};
let tackTable = data.desc.split(/[\n|]+/).splice(49, 51);
let indexTack = tackTable.indexOf("--------------------");
if (indexTack > -1) {
tackTable.splice(indexTack, 3);
};
let perrowTack = 3;
html += "<table><thead><tr>";
for (let i = 0; i < tackTable.length; i++) {
html += `<td>${tackTable[i]}</td>`;
let next = i + 1;
if (i === 2) {
html += `</thead>`;
} else if (next % perrowTack == 0 && next != tackTable.length) {
html += "</tr><tr>";
}
};
html += "</tr></table>";
for (let i = 0; i < data.desc.split(/\n/).length; i++) {
if (i > 45 && i < 49) {
html += `<p>${data.desc.split(/\n/)[i]}</p>`;
}
};
let waterboneTable = data.desc.split(/[\n|]+/).splice(101);
let indexWaterbone = waterboneTable.indexOf("--------------");
if (indexWaterbone > -1) {
waterboneTable.splice(indexWaterbone, 3);
};
let perrowWaterbone = 3;
html += "<table><thead><tr>";
for (let i = 0; i < waterboneTable.length; i++) {
html += `<td>${waterboneTable[i]}</td>`;
let next = i + 1;
if (i === 2) {
html += `</thead>`;
} else if (next % perrowWaterbone == 0 && next != waterboneTable.length) {
html += "</tr><tr>";
}
};
html += "</tr></table>";
html = html.replace(/\*\*\_([\w\(\)][\s\w\,\(\)\.]+)\_\*\*/g, "<span>$1</span>");
html = html.replace(/\*\*([\w\(\)\_][\s\w\,\(\)\_\.]+)\*\*/g, "<span>$1</span>");
document.querySelector(".content-text").innerHTML = html;
};
<body onload="loadMountsVehicles()">
<div class="content-text"></div>
</body>
This is the data returned from the API:
function loadMountsVehicles() {
fetch('https://api.open5e.com/sections/mounts-and-vehicles/'
).then(function (responses) {
return responses.json();
}).then(function (data) {
console.log(data.desc)
});
};
<body onload="loadMountsVehicles()">
</body>

Check password strength against an API value

I get my password spec from an API which then I split the object into the needed fields and check that I have the required number of lower, upper, special and length of my password.
function isStrong(passwordChecker) {
if (!passwordChecker) {
return false;
}
debugger;
var securityOption = JSON.parse(localStorage.getItem("Security"));
var MinLength = securityOption.PasswordMinRequiredLength;
var SpecialChars = securityOption.PasswordMinRequiredNonalphanumericCharacters;
var MinLowercase = securityOption.PasswordMinRequiredLowercase;
var MinUppercase = securityOption.PasswordMinRequiredUppercase;
//LenghtCheck
if (passwordChecker.length < MinLength);
return false;
if (!CountSpecialChars(passwordChecker) > SpecialChars) {
return false;
}
if (MinLowercase > 0) {
if (!CountLowerCase(passwordChecker) > MinLowercase) {
return false;
}
}
if (MinUppercase > 0) {
if (!CountUpperCase(passwordChecker) > MinLowercase) {
return false;
}
}
}
function CountSpecialChars(text) {
var Count = 0;
for (var i = 0; i < text.length; i++) {
var c = text[i];
if (text[i] >= 33 && text[i] <= 63){
Count++;
}
}
}
function MinLowercase(text) {
var Count = 0;
for (var i = 0; i < text.length; i++) {
var c = text[i];
if (text[i] >= 97 && text[i] <= 122) {
Count++;
}
}
}
function MinUppercase(text) {
var Count = 0;
for (var i = 0; i < text.length; i++) {
var c = text[i];
if (text[i] >= 65 && text[i] <= 90) {
Count++;
}
}
}
Now what I want to do is, check the different conditions as a whole and if all of the conditions are true then change the class to green..
$(pageId + ' #password').bind('keyup', function () {
var currentpassword = $(pageId + ' #password').val();
if (isStrong(currentpassword)) {
$(pageId + ' #password').addClass('green');
} else {
$(pageId + ' #password').addClass('red');
}
});
I am not sure how to check the conditions as a whole and return an overall true because as I start trying in my password it instantly changes to green as in my password spec you do not need any UpperCase or LowerCase letters so on any input of a char it returns true..

You should refactor your functions so that they accept both the string and the parameter and return true or false. For example:
function CountSpecialChars(text) {
var Count = 0;
for (var i = 0; i < text.length; i++) {
var c = text[i];
if (text[i] >= 33 && text[i] <= 63){
Count++;
}
}
}
if (!CountSpecialChars(passwordChecker) > SpecialChars) {
return false;
}
Should instead be:
function CountSpecialChars(text, min) {
var count = 0;
for (var i = 0; i < text.length; i++) {
var c = text[i];
if (text[i] >= 33 && text[i] <= 63){
count++;
}
}
return count > min;
}
return CountSpecialChars(passwordChecker, SpecialChars);
Also, as a bonus, you could also avoid that for loop for those functions by using replace, like so:
function MinChars(text, min) {
return text.length > min;
}
function MinUppercase(text, min) {
var non_uppers = /[^A-Z]/g;
var uppers = text.replace(non_uppers, text);
return uppers.length > min;
}
function MinLowercase(text, min) {
var non_lowers = /[^a-z]/g;
var lowers = text.replace(non_lowers, text);
return lowers.length > min;
}
function MinSpecialChars(text, min) {
var non_specials = /[^!-\?]/g;
var specials = text.replace(non_specials, text);
return specials.length > min;
}
Now with those functions, you can have:
if !MinChars(pw, MinLength) return false;
if !MinSpecialChars(pw, SpecialChars) return false;
if !MinLowercase(pw, MinLowercase) return false;
if !MinUppercase(pw, MinUppercase) return false;
return true;

After pasting the following code, my browser crashed. Why?

After pasting the following code, my browser crashed. I have absolutely no idea why. I am a new to Javascript.
Here is my code:
var randarray = new Array();
var l = 0;
var flag;
var numofpost = 5;
function randomposts(json) {
var total = parseInt(json.feed.openSearch$totalResults.$t, 10);
for (i = 0; i < numofpost;) {
flag = 0;
randarray.length = numofpost;
l = Math.floor(Math.random() * total);
for (j in randarray) {
if (l == randarray[j]) {
flag = 1;
}
}
if (flag == 0 && l != 0) {
randarray[i++] = l;
}
}
document.write('<ul class="rp-menu">');
for (n in randarray) {
var p = randarray[n];
var entry = json.feed.entry[p - 1];
for (k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
var item = "<li>" + "" + entry.title.$t + "</li>";
document.write(item);
}
}
}
document.write('</ul>');
}

The increment of i in your first for loop is behind a condition, so if it never resolves to true, you'll have an infinite loop