kevin-miles / learn_javascript

Projects from a learn javascript session

learn_javascript

These are projects from a learn javascript session. I started at Week 4.

Original session URL: http://www.reddit.com/r/learnjavascript/comments/1oq8ns/learn_javascript_properly_omnibus_post_for_the/

Lesson 4

URL: http://www.reddit.com/r/learnjavascript/comments/1qedjd/week_4_of_the_learn_javascript_properly_study/

Requirements:

It is now time to build a quiz application using JS, HTML, and CSS. The quiz can be about anything. It should function as follows:

• It should be a simple quiz with radio buttons.
• It should have at least five questions.
• It should show only one question at a time. Use a "Next" button to move from one question to the next.
• Dynamically (with document.getElementById or jQuery) add the next question and remove the current question from the screen, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.
• Keep track of the user's score. Display this score on the last page of your application.
• Use an array of objects to store the questions. It should look similar to this:
• When you're finished, post your JSfiddle link somewhere on /r/LearnJavaScript[1] . Feel free to make it a standalone thread, even.

Lesson 5

URL: http://www.reddit.com/r/learnjavascript/comments/1qwixk/learn_javascript_properly_week_5/

Requirements:

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.

Lesson 6

URL: http://www.reddit.com/r/learnjavascript/comments/1rfz2n/learn_javascript_properly_week_6_assignments/

Requirements:

Improve your quiz application even more:

• Store the quiz questions in an external JSON file.
• Add user authentication: allow users log in, and save their login credentials to local storage (HTML5 browser storage).
• Use cookies to remember the user, and show a “Welcome, First Name” message when the user returns to the quiz.

Lesson 7

URL: http://www.reddit.com/r/learnjavascript/comments/1rwz0e/week_7_the_final_week_of_learn_javascript_properly/

Requirements:

Improve your Quiz app!

• Use Twitter Bootstrap to quickly add styling.
• Learn how to use templating language by incorporating Handlebars into your quiz.