-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add back the live UUID generator
- Loading branch information
1 parent
2f5c7f8
commit 4bdb9ff
Showing
12 changed files
with
266 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <hr/> | ||
| <div> | ||
| <h2>Online (short) UUID generator</h2> | ||
| <p>Press the buttons below to generate your short uuid codes:</p> | ||
| Length: <input type="number" id="uuidLen" name="uuidLen" min="1" max="32" value="6" style="width: 34px;"> | ||
| <button id="genRandom" class="btn-success"> | ||
| Generate Random Short UUID | ||
| </button> | ||
| <p> | ||
| <strong>Your random UUID:</strong> <span id="randomResult" class="m-4"> </span> | ||
| </p> | ||
| <button id="genSequential" class="btn-success"> | ||
| Generate Random Sequential Short UUID | ||
| </button> | ||
| <p> | ||
| <strong>Your sequential UUID:</strong> <span id="sequentialResult" class="m-4"></span> | ||
| </p> | ||
| <h2>Random Color generator</h2> | ||
| <p> | ||
| The ability to set a custom dictionary and length means that Short Unique ID is useful for many other cases such as this random color generator. | ||
| </p> | ||
| <pre> | ||
| <code> | ||
| <span style="color: #88846F">// instantiate using a dictionary containing all 16 valid hex characters</span> | ||
|
|
||
| <span class="hljs-keyword">var</span> uid = <span class="hljs-keyword">new</span> ShortUniqueId({ | ||
| dictionary: [ | ||
| <span class="hljs-string">'0'</span>, <span class="hljs-string">'1'</span>, <span class="hljs-string">'2'</span>, <span class="hljs-string">'3'</span>, | ||
| <span class="hljs-string">'4'</span>, <span class="hljs-string">'5'</span>, <span class="hljs-string">'6'</span>, <span class="hljs-string">'7'</span>, | ||
| <span class="hljs-string">'8'</span>, <span class="hljs-string">'9'</span>, <span class="hljs-string">'A'</span>, <span class="hljs-string">'B'</span>, | ||
| <span class="hljs-string">'C'</span>, <span class="hljs-string">'D'</span>, <span class="hljs-string">'E'</span>, <span class="hljs-string">'F'</span>, | ||
| ], | ||
| }); | ||
|
|
||
| <span style="color: #88846F">// or using default dictionaries available since v4.3+</span> | ||
|
|
||
| <span class="hljs-keyword">var</span> uid = <span class="hljs-keyword">new</span> ShortUniqueId({ dictionary: <span class="hljs-string">'hex'</span> }); | ||
|
|
||
| <span style="color: #88846F">// then taste the rainbow 🌈</span> | ||
|
|
||
| <span class="hljs-keyword">var</span> color = <span class="hljs-string">'#'</span> + uid.randomUUID(6) + <span class="hljs-string">';'</span>; | ||
| </code> | ||
| </pre> | ||
| <p> | ||
| <button id="genColor" class="btn-success"> | ||
| Generate Random Color | ||
| </button> | ||
| <strong>Your random color:</strong> <span id="colorResult" class="m-4"></span> | ||
| </p> | ||
| <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.slim.min.js"></script> | ||
| <script> | ||
| window.onload = function() { | ||
| var uid = new ShortUniqueId({ debug: true }); | ||
| var colorUid = new ShortUniqueId({ dictionary: 'hex' }); | ||
| $('#genRandom').click(function(e){ | ||
| e.preventDefault(); | ||
| $('#randomResult').html(uid.randomUUID(parseInt($('#uuidLen')[0].value))); | ||
| }); | ||
| $('#genSequential').click(function(e){ | ||
| e.preventDefault(); | ||
| $('#sequentialResult').html(uid.sequentialUUID()); | ||
| }); | ||
| $('#genColor').click(function(e){ | ||
| e.preventDefault(); | ||
| var color = colorUid.randomUUID(6); | ||
| $('#colorResult').html('#' + color); | ||
| $('#colorResult').attr('style', 'color: #' + color + ';'); | ||
| }); | ||
| }; | ||
| </script> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <hr/> | ||
| <div> | ||
| <h2>Online (short) UUID generator</h2> | ||
| <p>Press the buttons below to generate your short uuid codes:</p> | ||
| Length: <input type="number" id="uuidLen" name="uuidLen" min="1" max="32" value="6" style="width: 34px;"> | ||
| <button id="genRandom" class="btn-success"> | ||
| Generate Random Short UUID | ||
| </button> | ||
| <p> | ||
| <strong>Your random UUID:</strong> <span id="randomResult" class="m-4"> </span> | ||
| </p> | ||
| <button id="genSequential" class="btn-success"> | ||
| Generate Random Sequential Short UUID | ||
| </button> | ||
| <p> | ||
| <strong>Your sequential UUID:</strong> <span id="sequentialResult" class="m-4"></span> | ||
| </p> | ||
| <h2>Random Color generator</h2> | ||
| <p> | ||
| The ability to set a custom dictionary and length means that Short Unique ID is useful for many other cases such as this random color generator. | ||
| </p> | ||
| <pre> | ||
| <code> | ||
| <span style="color: #88846F">// instantiate using a dictionary containing all 16 valid hex characters</span> | ||
|
|
||
| <span class="hljs-keyword">var</span> uid = <span class="hljs-keyword">new</span> ShortUniqueId({ | ||
| dictionary: [ | ||
| <span class="hljs-string">'0'</span>, <span class="hljs-string">'1'</span>, <span class="hljs-string">'2'</span>, <span class="hljs-string">'3'</span>, | ||
| <span class="hljs-string">'4'</span>, <span class="hljs-string">'5'</span>, <span class="hljs-string">'6'</span>, <span class="hljs-string">'7'</span>, | ||
| <span class="hljs-string">'8'</span>, <span class="hljs-string">'9'</span>, <span class="hljs-string">'A'</span>, <span class="hljs-string">'B'</span>, | ||
| <span class="hljs-string">'C'</span>, <span class="hljs-string">'D'</span>, <span class="hljs-string">'E'</span>, <span class="hljs-string">'F'</span>, | ||
| ], | ||
| }); | ||
|
|
||
| <span style="color: #88846F">// or using default dictionaries available since v4.3+</span> | ||
|
|
||
| <span class="hljs-keyword">var</span> uid = <span class="hljs-keyword">new</span> ShortUniqueId({ dictionary: <span class="hljs-string">'hex'</span> }); | ||
|
|
||
| <span style="color: #88846F">// then taste the rainbow 🌈</span> | ||
|
|
||
| <span class="hljs-keyword">var</span> color = <span class="hljs-string">'#'</span> + uid.randomUUID(6) + <span class="hljs-string">';'</span>; | ||
| </code> | ||
| </pre> | ||
| <p> | ||
| <button id="genColor" class="btn-success"> | ||
| Generate Random Color | ||
| </button> | ||
| <strong>Your random color:</strong> <span id="colorResult" class="m-4"></span> | ||
| </p> | ||
| <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.slim.min.js"></script> | ||
| <script> | ||
| window.onload = function() { | ||
| var uid = new ShortUniqueId({ debug: true }); | ||
| var colorUid = new ShortUniqueId({ dictionary: 'hex' }); | ||
| $('#genRandom').click(function(e){ | ||
| e.preventDefault(); | ||
| $('#randomResult').html(uid.randomUUID(parseInt($('#uuidLen')[0].value))); | ||
| }); | ||
| $('#genSequential').click(function(e){ | ||
| e.preventDefault(); | ||
| $('#sequentialResult').html(uid.sequentialUUID()); | ||
| }); | ||
| $('#genColor').click(function(e){ | ||
| e.preventDefault(); | ||
| var color = colorUid.randomUUID(6); | ||
| $('#colorResult').html('#' + color); | ||
| $('#colorResult').attr('style', 'color: #' + color + ';'); | ||
| }); | ||
| }; | ||
| </script> | ||
| </div> |
Oops, something went wrong.