How to make your first randomizer
This tutorial contains vocabulary and explanations for those who are interested in using this as a springboard to learn more coding. If you just want to make a simple randomizer, no thoughts head empty, you can skim to the directions highlighted like this.
If you're in need of ideas as to what you'd make a randomizer for, here are a few:
- Items in your wardrobe to decide what you'll wear each day
- Favorite recipes to revisit
- Books on your to-read list
What you'll need
- A source code editor or plain text editor:
- I recommend downloading the free software Sublime Text, which makes it a lot easier to see what you're doing and where you're throwing errors. However, Notepad or TextEdit (in plain text mode) will also work.
- Right-click and save as a .html file. You can also click through to see what it does.
How to edit your randomizer
To change the list of values returned, we need to edit the array.
const fruits = ["apple", "orange", "banana", "peach", "lime", "kiwi"];
This array is made up of text strings, each of which is contained inside a pair of quotation marks. Go ahead and change the fruits in the array to anything you want and as many as you want, but make sure each value is inside quotes, separated by commas outside the quotes.
const fruits = ["rat", "ox", "tiger", "rabbit", "dragon", "snake", "horse", "sheep", "monkey", "rooster", "dog", "boar"];
Save your file and reload the page in your browser. Now when you click "Give me a fruit!", you should get your new values. Ta-dah! You've made a randomizer. You're done.
But wait! The button still says "Give me a fruit!" To change that, you want to edit this line here:
<button onclick="giveMeFruit()">Give me a fruit!</button>
Change the "Give me a fruit!" text between the button tags to whatever you'd like.
<button onclick="giveMeFruit()">Give me a Chinese zodiac animal!</button>
Save and reload the page. And once again, you are done!
"But it still says
fruits all over?" The end user won't see your variables, but if it will make you feel better, go ahead and change them; just make sure that if you change it in your declaration (
const fruits), you also change it inside your function (
fruits[Math.floor(Math.random() * fruits.length)];).
As far as I'm concerned, we're done! That's your first randomizer! But I suspect you still have questions, so here are some nudges in the right direction. You can consult w3schools.com for details on most of these.
- How do I share my randomizer with other people?
- You can upload it to a web host ($), or you can share it as a downloadable file through Mediafire, Google Drive, etc. You could probably run this code on a custom Tumblr page, too, but I haven't tried it because I have web hosting. :P
- How do I randomize two things from the same array, e.g., character 1/character 2?
- Use two variables in your function, e.g.,
givenFruit2. One option is to simply duplicate the line, but it's possible both will be assigned the same value (selfcest). I'd use a do/while that (re)rolls the value of
- How do I randomize two things from different arrays, e.g., character in location?
- Add a second array and a second variable declaration in your function. Then edit the output line to be something like
document.getElementById("result").innerHTML = character + " in " + location;. Learn more about concatenating strings.
- How do I center my randomizer/make it look pretty?
- Use CSS to style your HTML. Center the paragraph tag with
text-align: center. Center the button with
display: block; margin: 0 auto. Consult w3schools' CSS reference for how to apply these and other styles. (I'd start with inline CSS or internal CSS to keep things simple.)
- Can I ask you for more help?
- No. ♥ idk Within reason, probably. Find me on Twitter @vilevelns.
That's all, folks!
If you enjoyed this tutorial and have $$ to spare, please consider donating to an organization that brings educational opportunity, digital literacy, and/or computer science to disadvantaged or marginalized youth, such as She's the First or Black Girls Code.