Hazelden Betty Ford Foundation


The Hazelden Betty Ford Foundation is an addiction treatment and advocacy organization that was created in 2014 with the merger of the Minnesota-based Hazelden Foundation and the Betty Ford Center in Rancho Mirage, California in the United States.

My role is to develop and maintain components inside the website. For example, I developed the responsive header navigation that can be seen at the top of the homepage. I’ve also played an integral role in developing the article pages, search results page, locations pages, among many other components.

Visit Hazelden Betty Ford Foundation


 

Header Navigation Redesign – January 2016

Project Scope: To redesign and develop a responsive header navigation system for desktop and mobile devices that allows users to easily navigate the website and allow the website’s content creators the ability to arrange content as they wish without restrictions.

Project Execution: Incorporate creative methods of CSS3 along with minor Javascript and KnockoutJS to add limited animations and event binding. The search functionality leverages Twitter’s type-ahead library to dynamically display a list search suggestions after each keystroke.

Hazelden Desktop Gif

Hazelden Mobile Navigation


 

SIMS & PIR Registration Forms – March 2016

Project Scope: Develop a simple step-based form that allows users to register for courses held by Hazelden Betty Ford Foundation. The form must allow users the ability to upload PDF documents and have field validation as a prerequisite to proceeding to a next step. Upon submission the form should display a success message to inform the user that their application has been submitted.

Project Execution: Create an HTML5 form with an ASP.net backend that used KnockoutJS to handle the step processing as well as form validation through KOobservables. Modify the default “choose file” button for file uploads and style it to match other elements. Develop a separate form to display a table containing all form submissions and their corresponding data.

NOTE: Displaying field validation on desktop and mobile devices.

simsformdesktop

simsformmobile