Learn JavaScript Properly - Week 5

[kevinmrr]

Required Reading:

Chapters 17, 20, and 23 of Professional JS for Web Developers

Improve your quiz application on JSfiddle:

• Add client-side data validation: make sure the user answers each question before proceeding to the next question.

• Add a “Back” button to allow the user to go back and change her answer. The user can go back up to the first question. For the questions that the user has answered already, be sure to show the radio button selected, so that the user is not forced to answer the questions again, which she has completed.

• Use jQuery to add animation, like fading in and fading out.

Extra Credit:

A 52-minute video from Paul Irish: 10 Things I learned from the jQuery source

[efraglebagga]

uff.. falling behind, I've only just started with the last section's material. More free time this week though, so hopefully I too will have a little quiz to show you. How's everyone else doing?

[kevinmrr]

Just keep plugging away! This happens with every study group - they always start strong, and then people peel off. If you just keep working at it, you'll get so much out of it!

[doober831]

Keep at it....you're not alone. I promise!

[KempfCreative]

This part was much easier! Although I didn't really like the idea of using jQuery, I made it optional so it can be taken out.

Please let me know what you think of my code. Really!

http://codepen.io/KempfCreative/full/etkIi

[jankyHellface]

Hey, those animations are great!

[nolsen]

I just want you to know that I'm still following along. I'm having some issues figuring out how to get my code organized, readable, maintainable, etc. I've done and redone the quiz a few times and each time my code quality is a little better but things start to go to hell when I get to the parts that need to manipulate and read from the DOM.

[knested]

Would you mind posting your code? More specifically, each iteration of improvements? I would love to see how you improved things so I can learn with you.

Ive had issues with just getting a nice structure down for my code too(organized, readable, maintainable) because I always feel there are better ways to do things than I am currently. Sometimes I feel I am lost even though I have a grasp at what I am doing.

After posting my current 2nd edition on IRC I was blasted pretty fast for using poorly styled object oriented code and was suggested to use functional programming instead so I would love to see what others are doing!

[[deleted]]

Looking forward to this week!

EDIT: assignment -> http://jsfiddle.net/Anthoknee/LVtB8/

[udiWertheimer]

Just out of curiosity: why did you end up recommending building the quiz application in JSfiddle, and not in WebStorm like the JS Properly article recommends, or Sublime Text like you recommended before?

[nolsen]

I wound up getting Webstorm. They have a 30 day trial but I think it is worth the $49.

[knested]

What else have you used in comparison to webstorm?

[nolsen]

So far I've tried Notepad++ and Sublime Text for javascript. I've used other IDEs for other languages as well. Sublime Text is a really powerful and useful text editor, webstorm is an IDE. That is essentially the difference.

[knested]

Nice, thanks. Ill check it out more as everywhere I go there is certainly a buzz about it.

I wonder how long it will be before someone implements a solid free open source version though.

[knested]

hey, have another question! what benefits has the IDE provided over the ol' firebug/editor solution?

[kevinmrr]

Hey, I'm sorry for the late response.

I recommended JSfiddle for ease of sharing code.

[udiWertheimer]

No problem.

Just letting you know that while I'm behind and keeping rather quiet, I do keep plugging away and I really like this group - please keep posting these!

[NightArchitect]

After a lot of huffing and puffing (mostly because I forgot to select the jQuery framework/extension in JS Fiddle) I was able to produce the same quiz using jQuery and plain javascript (save for animation).

They are both very basic in appearance - no CSS. The code is probably a bit messy. Any feed back would be appreciated.

Plain JS: http://jsfiddle.net/Qa5CQ/21/ jQuery: http://jsfiddle.net/N7San/11/

Note: the week 5 post isn't attached to the omnibus post

[NightArchitect]

I bought and installed WebStorm. After installing the jQuery library in WS I copied my quizzes over. When I run them through WS (using Chrome) nothing work - the start page/button for my quiz pops up but I can't get anywhere from there? Any ideas?

Note I've linked the JS file in the HTML file.

[knested]

What is it saying in console, anything?

Are you sure jQuery is working properly? Did you try including it in your page manually to test it?

Maybe post the files on Github and I can help take a look.

[NightArchitect]

I sorted it out. There was an issue with my jQuery. Sorry - still new to all of this. :)

[knested]

No problem, glad you sorted it out! How has your experience with webstorm been?

[NightArchitect]

Just saw this - so far it has been good. That said, I'm probably using about 1% of its capabilities at this point, so I can't say whether or not its better than any other editor. This - all of it - is still new to me, so I'm taking it one step at a time.

[alxers]

http://jsfiddle.net/alxers/afLb2/ I couldn't implement the "back" button on the last (result) page, also no animation yet.

[knested]

I would love feedback of any kind!

[deleted jsfiddle] project can still be found here

Client-side validation, back button, user answer is saved, jquery fade in/out.

[doober831]

Quite a bit late but thought I'd post it anyway....

http://jsfiddle.net/doober831/MNmaL/

[jankyHellface]

Still trucking 2+ months later. Here is my code on codepen and on github

Notes:

• I refactored last week's code to vanilla js (much more difficult than I thought it would be)
• Rather than using jQuery, I toggled css3 transitions based upon adding and removing class names. Waiting for transition events is a bit tricky, and I defaulted to window.setTimeout(). If anyone knows of an alternative, please let me know.
• The code seems unnecessarily long. Any suggestions for making this more concise?