The HTML5 range element only accepts one input so if we're going to use a double input slider we'll need a JS solution. jQuery UI has one. Some changes are needed to make it accessible, though.

Uses of +Number(…) likely can just be Number(…) ... test that this is the case and update instances like: https://github.com/cfpb/owning-a-home/blob/master/src/static/js/modules/explore-rates.js#L287

I would like to submit a pull request for content linked on the site but the content is a PDF.

http://www.consumerfinance.gov/owning-a-home/resources/checklist_mortgage_closing.pdf

We currently provide a Closing Checklist PDF for download.

We'd like to create a design and functional prototype that converts this PDF into a webpage, which would live at http://www.consumerfinance.gov/owning-a-home/closing-checklist/ or a similar URL inside the Owning a Home project.

Steps for getting this done might be:

• Create a page template in Owning a Home and add the PDF content.
• Determine which layout styles to use for this page: likely similar to the Loan Options page layout, or using Capital Framework.
• Add checklist/form functionality - likely using React.
• Add link + callout for users to download the PDF.

Hey @contolini, do some debugging w/r/t #469. Thanks.

Readme includes list of required software packages to run the project. It would be helpful to have an explanation by each of what it is used for, such as:

- Sheer - For managing web page content within the project.
- Elasticsearch - For the full-text search feature.
- Node - For installing tools, such as grunt and bower.
- Grunt - For installing backend dependencies. 
- Bower - For installing frontend dependencies. 

NOTE: The above is just my best guess as to what these requirements are for—I haven't yet installed the project.

• HTML and CSS for graph
• JavaScript to power the graph result
• Browser test (IE8+, mobile)

If the rateCheckerAPI value is left out of config/config.json, there is a helpful message:

However, if the countyAPI value is left out of config/config.json, the app works till a county is needed at which point the County dropdown is just empty. If the countyAPI URL is absent the app should show the same alert message as when the rateCheckerAPI value is absent.

can we give the selected radio button the attribute checked="checked"?
Right now element "discount-zero-a" always has checked="checked"

When I click a different radio button, example: "discount-three-a",, then the only element with attribute checked="checked" should be "discount-three-a"

This would make the browser tests easier to code

Proposed changes

• Revisit Clarify your goals link language (content):
  • “Why Buy? Why Now?”
  • “Buy vs. Rent.”
• Make the first action step in Prepare to Shop the “Clarify your goals” link in addition to a sidebar link.
• Reduce pain of filling out long form (UI/design):
  • Hide/shorten financial goals helper text.
  • Make the alternatives multiple choice instead of text fields.
  • Add helper text in expandables to the Alternatives page.
• Make results more useful (Content/UI/design):
  • Include the results chart
  • Include a link to a printable PDF
  • Brainstorm ways to give users more useful results from their inputs, rather than reflecting back what they have already typed in.

Questions to answer

• Is the worksheet easy to fill out?
• Is the information helpful to the consumer?

Outdated in that we now recommend Node 5 or something, and possibly unnecessary at all, since it's a dependency of the cfgov-refresh prerequisite.

This only seem to happen if it reaches to 10 or more lenders.

For best practices, we need to add X-XSS-Protection: 1; mode=block and X-Content-Type-Options: nosniff on the response header. By the way, this is NOT a critical issue but it should be taken care off.

HTTP/1.1 200 OK
Expires: Wed, 22 Jul 2015 14:36:46 GMT
Content-Type: application/json
Server: Apache
Allow: OPTIONS, GET
Cache-Control: max-age=1800
Last-Modified: Wed, 22 Jul 2015 14:06:46 GMT
Content-Length: 107
Date: Wed, 22 Jul 2015 14:06:46 GMT
Connection: keep-alive

{"timestamp": "2015-07-21T04:00:00Z", "data": {"4.375": 5, "4.230": 2, "4.500": 2, "4.250": 5, "4.125": 6}}

On the build server "owning-a-home/check-rates/"
The "closing costs" link seems to be pointing to:
http://www.consumerfinance.gov/askcfpb/139/what-are-closing-costs.html

But instead when I click on it, the browser lands in:
http://www.consumerfinance.gov/askcfpb/1845/what-fees-or-charges-are-paid-closing-and-who-pays-them.html

So the browser test fails the assertion as it correctly detects that we did not land in the URL we expected

A couple things we can do:

• Change the expected URL browser test
• Change the href attribute in the closing costs link

We did it!!

https://github.com/cfpb/owning-a-home/blob/master/package.json#L32 lists version 3.4.1, but the latest version in npm https://www.npmjs.com/package/browserify-shim is 3.8.9.

Based on a discussion with @ascott1, consider renaming the virtualenv in the project Readme to OAH instead of sheer to better align the public instructions of the project with the internal instructions:

So:

$ mkvirtualenv sheer

Would become:

$ mkvirtualenv OAH

The loan-types page is currently throwing an error from loan-calc on page load.

Uncaught Error: Please specify a loan amount as a positive number 

In the past, prevLoanType was defined, so there was no problem when it was checked for a value. However, L:415 has since been removed, so it looks like prevLoanType is undefined and if ( prevLoanType === 'fha-hb' ) { will always be false.

@contolini and @mistergone you seem to have been working in this area, do you know where prevLoanType should be grabbing its value? Not pointing fingers—I can't find where it was actually removed.

Our latest released work is available at consumerfinance.gov/owning-a-home.

Thoughts, comments or suggested improvements? Share them here!

Hey Team,
Checkmarx identified few medium security findings on the Javascript side. If anyone in the team has a minute, I would like sit with him/her to reviewing the findings for possible false positive.

I was updating Downpayment (you can try this on either % or the actual amount). If you enter whatever, then hold the "delete" key until everything is deleted. And then you pause (lift your finger away from the "delete" key), you will see whatever you deleted comes back.

So if you enter a number right away, it will concatenate the newly entered number to the deleted item.

Is this expected behavior we want?

@stephanieosan @cfarm @virginiacc

This error was captured in Jenkins build#379 - rate_checker_defaults.Verify that Rate Checker fields default to the correct values.Default credit score range

Scenario: Default credit score range
Given I navigate to the "Rate Checker" page ... failed in 13.245s
owning-a-home/check-rates/

This is odd, since all subsequent tests in the same feature passed without error.
I was not able to find the same error in other test runs

Plan:

• Consult with SE/DevOps to see what would cause this type of error
• Continue to monitor the browser tests to see if this happens again

Are ElasticSearch installation instructions needed in https://github.com/cfpb/owning-a-home#sheer--ElasticSearch in order to run OAH? After installation nothing is done with ElasticSearch.

The loan types sheet is a resource within the larger Owning a Home product that helps consumers understand the different types of loans available when buying a house.

Mortgage loan types are made up of three parts:

• Loan Term (how long you have to pay back your loan)
• Interest Rate Structure (whether the rate is fixed or able to change over time)
• Loan Program (whether a loan is part of a government program or not)

We want users to understand each individual part of the loan, as well as how they work together, in order to help them make the best financial decision for their situation.

1st Step: Team sketching session

(1) Decision Tree: User is given 2 options. After they choose one, they are able to dive deeper into the content and make other decisions based on their initial choice.

(2) Ways of visualizing the interaction between the different parts of the loan:

(3) Different potential interactive solutions:

Tabs where the user chooses to only look at one section at a time.

or

"Slot Machine" or tabel comparison where the user can build a loan type, and learn more about that type.

or

Loan type calculator where the user can put in their own information or change the values to see what happens to the monthly payments and interest rates.

or

(5) Straight forward content layouts that allow the user to see all the information they want at the same time.

or

Outcomes of sketching session:

• Provide a view where users can see the whole
• Lay out the variables at the top, lightweight intro (term + interest rate + program = loan type)
• Why I would choose this take away (allows for quick comparisons, helps consumers know what's right for their circumstances)
• Interactive element to play with variables
• Maintaining a take-away-able variation

Second Step: Wireframes

Based on our initial sketches, we put together some initial wireframes that allow us to start laying out the page, and think about the type of content we need to fit inside it.

(1) Formula written out with a modal interaction.

(2) Left-hand overview that acts as nav for the right-hand content.

(3) Overview up top with expandable content below.

Outcomes of wireframes:

• Option (3) is the strongest because it allows the user to see all the content at the same time, if they want, but also narrow in on one subject at a time.
• Modals will cause more problems than it is worth when we start looking at responsive design.
• We will start to add content to the page, and iterate the layout/design based on the content.

The Loan Options pages could use some print CSS love.

Pages in this section include:

• Loan Options landing
• Conventional loans
• FHA Loans
• Special Loan Programs

There are some guidelines for print styles being discussed here: cfpb/design-manual#281

When running grunt build after grunt vendor, I receive the following error:

Running "browserify:build" (browserify) task
>> Error: Cannot find module 'debounce' from '/code/owning-a-home/src/static/js/modules'
Warning: Error running grunt-browserify. Use --force to continue.

Aborted due to warnings.

Scenario Outline: Click Non-Navigational links

| Loan Estimates | http://consumerfinance.gov/askcfpb/1995/what-is-a-loan-estimate.html | Consumer Financial Protection Bureau |

should be:
| Loan Estimates | http://www.consumerfinance.gov/askcfpb/1995/what-is-a-loan-estimate.html | Consumer Financial Protection Bureau |

Also: the "relative_url" column header could be changed to "expected_url", since we can either pass the full or partial URL

We'll soon provide a Budgeting Worksheet PDF for users to download and complete in their preparation for shopping for a mortgage.

We'd like to create a design and functional prototype that converts this PDF into a responsive webpage, which would live at http://www.consumerfinance.gov/owning-a-home/budget-worksheet/ or a similar URL inside the Owning a Home project.

Steps for getting this done might be:

• Create a page template in Owning a Home and add the PDF content.
• Determine which layout styles to use for this page: likely similar to the Loan Options page layout, or using Capital Framework.
• Add checklist/form functionality - likely using React.
• Add link + callout for users to download the PDF to other parts of the existing website.

Visit http://www.consumerfinance.gov/owning-a-home/explore-rates/

Note in console: Uncaught ReferenceError: $ is not defined

The Explore interest rates page could use some print CSS love.

There are some guidelines for print styles being discussed here: cfpb/design-manual#281

https://github.com/cfpb/owning-a-home#configuration doesn't include information about the countyAPI. Does this need mentioning in the public instructions and/or is it required to run the project?

In newer versions of Browserify and grunt-browserify, shimming is done in the package.json file using browserify-shim and a transform:

"browser": {
    "jquery": "./src/vendor/jquery/jquery.js",
    "highcharts": "./src/vendor/highcharts-release/highcharts.js"
  },
  "browserify-shim": {
    "jquery": "global:$",
    "highcharts": "highcharts"
  },
  "browserify": {
    "transform": [ "browserify-shim" ]
  }

Unfortunately this causes the pre-shimmed npm version of jquery-ui that we're using for the slider to choke.

Error: module "jquery" not found from "/Users/scotta/Projects/owning-a-home/node_modules/jquery-ui/slider.js"

If I try shimming jquery-ui, it is unable to find its local dependencies... and if I add those as dependecies like so:

"jquery-ui/slider": { "depends": ["jquery", "jquery-ui/core", "./node_modules/jquery-ui/mouse.js", "./node_modules/jquery-ui/widget.js"] }

This error is printed to the console:

"Cannot read property 'ui' of undefined"

My guess is that I am doing something wrong...

In some cases the text in the loan checker is too long for the width of the loan type dropdown:

Consider making the loan type dropdown double the width of the other dropdowns. There appears to be space:

Or truncate the text in the dropdown with an ellipsis when dropdown is not selected.

There are several tasks with similar names (ship, release, deploy) in the gruntfile. Is this cruft from when we were beta testing the site? Can we fold them into one or two tasks? If we can't, can someone document their purposes in the README?

https://github.com/cfpb/owning-a-home/blob/master/Gruntfile.js#L402-L415 uses https://github.com/cfpb/grunt-cfpb-internal, which appears awesome, but also appears in need of TLC cfpb/grunt-cfpb-internal#2

Is this task in use or can it be removed? cc @Scotchester

As noted in #662 (diff) these lines are likely not needed

I'm getting this error on master when running grunt vendor followed by grunt:

>> Error: Cannot find module 'jquery.scrollto'

At the CFPB, we have three different levels of iconography and illustration that we use throughout our web and print experiences. Our middle tier, which we call isocons (they are icons drawn in isometric), are larger-scale icons used to illustrate values, products, topics, and processes.

As we kick off this project, we need an isocon to represent the Owning a Home product. The graphic design team has struggled with how to best represent a home in isometric for quite a while, so it was important that we push through lots of iterations and finally get it right.

Here is our current isocon library, so you can get a feel for the visual language we needed to design within:

We started by grabbing the basic shapes from the bank isocon:

Then we broke down the elements of the house (windows, door, roofing, lot) and went to work iterating:

Ultimately, we settled on a simple house that felt consistent with the rest of our library in its level of detailing:

https://github.com/cfpb/owning-a-home/blob/master/CONTRIBUTING.md has a license, but no guidelines. Consider adding at least basic guidelines, even if to say "there are no guidelines."

@ascott1 @contolini @mistergone
Why is this JS at the bottom of the homepage?

https://github.com/cfpb/owning-a-home/blob/master/src/index.html#L110

I thought maybe some JavaScript is dependent on it, since otherwise it could just be added using Jekyll, but found no references to the class name "index" outside of the CSS files.

@virginiacc

How about we try this spacing?

JS error when explore rates credit score slider is dragged in Android Chrome or iPhone Safari breaks functionality

Current behavior

• When credit slider is dragged to 600 mobile browsers, JS error occurs and credit score warning message does not appear

Expected behavior

• Credit score warning should appear when slider is dragged to lowest value

Steps to replicate behavior

1. Visit `http://www.consumerfinance.gov/owning-a-home/explore-rates in iPhone Safari and drag slider to lowest value

Screenshots

Current:

Expected:

We have form fields where users provide dollar amounts (house price, down payment). We'll need to figure out how to handle these inputs.

Do we strip commas on keyup or just form submission? Does the dollar sign live inside the editable field or outside? If inside, can the user delete the dollar sign? Some form of currency validation will also need to occur. Are decimals allowed?

Currently if the API URL is changed in config/config.json, the grunt task needs to be re-run. Consider including config/config.json in the grunt watch task unless there is some kind of performance hit in doing so.

Right now we're using a mix of bower and npm. Capital Framework uses the custom grunt vendor task with Bower, I think we should use Bower for Capital Framework/CSS dependencies and npm for JS dependencies... thoughts?

We rely on input placeholders pretty heavily in the UI, but they aren't supported in IE8. In most cases this isn't a big deal, but in a scenario where a user edits a house price they may be surprised to see that the loan value doesn't match since there is no visual cue that there is a default down payment value.