How to make your first randomizer
Welcome! If you're here, it's most likely because you've seen one of those snazzy randomizers that pull a character or scenario out of a hat, and you'd like to make your own. This tutorial(?) provides you with a simple randomizer template written in JavaScript and explains how to edit it. This tutorial requires NO coding experience.
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.
Use cases
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.
- babys-first-randomizer.html:
- Right-click and save as a .html file. You can also click through to see what it does.
How to edit your randomizer
The file babys-first-randomizer.html is a simple JavaScript randomizer that returns a random fruit on the click of a button. In this tutorial, I'm going to edit it to return animals instead. You can have it return whatever you'd like.
First, open babys-first-randomizer.html in your text editor. At the same time, drag the file into a browser window. I recommend Chrome or Firefox because they have built-in tools for troubleshooting JavaScript. You should now have access to the code while also being able to view the output. If you make any changes to the file, you can simply reload the page in your browser to see the ~fruits~ of your labor.
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)];
).
Tips
- Want to learn more about arrays, variables, or anything else mentioned in this tutorial? I recommend w3schools.com for reference pages and tutorials on JavaScript, HTML, CSS, and more. At least half of coding is knowing how to look stuff up!
- If you can't figure out what's broken, right click the page in Chrome or Firefox and select "Inspect Element." Toggle over to the "Console." This will show you not only whether there are any Javascript errors but what lines they occur on.
Further questions
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.,
givenFruit1
andgivenFruit2
. 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 ofgivenFruit2
whilegivenFruit1 == givenFruit2
, i.e., as long as the two variables hold the same value, it'll try again. Consult w3schools' JavaScript reference for how to write a do/while. - 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 withdisplay: 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.) - Why is this tutorial for JavaScript and not PHP?
- You caught me! I write my own randomizers in PHP! This tutorial is in JavaScript because it works just as well for this purpose, is more accessible, and is easier to troubleshoot as a client-side language. I thought about teaching people PHP when I can't see their screens, and it made my head hurt.
- 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.