JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/css/font-awesome.css">
CSS
button {
background: #fff;
border: 2px solid #fff;
padding: 8px;
margin: 0;
background: #ddf;
cursor: pointer;
}
button:hover {
border-color: #000;
}
button:active {
background: #000;
color: #fff;
}
/* Let's add some style with CSS3 and Font Awesome!!! */
button::before {
font-family:"FontAwesome";
content: "\f001";
padding-right: 8px;
}
JavaScript
// This script resembles the original. To see some extra bits of
// syntax that I would personally use, check out http://jsfiddle.net/g105b/6zfrq/6/
// Declare all array elements using square-bracket notation.
var nameArray= [
"fuck",
"I think that's a stupid number",
"Jesus God",
"Hold on, let me finish",
"No, I have no faith in aliens",
"It's also possible you could walk through the wall",
"By the way, the heart is an incredible organ",
"There's very little activity out here",
"Wow, I wanna hit that",
"Idiot",
"There's no more Mexicans here, how in the hell am I gunna keep my yard?",
"Political Bullshit",
"This is Wacko",
];
// Define variables first, at the top of the function.
var audio = document.createElement("audio");
var baseurl = "http://dl.dropbox.com/u/109430408/bob/";
var i;
var btn;
// Define the button's click event here.
var clickButton = function(e) {
// 'this' relates to the clicked button.
var index = this.getAttribute("data-i");
// Set the audio's src attribute to the correct URL.
audio.src = baseurl + index + ".ogg";
audio.play();
}
for (i=0; i < nameArray.length; i++) {
// Create the button...
btn = document.createElement("button");
// Store the index on the button itself...
btn.setAttribute("data-i", i);
// Set the click callback to the clickButton function.
btn.addEventListener("click", clickButton);
// Set the text to that of the array.
btn.textContent = nameArray[i];
// Add the button to the body.
document.body.appendChild(btn);
};