aboutsummaryrefslogtreecommitdiff
path: root/examples/browser/index.html
diff options
context:
space:
mode:
authorMarak <[email protected]>2014-09-22 11:27:08 +0200
committerMarak <[email protected]>2014-09-22 11:27:08 +0200
commit2aa00986923a4eee359b7a21520956f436fa8917 (patch)
tree733f4eebe3021b8c35f3928cc0e4a9192e417f7c /examples/browser/index.html
parentdfd9774fbe229a3f30b8fdc348a84671da210b6e (diff)
downloadfaker-2aa00986923a4eee359b7a21520956f436fa8917.tar.xz
faker-2aa00986923a4eee359b7a21520956f436fa8917.zip
[dist] Updated browser example. Moved browser example into new directory.
Diffstat (limited to 'examples/browser/index.html')
-rw-r--r--examples/browser/index.html251
1 files changed, 251 insertions, 0 deletions
diff --git a/examples/browser/index.html b/examples/browser/index.html
new file mode 100644
index 00000000..4ddd5f71
--- /dev/null
+++ b/examples/browser/index.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="description" content="">
+ <meta name="author" content=""><html>
+ <title>faker.js - generate massive amounts of fake data in node.js and the browser</title>
+ <script src = "js/jquery.js" type = "text/javascript"></script>
+ <script src = "js/prettyPrint.js" type = "text/javascript"></script>
+ <script src = "js/faker.js" type = "text/javascript"></script>
+ <link href="bootstrap.css" media="all" rel="stylesheet" type="text/css" />
+ <script>
+
+ $(document).ready(function(e){
+
+
+ // draw buttons
+ function drawButtons () {
+ $('#buttons').html('');
+ for (var module in faker) {
+ for (var method in faker[module]) {
+ if (typeof faker[module][method] === "function") {
+ var inputID = "button_" + module + "_" + method;
+ var str = '\
+ <tr>\
+ <td align="right"><input class="fakerButton" type="button" value="' + module + "." + method +'" id="' + inputID + '"/></td>\
+ <td><input size="100" id="' + inputID + "_value" + '" type="input" value="' + faker[module][method]() + '"></td>\
+ </tr>';
+ $('#buttons').append(str);
+ }
+ }
+ }
+
+ $('.fakerButton').click(function(e){
+ var inputID = $(this).attr('id') + "_value";
+ var arr = inputID.split('_');
+ var module = arr[1];
+ var method = arr[2];
+ $('#' + inputID).attr('value', faker[module][method]())
+ });
+ }
+
+ drawButtons();
+
+ var _locales = [];
+
+ for(var locale in faker.locales) {
+ _locales.push({ name: locale, title: faker.locales[locale].title})
+ }
+
+ _locales = _locales.sort(function(a, b){
+ if (a.title < b.title)
+ return -1;
+ if (a.title > b.title)
+ return 1;
+ return 0;
+ });
+
+ _locales.forEach(function(item){
+
+ $('.locale').append('<option value="' + item.name+ '">' + item.title + '</option>');
+ });
+
+
+ $('.locale').val("en");
+
+ $('.locale').change(function(e){
+ var locale = $(this).attr('value');
+ faker.locale = locale;
+ drawButtons();
+ generateName();
+ });
+
+
+ function generateName () {
+
+ // make name contextual to username and email
+ var firstName = faker.name.firstName(),
+ lastName = faker.name.lastName();
+
+ var dob = faker.date.past(50, new Date("Sat Sep 20 1992 21:35:02 GMT+0200 (CEST)"));
+ dob = dob.getFullYear() + "-" + dob.getMonth() + "-" + dob.getDate();
+ $('#inputName').attr("value", faker.name.findName(firstName, lastName));
+ $('#inputDob').attr("value", dob);
+ $('#inputStreetAddress').attr("value", faker.address.streetAddress());
+ $('#inputCityStateZip').attr("value", faker.address.city() + ", " + faker.address.state_abbr() + " " + faker.address.zipCode());
+ $('#inputPhone').attr("value", faker.phone.phoneNumber());
+ $('#inputUsername').attr("value", faker.internet.userName(firstName, lastName));
+ $('#inputPassword').attr("value", faker.internet.password());
+ $('#inputEmail').attr("value", faker.internet.email(firstName, lastName));
+ $('#imageAvatar').attr("src", faker.internet.avatar());
+
+ };
+
+ $('#generateName').click(function(){
+ generateName();
+ });
+ generateName();
+ });
+
+ </script>
+ </head>
+ <body>
+
+ <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="http://github.com/marak/faker.js">faker.js - generate massive amounts of fake data in node.js and the browser</a>
+ </div>
+ <div class="collapse navbar-collapse">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="http://github.com/marak/faker.js">Code</a></li>
+ <li><a href="http://github.com/marak/faker.js/issues">Issues</a></li>
+
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div>
+ </div>
+
+ <div class="container">
+ <form class="form-horizontal">
+ <fieldset>
+ <br/>
+ <br/>
+ <br/>
+
+ <h2>Generate Person</h2>
+ <br/>
+
+ <div class="form-group">
+ <label for="select" class="col-lg-2 control-label">Locality</label>
+ <div class="col-lg-10">
+ <select class="form-control locale">
+ </select>
+ <br>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <div class="col-lg-10 col-lg-offset-2">
+ <button id="generateName" type="button" class="btn btn-primary">Generate New</button>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="inputName" class="col-lg-2 control-label">Name:</label>
+ <div class="col-lg-10">
+ <input type="text" class="form-control" id="inputName" placeholder="Name">
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="inputDob" class="col-lg-2 control-label">Date of Birth:</label>
+ <div class="col-lg-10">
+ <input type="input" class="form-control" id="inputDob" placeholder="Date of Birth">
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="inputStreetAddress" class="col-lg-2 control-label">Street Address:</label>
+ <div class="col-lg-10">
+ <input type="input" class="form-control" id="inputStreetAddress" placeholder="Street Address">
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="inputCityStateZip" class="col-lg-2 control-label">City, State Zip:</label>
+ <div class="col-lg-10">
+ <input type="input" class="form-control" id="inputCityStateZip" placeholder="City, State Zip">
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="inputCountry" class="col-lg-2 control-label">Country:</label>
+ <div class="col-lg-10">
+ <input type="input" class="form-control" id="inputCountry" placeholder="Country">
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="inputPhone" class="col-lg-2 control-label">Phone Number:</label>
+ <div class="col-lg-10">
+ <input type="input" class="form-control" id="inputPhone" placeholder="Phone Number">
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="inputUsername" class="col-lg-2 control-label">Username:</label>
+ <div class="col-lg-10">
+ <input type="input" class="form-control" id="inputUsername" placeholder="Username">
+ </div>
+ </div>
+
+
+ <div class="form-group">
+ <label for="inputPassword" class="col-lg-2 control-label">Password:</label>
+ <div class="col-lg-10">
+ <input type="input" class="form-control" id="inputPassword" placeholder="Password">
+ </div>
+ </div>
+
+
+ <div class="form-group">
+ <label for="inputEmail" class="col-lg-2 control-label">Email:</label>
+ <div class="col-lg-10">
+ <input type="input" class="form-control" id="inputEmail" placeholder="Email">
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="imageAvatar" class="col-lg-2 control-label">Avatar:</label>
+ <div class="col-lg-10">
+ <img class="" id="imageAvatar"/>
+ </div>
+ </div>
+
+ </fieldset>
+ </form>
+ </div>
+
+ <div class="container">
+ <h2>API Reference</h2>
+ <p>Click button to generate new value</p>
+ Locality: <select class="form-control locale"></select>
+ <table class="table table-striped table-hover buttonsTable">
+ <thead>
+ <tr>
+ <th>API Call</th>
+ <th>Result</th>
+ </tr>
+ </thead>
+ <tbody id="buttons">
+ </tbody>
+ </table>
+ </div>
+
+ <div id="footer">
+ <div class="container">
+ <strong>protip</strong>: open your console on this page and run: <code>console.log(faker); var randomName = faker.name.findName(); console.log(randomName);</code><hr/>
+ </div>
+ </div>
+
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-08 11:54:57 +0000