Skip to content

Instantly share code, notes, and snippets.

@danielnegri

danielnegri/gist:2713891

Created May 16, 2012 20:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danielnegri/2713891 to your computer and use it in GitHub Desktop.
Save danielnegri/2713891 to your computer and use it in GitHub Desktop.
Download ZIP
Kaplan - README.md
Raw
gistfile1.md

KAPLAN TEST PREP & ADMISSIONS

Develop using HTML, CSS and Javascript.

Versioning

For better into development release cycle I'm sending you a Git repository tree. You can follow by log:

Branches

  • master
  • new-engine

Change Log

  • styles change for html5 - header and footer
  • bug fixed - float-point arithmetic
  • bug fixed - negative number
  • first good version - should fix negative number bug soon

Simple Calculator

I utilized tools, such as Intializr to obtain Twitter Bootstrap and HTML5+CSS files. There is a very interesting point about the code, which is the fact that the calculator component was made by using one table to group buttons. Some people recommend to use tables only when displaying tabular information. While I agree with this recommendation, I believe that the main point of this exercise is the unobtrusive Javascript and OOP, therefore I reused the HTML code from a calculator from Webestools site.

Testing

I selected Jasmine framework for BDD - behavior-driven development - because it has a clean, obvious syntax so that you can easily write tests. You can run the SpecRunner code by:

http://danielnegri.com.br/kaplan/js_code_test/js/SpecRunner.html

Reference

Cross-browser compatibility

  • Internet Explorer 7+: Windows
  • Google Chrome: Windows Mac Linux
  • Firefox 3+: Windows Mac Linux
  • Safari 5+: Mac Windows

Mockup

I utilized the same concept as the one I used with the Calculator. I tried to create the same example structure. As we can see, the original PDF has a screenshot probably from a Windows machine. I developed using Snow Leopard MacOS and tested using Windows XP with VirtualBox.

Considerations

The hardest part of this example was to decide how to reproduce shadows and rounded corners. We have two interesting situations, the first one for box-footer.jpg and other for titlebar-*. The box-footer.jpg is very useful because you don't need to setup various helper elements, just one is enough. The titlebar was more difficult to decide because I did not want to create different float DIVs just to represent borders, if you have some suggest please let me know. [:D]

URL

Author

Daniel Negri

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment