How to build your own headline generator
Try this out
Now to decode it
Before I try to code anything, I do a quick Google search for prior art. Typing in “headline generator GitHub” rendered some simple code written by Jeff Hobbs in Javascript and all housed on one webpage. Not the most elegant, but not complicated, and therefore good for a tutorial. Download Sublime Text or TextWrangler to edit code.
The machinery behind the headline generator is written in jQuery, which is a library of JavaScript. Don’t be frightened. Try to notice the patterns–the color coding helps–and it’s kind of like a recipe that reads and is modified from top to bottom.
1. This may look like gibberish but see how the nouns, scandals and reasons are laid out like [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’ ].
2. Then, they are randomly shuffled up.
3. Finally, the code places the randomly shuffled randNoun, randScandal and randReason in sequence into the page to create the final headline.
Next, for your Javascript to work, you need to point your website to the guts of jQuery. It’s hosted at http://code.jquery.com/jquery-1.10.1.min.js. (Click through to see the blueprint behind jQuery.)
Make sure to wrap the above in HTML script tags To make the headline and button centered in the page, we style each of their containers (one called container, one called wrap) by using some simple CSS.
Finally, we need to add HTML to the <body> of the website so the headline and button will display (this goes before the Javascript).
And we place the button below the Javascript. N.B. onclick=”location.reload()” is one of many ways to get this button to fire the headline generator multiple times. You’ll quickly notice there are plenty of different ways to code the same thing.
Got a better/cleaner/faster way to code a headline generator? Tell us!
