diff --git a/README.md b/README.md index a0e5a80..c150e99 100755 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ + ## Random Quote WebApp + * Generates random quotes for users with the click of a button. * Developed with JavaScript, HTML5, CSS3, and Bootstrap. * Twitter widget integrated to enable user to tweet the generated quote. diff --git a/css/styles.css b/css/styles.css index d3d3f8b..9d5c0d1 100755 --- a/css/styles.css +++ b/css/styles.css @@ -1,3 +1,7 @@ +body { + height: calc(100vh - 61px); +} + /* misc element styling */ .jumbotron h1, .jumbotron p.quote, @@ -20,7 +24,8 @@ .jumbotron { background: url('../img/ignite.jpg'); background-size: cover; - height: 900px; + height: 100%; + margin-bottom: 0; } /* quote & author row */ diff --git a/js/scripts.js b/js/scripts.js index e6868e3..b10c46b 100755 --- a/js/scripts.js +++ b/js/scripts.js @@ -1,13 +1,13 @@ //Quotes array is an arrar of arrays. First element of nested array is a quote, second element is the author. var quotes = [ - ['The best preparation for tomorrow is doing your best today.','H. Jackson Brown, Jr.'], - ['The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.','Helen Keller'], - ['I can\'t change the direction of the wind, but I can adjust my sails to always reach my destination.','Jimmy Dean'], - ['Start by doing what\'s necessary; then do what\'s possible; and suddenly you are doing the impossible.','Francis of Assisi'], + ['The best preparation for tomorrow is doing your best today.', 'H. Jackson Brown, Jr.'], + ['The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.', 'Helen Keller'], + ['I can\'t change the direction of the wind, but I can adjust my sails to always reach my destination.', 'Jimmy Dean'], + ['Start by doing what\'s necessary; then do what\'s possible; and suddenly you are doing the impossible.', 'Francis of Assisi'], ['Perfection is not attainable, but if we chase perfection we can catch excellence.', 'Vince Lombardi'], - ['We must let go of the life we have planned, so as to accept the one that is waiting for us.','Joseph Campbell'], - ['Try to be a rainbow in someone\'s cloud.','Maya Angelou'], - ['Nothing is impossible, the word itself says \'I\'m possible\'.','Audrey Hepburn'], + ['We must let go of the life we have planned, so as to accept the one that is waiting for us.', 'Joseph Campbell'], + ['Try to be a rainbow in someone\'s cloud.', 'Maya Angelou'], + ['Nothing is impossible, the word itself says \'I\'m possible\'.', 'Audrey Hepburn'], ['If opportunity doesn\'t knock, build a door.', 'Milton Berle'], ['We know what we are, but know not what we may be.', 'William Shakespeare'], ['Change your thoughts and you change the world.', 'Norman Vincent Peale'], @@ -27,13 +27,13 @@ var quotes = [ // ** - indicates code hasn't been written yet -$(document).ready(function() { +$(document).ready(function () { /** * random index generator * @return {num} [random index between zero and 1 less than the length of the quotes array] */ - var randIndexGen = function() { + var randIndexGen = function () { return Math.floor(Math.random() * quotes.length); }; @@ -42,7 +42,7 @@ $(document).ready(function() { * @param {num} index - a random index from the randIndexGen function * @return {string} an html string that will replace the contents of the '.quote' class */ - var quoteGen = function(index) { + var quoteGen = function (index) { return "\"" + quotes[index][0] + "\""; }; @@ -51,7 +51,7 @@ $(document).ready(function() { * @param {num} index - a random index from the randIndexGen function * @return {string} an html string that will replace the contents of the '.author' class */ - var authorGen = function(index) { + var authorGen = function (index) { return "- " + quotes[index][1] + ""; }; @@ -60,26 +60,25 @@ $(document).ready(function() { * @param {string} quoteText - text passed in from the '.quote' class * @return {string} tweet web intent query parameter */ - var tweetBtnParamGen = function(quoteText) { + var tweetBtnParamGen = function (quoteText) { var expression = /\s+/gi; quoteText = quoteText.replace(expression, "%20"); quoteText = "https://twitter.com/intent/tweet?text=" + quoteText; - console.log(quoteText); return quoteText; }; - var updateTweet = function(quoteStr) { + var updateTweet = function (quoteStr) { $('.twitter-share-button').attr('href', quoteStr); }; $(".jumbotron").hide().fadeIn(2000); $('.title').hide().delay(1500).fadeIn(2000); - var randIndex = randIndexGen(); - var quote = quoteGen(randIndex); - var author = authorGen(randIndex); + var randIndex = randIndexGen(); + var quote = quoteGen(randIndex); + var author = authorGen(randIndex); - $('.quote').html(quote).hide().delay(3000).fadeIn(2000); + $('.quote').html(quote).hide().delay(3000).fadeIn(2000); $('.author').html(author).hide().delay(3000).fadeIn(2000); $('#btn-ignite').hide().delay(5000).fadeIn(2000); $('#tweet-btn').hide().delay(5000).fadeIn(2000); @@ -92,7 +91,7 @@ $(document).ready(function() { quoteVal = tweetBtnParamGen(quoteVal); updateTweet(quoteVal); - $('#btn-ignite').click(function() { + $('#btn-ignite').click(function () { //Generate a random index to extract an element within the quotes array var randIndex = randIndexGen(); @@ -106,7 +105,7 @@ $(document).ready(function() { // 2. Append inspiration quote inside of the '.quote' class // 3. Append quote author inside of the '.author' class - $('.quote').fadeOut('slow', function() { + $('.quote').fadeOut('slow', function () { $(this).html(quote).hide().fadeIn(2000); var quoteVal = $(this).text(); quoteVal = tweetBtnParamGen(quoteVal); @@ -114,20 +113,20 @@ $(document).ready(function() { $('#tweet-btn iframe').remove(); var tweetBtn = $('') - .addClass('twitter-share-button') - .attr({'href': quoteVal, 'data-size': 'large', 'data-hashtags': 'quote'}); + .addClass('twitter-share-button') + .attr({ 'href': quoteVal, 'data-size': 'large', 'data-hashtags': 'quote' }); - $('#tweet-btn').append(tweetBtn); - twttr.widgets.load(); //function revaulates tags only, not