A small project built whilst learning JavaScript basics. It was inspired by the freeCodeCamp Random Quote Machine project and uses the Wikipedia API.
The project can be found here.
If you want to install the project locally, you can:
git clone https://gitlab.com/adamrutter/random-quotes.git
cd random-quotes
npm install
Note: npm is only used to install eslint, so you could skip this step if you wanted.
The Wikipedia API is used to enhance user experience. It is queried to try and find an entry on the author of the quote.
If the API query found an entry and that page has a main image, we add that image to our document.
if (pageExists && imagePresent) {
appendImage(response.query.pages[0].thumbnail.source);
}
The 'Learn More' button opens the author's Wikipedia entry (if one is available) in a new tab.
A function learnMoreState(author, pageExists)
is called to determine whether the button should be active or not (based on the existence of the page). If it is active, it links to the Wikipedia entry; if it is inactive, the disabled
class is added to the element and it is restyled.
On producing a quote, a new colour is chosen randomly for the buttons and background. This is done by setting a new style.backgroundColor
on relevant elements, defined using the CSS hsl
function with a random number between 0 and 359 as the hue.
const randomNum = Math.floor(Math.random() * 359);
const newColor = 'hsl(' + randomNum + ', 51%, 48%)';
Some animation is used when adding a new quote to the document.
When the 'New Quote' button is clicked, the slideUp()
function is used to move the bottom of the document up. When the new quote has been added to the document, the slideDown()
function is then used to reveal the new quote.
These functions toggle classes on some elements that cause them to be repositioned. The CSS property transition
is used so this happens smoothly.