In the current article I show how to make a simple adder and remover with jQuery to a list and how to generate a randomizator (not a real one, though!) with jQuery.
We have three divs – my_main, my_adder, my_remover and every time we click on one of the first two, we get a result in the last one. As simple as that. In the result we get the possibility to generate a random string with increasing lenght (up to some limits). The random string is achieved through (Math.random() + 1).toString(36).substr(2,counter); The idea is that a random number is converted to a 36 digit system and taken as string. That is why we have limits in the length. The “+1” is to avoid some possibility of getting a small result.
So, this is how the thing looks like:
And its JS code is here:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function () { var counter = 1; $("#my_adder").click(function(){ var js_random = (Math.random() + 1).toString(36).substr(2,counter); counter++; $("#my_list").append("<li>"+ js_random +"</li>"); }); $("#my_remover").click(function(){ $("#my_list li:last-child").remove(); counter--; }); }); |
If you are willing to see the CSS and the HTML – check the GitHub account!
That is all! 😀