github/diceware
1
0
Fork 0
mirror of https://github.com/dmuth/diceware.git synced 2024-10-22 23:12:09 -04:00
Code Issues Projects Releases Packages Wiki Activity

Added more dice buttons and code to populate the page with results.

Browse source
This commit is contained in:
Douglas Muth 2015-04-26 00:01:29 -04:00
parent 2a6b70b203
commit 1410eb45da
2 changed files with 73 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
index.html
View file

@ -57,21 +57,41 @@
</h2> </h2>
<div class="btn-group-lg" role="group" aria-label="..."> <div class="btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">4</button> <button type="button" class="btn btn-default dice_button">2</button>
<button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default dice_button">3</button>
<button type="button" class="btn btn-default">6</button> <button type="button" class="btn btn-default dice_button active">4</button>
<button type="button" class="btn btn-default">7</button> <button type="button" class="btn btn-default dice_button">5</button>
<button type="button" class="btn btn-default">8</button> <button type="button" class="btn btn-default dice_button">6</button>
<button type="button" class="btn btn-default dice_button">7</button>
<button type="button" class="btn btn-default dice_button">8</button>
</div> </div>
<br/> <br/>
<button type="button" class="btn btn-default btn-lg btn-primary"> <button type="button" class="btn btn-default btn-lg btn-primary" id="roll_dice">
<span class="glyphicon glyphicon-play" aria-hidden="true" ></span> Roll Dice! <span class="glyphicon glyphicon-play" aria-hidden="true" ></span> Roll Dice!
</button> </button>
</div> </div>
</div><!-- /row --> </div><!-- /row -->
<p/>
<div class="row">
<div class="col-md-12" style="height: 100px; ">
<div class="results" >
<span class="results_words_key" style="display: none; ">Your words are:</span>
<span class="results_words_value" style="display: none; "></span>
<p/>
<span class="results_phrase_key" style="display: none; ">Your passphrase is:</span>
<span class="results_phrase_value" style="display: none; "></span>
<p/>
</div>
</div>
</div><!-- /row -->
<div class="row" style="text-align: left;"> <div class="row" style="text-align: left;">
<div class="col-md-12"> <div class="col-md-12">

46
main.js
View file

@ -43,8 +43,54 @@ function get_word(wordlist, index) {
} }
//
// Handler to mark the clicked number of dice button as active.
//
jQuery(".dice_button").on("click", function(e) {
jQuery(".dice_button").removeClass("active");
jQuery(e.target).addClass("active");
});
//
// Handler when the "Roll Dice" button is clicked. It gets the
// passphrase and updates the HTML with it.
//
jQuery("#roll_dice").on("click", function(e) {
jQuery(".results_words_key").hide();
jQuery(".results_words_value").hide();
jQuery(".results_phrase_key").hide();
jQuery(".results_phrase_value").hide();
var num_dice = jQuery(".dice_button.active").html();
var passphrase = new Array();
for (var i=0; i<num_dice; i++) {
var roll = roll_dice();
passphrase.push(get_word(wordlist, roll));
}
jQuery(".results_words_value").html(passphrase.join(" "));
jQuery(".results_phrase_value").html(passphrase.join(""));
jQuery(".results_words_key").fadeIn(500, function() {
jQuery(".results_words_value").fadeIn(500, function() {
jQuery(".results_phrase_key").fadeIn(500, function() {
jQuery(".results_phrase_value").fadeIn(500);
});
});
});
});
//
// Load our wordlist.
//
jQuery.getScript("./wordlist.js").done( jQuery.getScript("./wordlist.js").done(
function(data) { function(data) {
//jQuery("#roll_dice").click(); // Debugging
}).fail( }).fail(
function(jqxhr, settings, exception) { function(jqxhr, settings, exception) {