Front End Libraries-Random Quote Machine

Code Feedback
1

Hi all.
This is my Front End Library project # 1 - Build a Random Quote Machine

I had a bit of a hard time getting the divs to work they way I wanted. They kept going any and everywhere.
All the page is very simple, doing the front end is a challenge itself, since I did not want to use position absolute/relative solutions, but have a responsive design and feel. I believe mission was accomplished, but it is up to the public to confirm this.

Found this great article on medium, which was of much help understanding how FLEX works in CSS (Article: https://medium.freecodecamp.org/the-complete-illustrated-flexbox-tutorial-d35c085dbf35).

Here is my project:


or on GitHub: https://github.com/eday69/freeCodeCamp/blob/master/FrontEndLibrariesProjects/RandomQuoteMachine.html

Please, give me some feedback.

freeCodeCamp rocks !

1 Like
2

You’re using flexbox, which is great. If you understand flexbox, you shouldn’t have issues positioning the relatively small number of divs you have. It looks like you handled the site the way you wanted it. I would not call your site responsive as the content is one size fits all at this point. Also, consider fetching from a real quote API if you’ve never done that before. Good luck!

2 Likes
3

Thanks Clinton, will find out about the API.

4

Great work Eric!

All in all it is good use of color. There are some bugs left:

I viewed on mobile (pixel 2 on chrome) but the #quote-box is overlapping the wrapper. its the width: auto that causes it, just remove it, the overlap will be fixed :slight_smile: . In using flexbox, the use of width: auto will be lessened. It will be more of min-width, max-width, and/or flex-basis.

and if you want to take a step further here are suggestions of some of good practices in front-end:

  1. Using querySelectors
  2. Using addEventListener instead of putting javascript functions on html

And some tips / resources that can help you fetch apis

  1. Fetching Apis using fetch()
  2. random quote api used by freecodecamp (you need to register and get api keys)
  3. passing headers in fetch - the freecodecamp random quote api has api keys that needs to be passed as headers that’s why you need to pass headers

Good luck and Happy Coding!!

2 Likes
5

Hi. Many thanks.

Super cool suggestions, loved them
On #1, I’ve tried, but I keep getting an error (TypeError: null is not an object (evaluating ‘el.addEventListener’)) on my line

  el.addEventListener("click", getNewQuote, false);

I believe its because the DOM is not completely loaded and there does not find “new-quote”? Ideas?

Using #2 (as you can see…)
Will work on #3 now.

6

for querySelector() it is like css. When you select new quote, always include the # for id and . for classes.
example

var newQuoteButton = document.querySelector('#new-quote');

and then you hook it up with event listeners.

you can test if you selected it right by putting console.log the newQuoteButton and the html will appear.

Good luck and Happy Coding!

1 Like