Develop Reference

How can I get a true random from an array? Or should I do something else entirely?

I would like to display a different madlib each time a user clicks the submit button. Only needs to be clicked 3 times. I am using the functions below, but it doesn't seem all that random. I also have a snippet of the dogLib function that creates three madlibs and then calls the function above it to generate a random madlib string.
//Class: madlibGenerator.js
//----- Private Helper Functions -----
//Get Random: word strings for randam madlib
//Get Random: madlib string to display
function getRandomString(array) {
for(var i = array.length - 1; i>0; i--){
var j = Math.floor(Math.random() * (i+1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return this.word = array.pop();
}
//Set: set user input word string arrays into the getRandomString(array)
//Get: a final array of words to add to the madLib display strings
function getFinalWordArray(){
var prpN = getRandomString(this.properNouns);
var adjt = getRandomString(this.adjectives);
var noun = getRandomString(this.nouns);
var vrb = getRandomString(this.verbs);
return finalWordArray = [prpN, adjt, noun, vrb];
}
//Get Random Dog Lib
function getDogLib() {
//Get Random Dog Words
var dogWordsArray = getFinalWordArray();
//DogLibs
var dogLibOne =
"What is that " + dogWordsArray[1] +
" sound!" +
" Hey! " + dogWordsArray[0] +
"! You come " + dogWordsArray[3] +
" you crazy " + dogWordsArray[2] +
"!";
var dogLibTwo =
dogWordsArray[0] + "!! " +
dogWordsArray[0] + "!! " +
"Come " + dogWordsArray[3] +
" and lay on my clean " + dogWordsArray[2] +
" while your treat is still " + dogWordsArray[1] + "!";
var dogLibThree =
"My human comes home and takes me for a " + dogWordsArray[3] +
" where I sit on a " + dogWordsArray[2] +
" and get my " + dogWordsArray[1] +
" belly rubbed!";
//Make array of DogLibs
var dogLibArray = [dogLibOne, dogLibTwo, dogLibThree];
//Pick random dogLib string to display
finalDogLib = getRandomString(dogLibArray);
}
//Display: Random MadLib to console for now
function displayMadlib(pDisplayIDValue) {
if(pDisplayIDValue == "dogLib"){
//display
getDogLib();
console.log(finalDogLib);
}else if(pDisplayIDValue == "loveLib"){
//display
getLoveLib();
console.log(finalLoveLib);
}else if(pDisplayIDValue == "funnyLib"){
//display
getFunnyLib();
console.log(finalFunnyLib);
}
}
The code above isn't broken, it just doesn't produce a true random.
//Preferred Result: the program displays a different madlib each time the user clicks the submit button. The user only needs to click the button 3 times to get different madlibs, the fourth click clears the form and starts the program fresh.
Thank you!
I am open to any idea to make this a truly random madlibGenerator. Maybe counting number of clicks from a submit button?

So true randomness is going to be tough to achieve. Math.Random() from the javascript library isn't truly random as you've guessed, it's pseudo-random, meaning there is a pattern to it over a large number of inputs. Computers inherently can't really do true randomness, because they are always going to have to take some number, perform some sort of algorithm on it (these are usually "Mersenne Twisters" - fun wikipedia read), and spit out the result.
That said, I don't know exactly how to improve on what you've put into place here. With PRNG, a really large number of possible inputs can help a lot. If you want absolutely true randomness, the easiest way would probably be to hook into random.org's API (https://api.random.org/dashboard - developer license is free, limited to 1000 requests per day). Hooking into an API might be more work than you were planning on, but random.org uses (if I remember right) atmospheric noise and barometric pressure from the Earth to create their random numbers, so it's about as close to true randomness as you can possibly get.
I hope this helps!

basic constructor object help - JS

Trying to learn Objects in JS and having a bit of trouble trying to get this to work. Its just a simple Object Constructor but seems to be the bane of my life today. Unfortunately I dont have anyone at hand to turn to that can help me out. Also if anyone knows of good tutorials with real life working examples instead of the just how functions, loops etc work then Id really appreciate it.
function car(model, doors, color, speed){
this.model = model;
this.doors = doors;
this.color = color;
this.speed = speed;
}
var powerCar = new car ("M3", "4 door", "phoenix", "220pmh");
console.log("This " + powerCar.model + "has " + powerCar.doors + "has a top speed of " powerCar.speed);

Fixed it.
The problem is here:
console.log("This " + powerCar.model + "has " + powerCar.doors + "has a top speed of " powerCar.speed);
You need to add a + sign between "speed of" and powerCar.speed.

you can also traverse all the properties by for loop like below:
for (var prop in powerCar) {
console.log(prop + ': '+powerCar[prop])
}

There is a semi -colon in the third quote, and the quote displays correctly, but does not tweet correctly. It truncates at the semi-colon

There is a semi -colon in the third quote, and the quote displays correctly, but does not tweet correctly. It truncates at the semi-colon.
$(document).ready(function(){
var randQuote;
var randAuthor;
var randNum;
function getQuote(){
var quote =["While you are destroying your mind watching the worthless, brain-rotting drivel on TV, we on the Internet are exchanging, freely and openly, the most uninhibited, intimate and, yes, shocking details about our config.sys settings", "The secret of getting ahead is getting started.", "The unforgivable crime is soft hitting. Do not hit at all if it can be avoided; but never hit softly.", "The man on the top of the mountain didn't fall there.", "You can avoid most of the sorrows of life, the only requirement being that you avoid all the happiness."];
var author =["-Dave Barry", "-Mark Twain", "-Theodore Roosevelt","-Vince Lombardi", "-Robert Brault"];
var randNum = Math.floor(Math.random()*quote.length);
randQuote = quote[randNum];
randAuthor = author[randNum];
$(".quote").text(randQuote);
$(".author").text(randAuthor);
}
$("#newQuote").on("click", function(){
getQuote();
});
$("#tweet").on("click", function(){
var tweetQuote = randQuote;
var currentLength = randQuote.length + randAuthor.length + 1;
if(currentLength > 140){
var oneforty = 139 - randAuthor.length ; // 140 minus the space
tweetQuote = tweetQuote.slice(0, oneforty);
}
window.open("https://twitter.com/intent/tweet?text=" + tweetQuote + " " + randAuthor);
})
});

You need to escape the query as it's going through the url.
You can use encodeURIComponent() or escape() for any variable that you're adding that might have special characters.
Your code will look like this
window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(tweetQuote) + " " + encodeURIComponent(randAuthor));
Check this as example:
https://jsfiddle.net/nabtron/duyzk98b/2/
Update:
Don't use escape(), as it has been deprecated since ECMAScript v3.

if else statement on dribbble API

I am not very good at JS and am having a hard time with an IF Else statement regarding the API of Dribbble. I want to render shots that are 800px widths differently then shots that are 400px widths. I can get the API to spit out all of my shots at the same size but I want an if image width = 800 render one way else render another.
Can someone school me in how to fix this mess below.
function larger(fileterLarge){
if(filter.shots[i].width = 800){
function render(filter){
for (var i = 0; i<filter.shots.length;i++){
inner = inner + innerP1 + filter.shots[i].url + innerP2 + filter.shots[i].image_url + innerP3 + filter.shots[i].likes_count + innerP4 + filter.shots[i].comments_count + innerP5 + filter.shots[i].title + innerp6;
}
};
$('.gallery').html(inner);
inner = "";
};

To determine the way you images will render you have to use equality "===" operator instead of assignment "=" operator in your if else statement. Hope this fiddle will help you

Making a value plural (Greater than, Less than) in Javascript

I have the following code:
$(function(){
var total_click = 0;
$("#mapKey a.showKey").click(function(){
total_click = total_click + 1;
$("#counter").text("I cheated " + total_click + " whole" + (total_click = 1 ? + ' time' + ((total_click > 1) ? 's ' : ' ') : ''));
return false;
});
});
I'm trying to have it output as such:
Clicked once: "I cheated 1 whole time."
Clicked more than once: "I cheated X whole times."
-- With an 's' at the end of "times".
The counter is working fine, it's just the last part making the "time" or "times" show up appropriately that I am having difficulty with.
Any ideas what I'm doing wrong?
Thanks!

Here is your problem: total_click = 1. Try changing it to total_click == 1. I don't see why you have that conditional in there however, as it won't work as you expect anyway. Try $("#counter").text("I cheated " + total_click + " whole time" + ((total_click == 1) ? ' ' : 's '));

You are not using the ternary operator correctly, and also assigning total_click to 1 instead of checking its value. I would suggest moving this to a function to simplify things.
function pluralize(singular, times) {
if (times == 1) return singular;
else return singular + 's';
}
Then change the string to
var text = "I cheated " + clicks + " whole " + pluralize("time", clicks);
Here's an example.

$(function(){
var total_click = 0;
$("#mapKey a.showKey").click(function(){
total_click = total_click + 1;
$("#counter").text("I cheated " + total_click + " whole " + (total_click == 1 ? "time" : "times");
return false;
});
});

It's okay to use suggested implementations for a trivial cases, however it will not scale for a bigger set of problems and will not work for multiple languages (or it will get ugly very fast).
With this in mind, I’ve created a very simple JavaScript library that can be used to pluralize words in almost any language. It transparently uses CLDR database for multiple locales. It’s API is very minimalistic and integration is extremely simple. It’s called Numerous.
I’ve also written a small introduction article to it: «How to pluralize any word in different languages using JavaScript?».
Feel free to use it in your project. I will also be glad for your feedback on it!