Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 18, 2015 21:22
Show Gist options
  • Save anonymous/07147d4115a97690fe5f to your computer and use it in GitHub Desktop.
Save anonymous/07147d4115a97690fe5f to your computer and use it in GitHub Desktop.
Download ZIP
Yo Mama! Solution // source http://jsbin.com/movuhepoci
Raw
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Yo Mama! Solution</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="styles/main.css">
<style id="jsbin-css">
body {
background-color: #356C9E;
}
.main {
max-width: 960px;
margin: 10em auto;
text-align: center;
}
.joke-button {
font-size: 2em;
padding: 0.5em 1em;
border: none;
background-color: #27A97F;
color: #ffffff;
box-shadow: 0 5px 0 #289270;
outline: none;
margin-bottom: 2em;
}
.joke-text {
margin: 0;
font-size: 2em;
color: #ffffff;
font-family: 'Slabo 27px';
}
</style>
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<main class="main">
<button class="joke-button">Joke!</button>
<p class="joke-text"></p>
</main>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="scripts/speak.js"></script>
<script src="scripts/main.js"></script>
<script id="jsbin-javascript">
// Jokes will be an array of jokes we fetch from the server and display
// on the screen.
var jokes;
// The server url from which we will fetch jokes
var jokesUrl = 'https://demo8670611.mockable.io/mama';
/**
* Fetches jokes from the server
*/
function fetchJokes() {
$.get(jokesUrl, populateJokes);
}
/**
* Retrieves a random joke from the jokes array
* @param {array} response Array of joke objects fetched from the server
*/
function populateJokes(response) {
// The `response` array from the server will contain all the joke
// objects we will use throughout the app.
jokes = response;
}
/**
* Displays a joke on the screen
* @param {object} jokeObject A joke from the jokes array
*/
function displayJoke(jokeObject) {
// `jokeObject` is an object, in order to get the text string for the
// joke, we need to access the `joke` property on the joke object.
var text = jokeObject.joke;
// The `hide` and `fadeIn` are used for the fade animation. `1000` is
// how long the fade animation will take in milliseconds. 1000ms = 1s.
$('.joke-text').hide().text(text).fadeIn(1000);
// When we display the joke, have the device speak it.
window.Speak.say(text);
}
/**
* Retrieves a random joke from the jokes array
* @returns {object} A joke from the jokes array
*/
function getRandomJoke() {
// Generate a random number between 0 and 1
var randomDecimal = Math.random();
// Transform the range to between 0 and the length of the jokes array
// ex: Between 0 and 10, if there are 10 jokes
var randomNumber = randomDecimal * jokes.length;
// Round the number down so we get a whole number.
// This way we can use the number as an index for the array. If the
// jokes array has 10 jokes, then the indices will be 0 through 9.
// ex: The range will be between 0 and 9, so 7.4 will become 7
var randomWholeNumber = Math.floor(randomNumber);
// Using `randomeWholeNumber` as an index in the jokes array, we will
// get a joke and return it.
return jokes[randomWholeNumber];
}
// Code we want to run when the page loads
$(function () {
// When the user clicks the joke button, we need to get a random joke
// from the jokes array, then display that joke on the screen.
$('.joke-button').on('click', function () {
var joke = getRandomJoke();
displayJoke(joke);
});
});
// We need to initially fetch jokes from the server
fetchJokes();
/**
* An object with text to speech functionality. We're adding the Speak class to
* the window, which means it's globally available for other modules.
*/
window.Speak = (function () {
/**
* PRIVATE VARIABLES
* -----------------
*/
// A browser check to make sure text to speech is supported
var textToSpeechIsEnabled = 'speechSynthesis' in window;
/**
* PRIVATE METHODS
* -----------------
*/
/**
* Uses text to voice javascript API to speak a string of text
* @param {string} text Some text for the device to speak
* @private
*/
function sayText(text) {
var message;
// First check to see if the device supports text to speech
if (textToSpeechIsEnabled) {
// Create a new speech message
message = new window.SpeechSynthesisUtterance(text);
// Use the speech API to speak the message
window.speechSynthesis.speak(message);
}
}
/**
* PUBLIC METHODS
* ----------------
*/
return {
say: sayText
};
})();
</script>
<script id="jsbin-source-css" type="text/css">body {
background-color: #356C9E;
}
.main {
max-width: 960px;
margin: 10em auto;
text-align: center;
}
.joke-button {
font-size: 2em;
padding: 0.5em 1em;
border: none;
background-color: #27A97F;
color: #ffffff;
box-shadow: 0 5px 0 #289270;
outline: none;
margin-bottom: 2em;
}
.joke-text {
margin: 0;
font-size: 2em;
color: #ffffff;
font-family: 'Slabo 27px';
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// Jokes will be an array of jokes we fetch from the server and display
// on the screen.
var jokes;
// The server url from which we will fetch jokes
var jokesUrl = 'https://demo8670611.mockable.io/mama';
/**
* Fetches jokes from the server
*/
function fetchJokes() {
$.get(jokesUrl, populateJokes);
}
/**
* Retrieves a random joke from the jokes array
* @param {array} response Array of joke objects fetched from the server
*/
function populateJokes(response) {
// The `response` array from the server will contain all the joke
// objects we will use throughout the app.
jokes = response;
}
/**
* Displays a joke on the screen
* @param {object} jokeObject A joke from the jokes array
*/
function displayJoke(jokeObject) {
// `jokeObject` is an object, in order to get the text string for the
// joke, we need to access the `joke` property on the joke object.
var text = jokeObject.joke;
// The `hide` and `fadeIn` are used for the fade animation. `1000` is
// how long the fade animation will take in milliseconds. 1000ms = 1s.
$('.joke-text').hide().text(text).fadeIn(1000);
// When we display the joke, have the device speak it.
window.Speak.say(text);
}
/**
* Retrieves a random joke from the jokes array
* @returns {object} A joke from the jokes array
*/
function getRandomJoke() {
// Generate a random number between 0 and 1
var randomDecimal = Math.random();
// Transform the range to between 0 and the length of the jokes array
// ex: Between 0 and 10, if there are 10 jokes
var randomNumber = randomDecimal * jokes.length;
// Round the number down so we get a whole number.
// This way we can use the number as an index for the array. If the
// jokes array has 10 jokes, then the indices will be 0 through 9.
// ex: The range will be between 0 and 9, so 7.4 will become 7
var randomWholeNumber = Math.floor(randomNumber);
// Using `randomeWholeNumber` as an index in the jokes array, we will
// get a joke and return it.
return jokes[randomWholeNumber];
}
// Code we want to run when the page loads
$(function () {
// When the user clicks the joke button, we need to get a random joke
// from the jokes array, then display that joke on the screen.
$('.joke-button').on('click', function () {
var joke = getRandomJoke();
displayJoke(joke);
});
});
// We need to initially fetch jokes from the server
fetchJokes();
/**
* An object with text to speech functionality. We're adding the Speak class to
* the window, which means it's globally available for other modules.
*/
window.Speak = (function () {
/**
* PRIVATE VARIABLES
* -----------------
*/
// A browser check to make sure text to speech is supported
var textToSpeechIsEnabled = 'speechSynthesis' in window;
/**
* PRIVATE METHODS
* -----------------
*/
/**
* Uses text to voice javascript API to speak a string of text
* @param {string} text Some text for the device to speak
* @private
*/
function sayText(text) {
var message;
// First check to see if the device supports text to speech
if (textToSpeechIsEnabled) {
// Create a new speech message
message = new window.SpeechSynthesisUtterance(text);
// Use the speech API to speak the message
window.speechSynthesis.speak(message);
}
}
/**
* PUBLIC METHODS
* ----------------
*/
return {
say: sayText
};
})();</script></body>
</html>
Raw
jsbin.movuhepoci.css
body {
background-color: #356C9E;
}
.main {
max-width: 960px;
margin: 10em auto;
text-align: center;
}
.joke-button {
font-size: 2em;
padding: 0.5em 1em;
border: none;
background-color: #27A97F;
color: #ffffff;
box-shadow: 0 5px 0 #289270;
outline: none;
margin-bottom: 2em;
}
.joke-text {
margin: 0;
font-size: 2em;
color: #ffffff;
font-family: 'Slabo 27px';
}
Raw
jsbin.movuhepoci.js
// Jokes will be an array of jokes we fetch from the server and display
// on the screen.
var jokes;
// The server url from which we will fetch jokes
var jokesUrl = 'https://demo8670611.mockable.io/mama';
/**
* Fetches jokes from the server
*/
function fetchJokes() {
$.get(jokesUrl, populateJokes);
}
/**
* Retrieves a random joke from the jokes array
* @param {array} response Array of joke objects fetched from the server
*/
function populateJokes(response) {
// The `response` array from the server will contain all the joke
// objects we will use throughout the app.
jokes = response;
}
/**
* Displays a joke on the screen
* @param {object} jokeObject A joke from the jokes array
*/
function displayJoke(jokeObject) {
// `jokeObject` is an object, in order to get the text string for the
// joke, we need to access the `joke` property on the joke object.
var text = jokeObject.joke;
// The `hide` and `fadeIn` are used for the fade animation. `1000` is
// how long the fade animation will take in milliseconds. 1000ms = 1s.
$('.joke-text').hide().text(text).fadeIn(1000);
// When we display the joke, have the device speak it.
window.Speak.say(text);
}
/**
* Retrieves a random joke from the jokes array
* @returns {object} A joke from the jokes array
*/
function getRandomJoke() {
// Generate a random number between 0 and 1
var randomDecimal = Math.random();
// Transform the range to between 0 and the length of the jokes array
// ex: Between 0 and 10, if there are 10 jokes
var randomNumber = randomDecimal * jokes.length;
// Round the number down so we get a whole number.
// This way we can use the number as an index for the array. If the
// jokes array has 10 jokes, then the indices will be 0 through 9.
// ex: The range will be between 0 and 9, so 7.4 will become 7
var randomWholeNumber = Math.floor(randomNumber);
// Using `randomeWholeNumber` as an index in the jokes array, we will
// get a joke and return it.
return jokes[randomWholeNumber];
}
// Code we want to run when the page loads
$(function () {
// When the user clicks the joke button, we need to get a random joke
// from the jokes array, then display that joke on the screen.
$('.joke-button').on('click', function () {
var joke = getRandomJoke();
displayJoke(joke);
});
});
// We need to initially fetch jokes from the server
fetchJokes();
/**
* An object with text to speech functionality. We're adding the Speak class to
* the window, which means it's globally available for other modules.
*/
window.Speak = (function () {
/**
* PRIVATE VARIABLES
* -----------------
*/
// A browser check to make sure text to speech is supported
var textToSpeechIsEnabled = 'speechSynthesis' in window;
/**
* PRIVATE METHODS
* -----------------
*/
/**
* Uses text to voice javascript API to speak a string of text
* @param {string} text Some text for the device to speak
* @private
*/
function sayText(text) {
var message;
// First check to see if the device supports text to speech
if (textToSpeechIsEnabled) {
// Create a new speech message
message = new window.SpeechSynthesisUtterance(text);
// Use the speech API to speak the message
window.speechSynthesis.speak(message);
}
}
/**
* PUBLIC METHODS
* ----------------
*/
return {
say: sayText
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment