One thing to note is that this solution is framework agnostic. However, I am using array.indexOf, which was recently introduced in the 5th Edition of ECMAScript, I believe browser support of this new method is decent, however many JavaScript frameworks have similar methods that might be safer to use in terms of cross-browser compatibility for the time being (ie. jQuery’s $.inArray() method)…

// Array of hockey players
var hockeyPlayers = ['Wayne Gretzky', 'Wendel Clark', 'Joe Sakic', 'Ian Laperriere'];

// Empty array to store random & unique hockey players in
var randomize = [];

// Cache hockeyPlayers length for optimal performance in for loop
var numPlayers = hockeyPlayers.length;

// Create for loop to iterate 3 times
for(var i = 0; i < 3; i++) {
    
    // Generate a random number for use in the randomize array
    var randomIndex = Math.floor(Math.random() * numPlayers);
    
    // Use array.indexOf property (available as of ECMAScript 5th Edition)...
    // to check if a hockey player has already been placed in the randomize array
    if(randomize.indexOf(hockeyPlayers[randomIndex]) !== -1) {
        
        // If hockey player already exists in randomize array decrement i...
        // this will allow loop to continue until we find a unique hockey player
        i--;
        
    } else {
        
        // Else insert unique hockey player into randomize array
        randomize.push(hockeyPlayers[randomIndex]);

    }
}

alert(randomize);

Also, here is a jsfiddle of the above example – http://jsfiddle.net/xTKPu/

Demo

Installation/Usage

Step 1
Download and call the jquery.costEstimatr.js script which is dependent on the jQuery core. Example…
<script type="text/javascript" src="js/jquery.costEstimatr.js"></script>

Step 2
Select the form element that you want to have cost estimation functionality on and then apply the costEstimatr method. Example…
$('#priceQuote').costEstimatr();

Step 3
Update the value attribute of any checkbox, radio button or select form element to use a number which will represent the cost of that particular service. Example…
<input id="hosting" type="checkbox" name="hosting" value="99" /><label for="hosting">Web Hosting <span>$99</span></label>

Step 4
Define your estimation summary container. Example…
Estimated Total Price: $<span id="price">0.00</span>

By default the plugin looks for a span with an id of price (span#price) to update the cost, and a span with an id of days (span#days) to update the ETA (ETA is optional). However, there are a few options that you can set to overwrite these and a few other defaults.

Plugin Options

This plugin has 4 options that can be overwritten. Below is a description of these options and their default value…

price: This defines the selector that you would like to use to display cost estimate summary.
Default Value:
price: $('span#price')

showDaysEstimate: Boolean value to determine whether or not to display an ETA.
Default Value:
showDaysEstimate: true

days: This defines the selector that you would like to use to display estimated days it will take to complete the project.
Default Value:
days: $('span#days')

dollarsPerDay: In order for the days estimate to update accordingly, a number of dollars per day needs to be set. For example, by default the dollarsPerDay option is set to 200, so for every $200 that gets added to the price summary, 1 day gets added to the days summary.
Default Value:
dollarsPerDay: 200

Below is an example of how to pass new options to the costEstimatr method to overwrite the defaults…
$('#priceQuote').costEstimatr({price: $('#yourNewPriceContainer'), showDaysEstimate: false});

Most of my projects and blog posts will relate to JavaScript as it is a topic that I have recently become obsessed with. I am constantly looking to improve my skills as a JavaScript developer and I would like to use this blog to chronicle some of the interesting things that I get to learn on a day-to-day basis since I spend the majority of hours at my current job as a UI developer working with JavaScript.