Skip to content

themindfuldev/quiz-app

Repository files navigation

Quiz app

Challenge application for UI Bootcamp at Avenue Code, exercising Backbone.js and RequireJS.

Run

  1. npm install
  2. bower install
  3. grunt build
  4. grunt server (development mode)
  5. grunt server:dist (production mode)

Refactor to Design Patterns for Large-Scale JS

  1. Use your quiz app or fork this repo into your own GitHub account.

  2. Create a new Collection for getting the Top Five Users from your persistence / local storage, showing their user names, emails and scores in an array of objects like above. Expose it in the Façade.

    [
      {
        name: 'Yoda',
        email: 'yoda@disney.com',
        score: 100
      },
      {
        name: 'Darth Maul',
        email: 'dmaul@disney.com',
        score: 60
      },
      {
        name: 'Palpatine',
        email: 'palpatine@disney.com',
        score: 40
      },
      {
        name: 'Han Solo',
        email: 'hsolo@disney.com',
        score: 40
      },
      {
        name: 'Jabba The Hut',
        email: 'jhut@disney.com',
        score: 20
      }
    ]
  3. Create a Sidebar view that will show the Top Five Users (name, email and score) in a sidebar which will always be visible on every page.

  4. Create a Mediator (a.k.a. Pub/Sub) to control the communication flow for the following scenario:

  5. Every time a user is created or updated, this Sidebar view must be updated.

  6. The Sidebar view and the models/collections that manipulate User creation/update must not know about each other.

  7. Which means you should use the Mediator to re-render the Sidebar view after a User create/update on your model/collection. You need to setup some channel, publisher and subscriber to make that happen.

  8. Remember the way the Mediator works, the Modules MUST NOT contain any reference to the Mediator. It should be the other way around.

  9. Create an Observer (a.k.a. Custom Event) to control the communication flow for the following scenario:

  10. Create a 'clearAll' function on the User model/collection module to delete all the users from the persistence / local storage.

  11. Create a 'clear all' button on this sidebar to call this module.

  12. This button should invoke the Module's function via events. You need to setup some event, listener and publisher to make that happen.

  13. Differently from the Mediator, the Subject CAN fire the Observers directly.

  14. Send me your solution in a GitHub repo.

About

Challenge application for UI Bootcamp at Avenue Code

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published