JavaScript Quote Generator Project

Hosted Project

https://js-beginners.github.io/quote-of-the-day-project/

GitHub Source Files

https://github.com/JS-Beginners/quote-of-the-day-project

Project Objective

The objective of this JavaScript project is to wire up a very basic JavaScript quote generator.

JavaScript Used

• Inline JavaScript
• JavaScript objects
• JavaScript selectors
• JavaScript math library

My Personalize Summary

Level of Difficulty

As stated in this project's objective, it is a very basic project that requires you to know how to code a JavaScript object and put it into an array of objects. The JavaScript array consists of a six different objects, each with two name value pairs. One name-value pair is the author and his or her name, and the other name-value pair is the quote and the actual quote itself. The code was pretty easy to follow. And, just like the previous JavaScript Mortgage Calculator project, it seems that this course author prefers to use inline JavaScript. Again, while it's not hard, it's something that'll make you look at the documentation again, if you're not familiar with the name of inline events.

New Things Learned or Refreshed

Nothing much was new to me in this project. However, it did serve as a quick reminder. Whenever you're using quotes in your text strings, you have to use the JavaScript escape character ( / )in your code, else, JavaScript will scream error. In other words, instead of using something such as: let test = "hello "my" name is Test" <– This doesn't work You have to use: let test = "hello \"my\" name is Test" <– This works! The alternative is to wrap single quotes in double quotes or vice versa, like this: let test2 = "hello 'my' name is Test" <– This works, too

Time to Code

This project took me about 20 minutes to listen, watch, and code out the solution.

Lines of Code

This project uses around 20 lines of JavaScript code, including white space and code comments.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the quotes.js file.
3. Implement the JavaScript code in your own quotes.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript quote generator in action.

Need to see the video solution for this project?

Get BlueLime's JavaScript for Beginners: Create 27 Projects from Scratch Course