Skip to content

Fixed image size #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Abdulqudus001 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixed image size #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
7 changes: 6 additions & 1 deletion css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
body {
height: calc(100vh - 61px);
}

/* misc element styling */
.jumbotron h1,
.jumbotron p.quote,
Expand All @@ -20,7 +24,8 @@
.jumbotron {
background: url('../img/ignite.jpg');
background-size: cover;
height: 900px;
height: 100%;
margin-bottom: 0;
}

/* quote & author row */
Expand Down
57 changes: 28 additions & 29 deletions js/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'],
Expand All @@ -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);
};

Expand All @@ -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 "<strong>\"</strong>" + quotes[index][0] + "<strong>\"</strong>";
};

Expand All @@ -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 "- <em>" + quotes[index][1] + "</em>";
};

Expand All @@ -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);
Expand All @@ -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();
Expand All @@ -106,28 +105,28 @@ $(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);

$('#tweet-btn iframe').remove();

var tweetBtn = $('<a></a>')
.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 <a> tags only, not <iframe> tags - hence the reason for line 113
$('#tweet-btn').append(tweetBtn);
twttr.widgets.load(); //function revaulates <a> tags only, not <iframe> tags - hence the reason for line 113
});
$('.author').fadeOut('slow', function() {
$('.author').fadeOut('slow', function () {
$(this).html(author).hide().fadeIn(2000);
});
$('#btn-ignite').fadeOut('slow', function() {
$(this).hide().delay(2000).fadeIn(2000);
$('#btn-ignite').fadeOut('slow', function () {
$(this).hide().fadeIn(2000);
});
$('#tweet-btn').fadeOut('slow', function() {
$(this).hide().delay(2000).fadeIn(2000);
$('#tweet-btn').fadeOut('slow', function () {
$(this).hide().fadeIn(2000);
});
});
});