alexbaker3 / omnicalc_params

Omnicalc params

Dynamic web applications are more interesting than static websites for one reason: user input. Let's finally learn how to let our users give us input!

Your goal will be to build a simplified version of Omnicalc.

Here is the target you will ultimately build.

Project Specific Setup

1. Fork and clone as usual.

2. cd into the folder you downloaded.

3. bundle install (or bundle for short)

4. rails server (or rails s for short)

5. Navigate to http://localhost:3000 in Chrome — there's nothing there but the default Rails welcome screen!

6. This is a brand new, untouched Rails application. All we've done is run the command rails new omnicalc_params to generate the basic structure of folders and files you see in your editor's sidebar, and we've added the instructions you're reading in this README.

   You could generate a brand new Rails app yourself right now by doing the same thing:

   1. Open a terminal window and cd to the folder where you store your code.
   2. rails new your_own_app_name
   3. cd your_own_app_name
   4. rails s

   That's it! You'd then see the same welcome screen at http://localhost:3000, and you would be ready to start building out your Rails app.

Standard Workflow

1. Fork to your own account.
2. Clone to your computer.
3. In the GitHub Desktop app, create a branch for your work.
4. Open the entire folder you downloaded in Atom.
5. Make your first change to the code. (You could modify this README.md file by adding your username next to the project in the heading, for example.)
6. In the GitHub Desktop app, create a commit. You must type a "summary"; "description" is optional.
7. Click Publish. Verify that your branch is now visible on your fork at GitHub.com in the "Branch" dropdown.
8. Commit and Sync often as you work.
9. Make new branches freely to experiment. You can always switch back to an older branch and start over. When in doubt, create a branch, especially before starting on a new task.
10. If you have a question about your code, a great way to get feedback is to open a Pull Request. After creating it, if you include the URL of your Pull Request when you post your question, reviewers will be able to easily see the changes you've made and leave comments on each line of your code with suggestions.

Part I: Flexible Routes

The way it should work is:

• If I visit a URL of the pattern

  /flexible/square/:number
  

  I should see the square of the number in the third segment of the path.

• If I visit a URL of the pattern

  /flexible/square_root/:number
  

  I should see the square root of the number in the third segment of the path.

• If I visit a URL of the pattern

  /flexible/payment/:basis_points/:number_of_years/:present_value
  

  I should see the monthly payment due, assuming that

  • the number in the third segment of the path is an annual interest rate in basis points, or hundredths of a percent

  • the number in the fourth segment of the path is the number of years remaining

  • the number in the fifth segment of the path is the present value

    

• If I visit a URL of the pattern

  /flexible/random/:min/:max
  

  I should see a random number that falls between the numbers in the third and fourth segments of the path.

Examples

• If I visit http://localhost:3000/flexible/square/5, I should see something like

  Flexible Square

  The square of 5 is 25.

• If I visit http://localhost:3000/flexible/square_root/8, I should see something like

  Flexible Square Root

  The square root of 8.0 is 2.83.

• If I visit http://localhost:3000/flexible/payment/410/30/250000, I should see something like

  Flexible Payment

  A 30 year loan of $250,000, with an annual interest rate of 4.10%, requires a monthly payment of $1,208.00.

• If I visit http://localhost:3000/flexible/random/50/100, I should see something like

  Flexible Random Number

  A random number between 50 and 100 is 87.

All of these should work no matter what integers I type into the flexible segments of the path.

Remember:

• Rails places all user input in the params hash.
• You can use the params hash in your actions or your views.
• Watch the server log to see what the params hash contains for any given request.

Your task: Build out flexible RCAVs so that all of these (infinitely many) URLs work.

Part II: Forms

Now, let's build something a little more realistic. We don't want to type input into the address bar; we want to type into forms!

The way it should work is:

• If I visit the URL http://localhost:3000/square/new, I should see a form with a label and an input to enter a number. (Since we're no longer typing into the address bar, we can use decimals and are no longer limited to integers. Yay!)
  • If I submit that form, I should see the square of the number that I entered.
• If I visit the URL http://localhost:3000/square_root/new, I should see a form with a label and an input to enter a number.
  • If I submit that form, I should see the square root of the number that I entered.
• If I visit the URL http://localhost:3000/payment/new, I should see a form with labels and inputs to enter three values:
  • An APR (annual percentage rate). (Since our users are no longer limited to integers, we can avoid thinking in basis points. Phew!)
  • A number of years remaining
  • The principal
  • If I submit that form, I should see the monthly payment due given the values that I entered.
• If I visit the URL http://localhost:3000/random/new, I should see a form with labels and inputs to enter two numbers, a minimum and a maximum.
  • If I submit that form, I should see a random number that falls between the numbers that I entered.
• On the random number results page, add a link to instantly re-calculate a new random number from within the same range, without the user having to re-enter the minimum and maximum into the form again.

Part III: More Practice

• Add a link to each results page to go back and perform a new calculation.
• Add global navigation to get from calculator to calculator.
• Implement the following calculators (without any styling, just functionality):
  • Word Count
  • Descriptive Statistics

Optional challenges

• Bootstrap it to make it look like the real Omnicalc. We've already connected bootstrap.css and Font Awesome for you, so you can just start using them.