Feedback for Random Quote Machine Project

Code Feedback
1

Hello All!

If you have some time please take a look at my Random Quote Machine Page and provide any feedback you have. I appreciate all who take the time to look into these things!

Thanks and Happy Coding!

:+1:

1 Like
2

I like it! Very unique approach!

3

Neat! I love the layout!

4

Great styling, very creative!

Couldn’t even begin to criticize the CSS, and all the functionality works well. Only thing would be cleaning up some of the JS:

  • The variable thisQuote seems a bit superfluous, would be more readable to just use json.quote (and more concise too, given that you’d save yourself a declaration).
  • Once an app is functional, take out console.log() of anything other than messages and errors you’d want to tell other devs/tech-savvy users. Logging arbitrary variables is great for sanity checking while you’re coding, but after you’re finished it just becomes clutter.
  • Your string concatenation doesn’t need to be so verbose. Instead of:
    var a = '';
a += 'some text ';
a += someVar;
a += ' more text';
    use:
    var a = 'some text ' + someVar + ' more text';
    Better still, use ES6 template literals (because they rock):
    const a = `some text ${someVar} more text`;
1 Like
5

Thanks for the advice! That is a really good point.

Those template literals are awesome. Coming from a background using Groovy using GStrings ( still laugh every time I talk about them :slight_smile: ) , I really appreciate that they are available in Java Script!

:metal:

6

@lionel-rowe,

I am unable to get the ES6 template literals to work. The string is taking them to literally :laughing:.

image
image932×286 9.84 KB

Do you know how I can force codepen to recognize them?

Thanks!

Never mind, I did what I should have in the first place and researched the issue. According to this page I realized I had to add Babel as a preprocessor.

image
image717×204 9.65 KB

Also, looked at the another page and realized I was using regular ticks ( ` ) and needed to be using back ticks ( ` ) which I failed to notice in your comment.

Thanks!

7

You actually shouldn’t need to use Babel to use ES6 features in modern browsers. Still worthwhile using it if any of your users still use IE, though.

ES6 browser compatibility chart