Skip to content
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

Jump to bottom

Using Quotable API to fetch quotes #8

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Using Quotable API to fetch quotes #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9dec227
Update index.html
Mudit-Jxin7 Jun 17, 2023
d197783
Update script.js
Mudit-Jxin7 Jun 17, 2023
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
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
</head>
<body>
<div id="quote-box">
<p class="quote">You can do anything but not everything</p>
<p class="source">David Allen<span class="citation">Making It All Work</span><span class="year">2009</span></p>
<p class="quote" id="quote"></p>
<p class="source" id="author"></p>
</div>
<button id="loadQuote">Show another quote</button>
</div>
<script src="js/script.js"></script>
</body>
</html>
</html>
236 changes: 32 additions & 204 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,210 +1,38 @@

//Object Array to hold quotes, sources, citaitons and years
var quotes = [
{
quote: "Be who you are and say what you feel, because those who mind don't matter and those who matter don't mind.",
source: "Dr. Seuss"
},
{
quote: "This too, shall pass.",
source: "Anonymous"
},
{
quote: "Keep your eyes on the stars and your feet on the ground.",
source: "Theodore Roosevelt"
},
{
quote: "The only person you should try to be better than is the person you were yesterday.",
source: "Anonymous"
},
{
quote: "Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.",
source: "Harvey Fierstein"
},
{
quote: "Faith is the art of holding on to things your reason has once accepted, in spite of your changing moods.",
source: "C.S. Lewis"
},
{
quote: "A man who flies from his fear may find that he has only taken a shortcut to meet it.",
source: "Sador",
citation: "Children of Húrin"
},
{
quote: "Life's too mysterious to take too serious.",
source: "Mary Engelbreit"
},
{
quote: "No one can make you feel inferior without your consent.",
source: "Eleanor Roosevelt"
},
{
quote: "The woman who follows the crowd will usually go no further than the crowd. The woman who walks alone is likely to find herself in places no one has been before.",
source: "Albert Einstein"
},
{
quote: "You can't go around building a better world for people. Only people can build a better world for people. Otherwise it's just a cage.",
source: "Terry Pratchett",
citation: "Witches Abroad",
year: "1991"
},
{
quote: "There isn't a way things should be. There's just what happens, and what we do.",
source: "Terry Pratchett",
citation: "A Hat Full of Sky"
},
{
quote: "It's not about how hard you can hit; it's about how hard you can get hit and keep moving forward.",
source: "Rocky Balboa",
citation: "Rocky",
year: "1976"
},
{
quote: "More fuck yeah, less fuck that.",
source: "Anonymous"
},
{
quote: "If you want to go fast, go alone. If you want to go far, go together.",
source: "African proverb"
},
{
quote: "It's OK to not be OK, as long as you don't stay that way.",
source: "Anonymous"
},
{
quote: "I can be changed by what happens to me but I refuse to be reduced by it.",
source: "Maya Angelou"
},
{
quote: "Believe you can and you're halfway there.",
source: "T. Roosevelt"
},
{
quote: "May I never be complete. May I never be content. May I never be perfect.",
source: "Chuck Palahniuk"
},
{
quote: "Nothing in life is to be feared; it is only to be understood. Now is the time to understand more so that we may fear less.",
source: "Marie Curie"
},
{

quote: "Those who don't believe in magic will never find it.",
source: "Roald Dahl"
},
{
quote: "There is no elevator to success you have to take the stairs.",
source: "Anonymous"
},
{
quote: "Plant your garden and decorate your own soul, instead of waiting for someone to bring you flowers.",
source: "Jose Luis Borges"
},
{
quote: "It does not do to dwell on dreams and forget to live.",
source: "Albus Dumbledore",
citation: "Harry Potter and the Sorcerer's Stone",
year: "1997"
},
{
quote: "Don't sweat the petty things and don't pet the sweaty things.",
source: "George Carlin"
},
{
quote: "Do what you feel in your heart to be right, for you'll be criticized anyway.",
source: "Eleanor Roosevelt"
},
{
quote: "Do not set yourself on fire in order to keep others warm.",
source: "Anonymous"
},
{
quote: "The way I see it, every life is a pile of good things and bad things. The good things don't always soften the bad things, but vice versa, the bad things don't always spoil the good things and make them unimportant.",
source: "Doctor Who"
},
{
quote: "It's supposed to be hard. If it were easy, everyone would do it.",
source: "Jimmy Dugan",
citation: "A League of Their Own"
},
{
quote: "Ask yourself if what you're doing today will get you closer to where you want to be tomorrow.",
source: "Anonymous"
},
{
quote: "Life may not be the party we hoped for, but while we're here, we should dance.",
source: "Anonymous"
},
{
quote: "Never cowardly or cruel. Never give up, never give in.",
source: "Doctor Who"
},
{
quote: "Do not go where the path may lead, go instead where there is no path and leave a trail.",
source: "Ralph Waldo Emerson"
},
{
quote: "In 20 years, you probably won't even remember this.",
source: "Anonymous"
},
{
quote: "Love all, trust a few, do wrong to none.",
source: "William Shakespeare"
},
{
quote: "Clear eyes, full hearts, can't lose.",
source: "Dillon Panthers",
citation: "Friday Night Lights",
year: "1990"
},
{
quote: "We are what we repeatedly do. Excellence, then, is not an act, but a habit.",
source: "Aristotle"
}
];

//Function to randomly select a quote value and return a random quote object from the quotes array
function getRandomQuote () {
var randomNumber = Math.floor(Math.random() * (quotes.length));
var randomQuote = quotes[randomNumber];
return randomQuote;
}

//Function to select random rgb color value
function getRandomColor () {
var red = Math.floor(Math.random() * 256 );
var green = Math.floor(Math.random() * 256 );
var blue = Math.floor(Math.random() * 256 );
var randomColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
function getRandomColor() {
var red = Math.floor(Math.random() * 256);
var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);
var randomColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
return randomColor;
}

//Function to call the getRandomQuote function and stores the returned quote object in a variable
//Constructs a string containing the different properties of the quote object
function printQuote () {
var quotes = getRandomQuote ();
var quoteContainer = document.getElementById("quote-box");
var quoteString = `<p class="quote">${quotes.quote}</p><p class="source">${quotes.source}`;
if (quotes.citation) {quoteString += `<span class="citation">${quotes.citation}</span>`}
if (quotes.year) {quoteString += `<span class="year">${quotes.year}</span></p>`}
else {quoteString += '</p>'};
quoteContainer.innerHTML = quoteString;

//assigns random color value to document background color
document.body.style.backgroundColor = getRandomColor ();
}

//Quote automatically refreshes every 15 seconds
window.setInterval(function(){
printQuote ();
}, 15000);

//Event listener on LoadQuote button to generate new quote
document.getElementById("loadQuote").addEventListener("click", printQuote, false);



document.addEventListener("DOMContentLoaded", () => {
// DOM elements
const button = document.querySelector("button");
const quote = document.getElementById("quote");
const cite = document.getElementById("author");

async function updateQuote() {
// Fetch a random quote from the Quotable API
const response = await fetch("https://api.quotable.io/random");
const data = await response.json();
if (response.ok) {
// Update DOM elements
quote.textContent = data.content;
cite.textContent = data.author;
} else {
quote.textContent = "An error occured";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's better if another element is used to display an error message.

Alert might also do the job. And we leave quote.textContent the same as it was.

console.log(data);
}
}

// Attach an event listener to the `button`
button.addEventListener("click", updateQuote);
button.addEventListener("click", function () {
document.body.style.backgroundColor = getRandomColor();
});

// call updateQuote once when page loads
updateQuote();
});