Random Quote Generator - Please critique

Code Feedback
1

Hi,

Any praise or criticism welcome.

The JS needs tweaking . Double clicking the Quote button quickly causes some problems, but go slow and it should work fine.

Many thanks,

Richard

2

Hi Richard,

Stylistically, your generator looks great, especially with the modest animation. I could sit here and read quotes for way too long. :smile:

As for the double clicking, I don’t seem to have that problem on my end, but that could be browser-specific, and I’m on Chrome.

And you seem to have a good grasp of APIs, which will really help with your next few projects. Tweak away, but it’s a nice generator.

1 Like
3

Great design and animate effect.
I really like and twitter button it’s okey.

1 Like
4

Very nice interface, I like how it looks. Other than that button which just says “Quote” (i.e., that’s not a very descriptive label for anyone not familiar with the Web app), can’t find anything to fault about it visually.

I took a cursory look at your code and have a few critiques on it:
(1) Nothing against you at all but I personally don’t like how CodePen allows users to enter HTML without also manually adding the HEAD and BODY tags, which are required for a properly-formatted document. With that said, I think it’s a good idea to get into the habit of adding those anyway even though they’re not required on CodePen, along with the outer HTML tag. You’ll need to start adding those tags later on, once you start developing without CodePen.
(2) I wouldn’t recommend trying to style the HTML tag as there’s nothing visible about it. Just because you can, doesn’t mean you should. :wink: The styling for the HTML tag is better placed in the styling for your BODY tag.
(3) I might suggest ordering the selectors in your CSS alphabetically, and placing all the elements together, IDs together, and classes together.
(4) Although I’ve seen some very reputable sources write “function()” in JavaScript code, it’s typically more correct to write anonymous functions with a space between the ‘function’ and the parentheses, like this: “function ()”. That way you can more easily see which functions in your JavaScript are anonymous and which ones aren’t.

1 Like
5

Thanks a lot! Love critique like this, it’s how I learn.

  1. Yeah, it’s concerned me slightly too, though I haven’t looked into addressing it. I’ve added html and body tags. Are you suggesting just adding empty head tags, or putting in the necessary links and such even though they’re not required?
  2. This was a styling choice and seems to work, though maybe there’s an alternative. I want the buttons to stick to the bottom of the page and this only works if I have the height property in the html tag, not the body one. Just remembered this could be easily done with a navbar at the bottom!
  3. This is an interesting idea. Is there any way it might affect things, what with the ‘cascading’? I’ll look more into it.
  4. Never heard about this. Can’t you tell it’s anonymous just by looking at it though? Don’t quite understand yet.

Thanks again!

6
  1. You can see what I mean with the HTML, HEAD, and BODY tags if you look at my CodePen for the project here, basically it’s the first 8 lines (along with the last 3 lines) of the HTML code: http://codepen.io/astv99/pen/VjxAqp
  2. The CSS “cascade” isn’t affected by how you order the selectors in your CSS code. The main reason I suggest an alphabetical ordering, along with grouping elements, IDs, and classes together, is for code maintenance, because the longer your CSS code gets, the more scrolling around you’ll have to do. If your CSS code is in some kind of logical order, you’ll be able to find your selectors more easily.
  3. That’s just a “coding style” suggestion to visually set apart anonymous functions from named functions. Anonymous functions are like ‘function ()’ while named functions are like ‘function funcName()’. The name of a named function should always be right up against the parentheses, that’s why I suggest adding a space for anonymous functions.
1 Like