Hosted Project:
https://js-beginners.github.io/random-quotes-project/Github Source Files:
https://github.com/JS-Beginners/random-quotes-project This Random Quotes project is fairly simple. It calls for you to access the properties on an object that's embedded inside of an Array. When the “Generate Quote” button is pressed, it triggers a change in quote and the author who said it.New things learned or refreshed:
This project was fairly simple. However, John wrote out his solution using an immediately invoked function expression (IIFE). So, I changed my solution to do the same. It feels good learning how and why IIFEs can be useful. He makes sure to continually explain their purpose, which is to wrap our functions in IIFEs so we won't contaminate the global variable space.Time to code:
This took about 5 minutes to code.Biggest take away:
None really. It's good to see IIFEs being used on small problems so when I see them on larger problems, or in libraries like jQuery, I have a good guess as to why they exist.Your Turn!
What to accomplish:- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile (except for the quotes and author content of the array). - Implement the JavaScript code in your own
app.js file. - Add a link to your finished project below!
- When you click on the “Generate” button, you should see a new random quote and the corresponding author.
https://github.com/TamaraNC/quotes-generator
let quotes2 = [
{‘author’: ‘Nelson Mandel’, ‘quote’: ‘”The greatest glory in living lies not in never falling, but in rising every time we fall.”‘},
{‘author’: ‘Walt Disney’, ‘quote’: ‘”The way to get started is to quit talking and begin doing.”‘},
{‘author’: ‘Steve Jobs’, ‘quote’: ‘”Your time is limited, so don\’t waste it living someone else\’s life. Don\’t be trapped by dogma – which is living with the results of other people\’s thinking.”‘},
{‘author’: ‘Eleanor Roosevelt’, ‘quote’: ‘”If life were predictable it would cease to be life, and be without flavor.”‘},
{‘author’: ‘Oprah Winfrey’, ‘quote’: ‘”If you look at what you have in life, you\’ll always have more. If you look at what you don\’t have in life, you\’ll never have enough.”‘},
{‘author’: ‘James Cameron’, ‘quote’: ‘”If you set your goals ridiculously high and it\’s a failure, you will fail above everyone else\’s success.”‘},
{‘author’: ‘John Lennon’, ‘quote’: ‘”Life is what happens when you\’re busy making other plans.”‘}
];
const quoteText = document.querySelector(‘.quoteText’);
const authorName = document.querySelector(‘.authorName’);
const button = document.querySelector(‘.button’);
button.addEventListener(‘click’, getRandomQuote2);
function getRandomQuote2() {
let index = Math.floor(Math.random() * quotes2.length);
let randomQuote = quotes2[index].quote;
let randomAuthor = quotes2[index].author;
console.log(`Quote: ${randomQuote} | Author: ${randomAuthor}`);
quoteText.textContent = randomQuote;
authorName.textContent = randomAuthor;
}
//DECLARATION OF CONSTs
//Arr of quotes
const quoteStatements = [
{
statement: “I think the perfection of love is that it’s not perfect.”,
author: “Taylor Swift”
},
{
statement: “The best and most beautiful things in this world cannot be seen or even heard, but must be felt with the heart.”,
author: “Helen Keller”
},
{
statement: “Life without love is like a tree without blossoms or fruit.”,
author: “Khalil Gibran”
},
{
statement: “Love recognizes no barriers. It jumps hurdles, leaps fences, penetrates walls to arrive at its destination full of hope.”,
author: “Maya Angelou”
},
{
statement: “To love or have loved, that is enough. Ask nothing further. There is no other pearl to be found in the dark folds of life.”,
author: “Victor Hugo”
},
{
statement: “You are my heart, my life, my one and only thought.”,
author: “Arthur Conan Doyle”
},
{
statement: “To love or have loved, that is enough. Ask nothing further. There is no other pearl to be found in the dark folds of life.”,
author: “Victor Hugo”
},
{
statement: “When I tell you I love you, I don’t say it out of habit. I say it to remind you that you’re the best thing that ever happened to me.”,
author: “Onyebuchi Princewill”
},
];
console.log(quoteStatements);
//get Button
const quoteBtn = document.querySelector(“.btn”);
//get Quotes field
const quotes = document.querySelector(“.quote”);
// author field
const author = document.querySelector(“.author”);
//trigger click event
quoteBtn.addEventListener(“click”, getQuotes);
//func
function getQuotes() {
//get random number as index
const quoteIndex = Math.floor(Math.random()*quoteStatements.length);
//set current quote base on random index
const currentQuote = quoteStatements[quoteIndex].statement;
//set current author base on same index
const currentAuthor = quoteStatements[quoteIndex].author;
//display in quote field and author field
quotes.textContent = currentQuote;
author.textContent = currentAuthor;
};
getQuotes();
Hello there! Thank you for putting together this list of projects! I have recently started studying JavaScript and I’m learning a lot by completing these exercises!
One question, though: could you explain what is the advantage of using an anonymous function at the beginning of your code? I coded my own solution without using one, and it LOOKS to me like the result works the same way, but I am fairly sure that is probably because I am missing something ^^’
Thanks for the projects! Here’s my random quote generator:
https://suspicious-yonath-5a5337.netlify.app/
Source-code:
https://github.com/Ramayama1/Random-Quotes-Project
I used an api.
i have solved this way
(function(){
let quotes = [
{
quote:
“Life is too short and sweet to be spent by cribbing and complaining about things. Here are some random quotes about the most wonderful gift that we’ve got”,
author: ” Life”
},
{
quote:
“Humor is richly rewarding to the person who employs it. It has some value in gaining and holding attention. But it has no persuasive value at all”,
author: “John Kenneth Galbraith”
},
{
quote:
“God save me from my friends. I can protect myself from my enemies.”,
author: “Claude Louis Hector de Villars ”
},
{
quote: “The price of anything is the amount of life you exchange for it.”,
author: “David Thoreau”
},
{
quote:
“Life is like a landscape. You live in the midst of it but can describe it only from the vantage point of distance. “,
author: “Charles Lindbergh”
},
{
quote:
“A critic is someone who never actually goes to the battle, yet who afterwards comes out shooting the wounded.”,
author: ” Tyne Daly”
}
]
let i = 0
function displayQuote(){
if(quotes[i] === undefined){
alert(‘no quotes..’)
i = 0
}else{
i++
document.querySelector(‘#quote’).textContent = quotes[i-1].quote
document.querySelector(‘.quote-author’).textContent = quotes[i-1].author
}
}
document.querySelector(‘#generate-btn’).addEventListener(‘click’, displayQuote)
})()
Not including the array of quotes/author objects, but here is what I put directly after:
const quote = document.querySelector(“#quote”);
const button = document.querySelector(“#generate-btn”);
const author = document.querySelector(“.quote-author”);
button.addEventListener(“click”, () => {
quoteGenerator = () => Math.floor(Math.random() * Math.floor(quotes.length));
quote.textContent = quotes[quoteGenerator()].quote;
author.textContent = quotes[quoteGenerator()].author;
});
HTML:
New Quote
============================================================
let quotes = [
‘”You are the shuckiest shuck faced shuck in the world!” ― James Dashner, The Maze Runner’,
‘“Adversity causes some men to break, others to break records.” – William A. Ward’,
‘“Accept challenges, so that you may feel the exhilaration of victory.” – George S. Patton ‘,
‘“The gem cannot be polished without friction, nor man be perfected without trials.” – Danish Proverb ‘,
‘“Don’t give up at half time. Concentrate on winning the second half.” – Paul “Bear” Bryant ‘,
‘“The difference between the impossible and the possible lies in a person’s determination.” – Tommy Lasorda ‘,
‘“Defeat is not the worst of failures. Not to have tried is the true failure.” – George Edward Woodberry ‘
]
const background = document.querySelector(‘body’);
const button = document.querySelector(‘.button’);
const newQuote = document.querySelector(‘.innerbox’);
button.addEventListener(‘click’, e => {
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
const html =
` Today’s New Quote is:
${randomQuote}`;
newQuote.innerHTML = html;
// newQuote.clear();
console.log(randomQuote);
});
Awesome job!