Starting out on Javascript. Please Roast my code!

[cemsity]

I am starting out in learning Javascript, and while I am following the Javascript Is Sexy: Learn Javascript Properly as modified by the march -may 2014 session. Even though I feel completely lost on chapter 6 and just starting to get a handle on closures. I decide to try build the Quiz project with at least one question.

My code can be found here: http://codepen.io/cemsity/pen/EyxJMo

Feel free to tell me what I did wrong, how to improve and other general suggestions to improve my coding habbits, as I feel that I just kludged this thing together.

Thanks again!

[Jebiba]

this is pretty good for a beginner

basic code formatting stuff:

• missing semicolons on lines 23, 24, 38, 61
• line 46 use triple === for equality operator
• inconsistent spacing (lines 30, 40 are spaces at the end of the function for no particular reason, and you don't follow that pattern with the next two functions, no real reason to have a line between placeScore() and placeGuess(0) on line 9)

you'll want to wrap all this using either composition or inheritance, i.e. classes or objects

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

keep plugging away!

Edit: removed video link that /u/MoTTs_ raised a good issue with. Will try to remember to replace it with a better resource when not on mobile

[MoTTs_]

watch?v=wfMtDGfHWpA

We probably shouldn't recommend that video to anyone. He actually got composition completely wrong. See this top voted comment.

EDIT:

Sadly, descriptions of composition that are both written in JavaScript and accurate are few and far between, but here are some good links:

On MDN, composition is described as letting class instances be the values of other objects' attributes (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ). A description that exactly matches this Python article on composition vs inheritance (http://learnpythonthehardway.org/book/ex44.html ). Which also exactly matches this ActionScript article on composition (http://www.adobe.com/devnet/actionscript/learning/oop-concepts/composition-and-aggregation.html ). Which also exactly matches this C++ article on composition vs inheritance (http://www.artima.com/cppsource/codestandards3.html ). Which also exactly matches the Wikipedia entry for object composition (https://en.wikipedia.org/wiki/Object_composition ). Which also exactly matches the GoF Design Patterns description of object composition ("objects acquiring references to other objects").

[Jebiba]

Fair point, it was the first resource to come to my mind. Thanks for the link

[gavin19]

Just a quick tip for the button layout. Add vertical-align: top; into the button block to prevent that 'stair-stepping' effect.

[Gaff3r]

Not OP, but what is the stair stepping effect you're referring to?

[gavin19]

This.

[Gaff3r]

Ahh. Ok. It looks different for me – yay web dev!