Updated README.md with a bit more info.

.gitignore

@@ -1,4 +1,5 @@
 *.py[cod]
+node_modules
 
 # C extensions
 *.so

CONTRIBUTING.md

@@ -0,0 +1,38 @@
+To read more about contributing to open source see https://opensource.guide/
+
+# Submitting a PR
+
+**All Pull Requests should be made against dev (even bug fixes).**
+
+Before submitting a large PR for a new feature or improvement, please create an issue first. This will allow us to discuss the feature before much development effort is put into it. After we've agreed that the feature would fit in the scope of the project, or if the change is small enough to not require an issue, follow these steps to create a PR:
+
+- Make a new branch
+
+git checkout -b my-fix dev
+
+- Make your changes, including test cases if applicable. Make sure to follow the coding guidelines described below.
+- Commit your errors with a descriptive message
+
+git add my-new-file.xyz modified-file.xyz
+
+git commit
+
+- Push your changes to Github
+
+git push origin my-fix
+
+- Create a new Pull Request
+- We will review your PR and request changes if necessary.
+- When you make a new commit fixing a requested change, please squash your changes using git rebase.
+- Once all requested changes have been made, we will merge your pull request.
+
+
+# Coding Guidelines
+
+- Wrap lines at 100 characters
+- Use spaces not tabs
+- New lines should be indented by two spaces
+- Never add a trailing comma to multiline lists in JS
+- Don't add extra spaces between parenthesis, i.e. do foo(1, 2), not foo( 1, 2 )
+- Always use spaces around binary operators, i.e. $i = 0, not $i=0
+- Use camelCase for variables and PascalCase for class constructors.

README.md

@@ -1,17 +1,35 @@
-Domestic-Workers
-================
-This project is meant to create a system which takes inputs from users on how much they pay or think they should pay a domestic worker
-and tells them more about what that amount means to the lives of a domestic worker's household.
-The user upon learning about the meaning of the payment can then adjust the amount they suggested and should be able to, in real time,
-see what that implies.
+# Living Wage
 
-Assumptions can be altered, including the costs for health in a month, education, transport, and the cost for getting 2000 calories
-per day per person
+![](https://img.shields.io/badge/stability-work_in_progress-lightgrey.svg) ![](https://img.shields.io/uptimerobot/ratio/m781140732-b48ad7a21c301e7ba0b09785.svg) ![](https://img.shields.io/badge/PRs-welcome-brightgreen.svg) [![](https://img.shields.io/badge/slack%20channel-%23living--wage--project-blue.svg)](https://zatech.github.io/)
 
-There will be some core data in the backend including how they compare to minimum wage as well as information on costs for
-per person health, per child education, transportation, rent, and communications.
 
-Deployment
-==========
+This repository contains all user-facing code required to render [living-wage.co.za](http://living-wage.co.za/). Initially developed by [OpenUp](https://openup.org.za/). However, project is now maintained on a volunteer basis by the [Codebridge Newlands community](https://www.facebook.com/codebridge.newlands/).
 
-This project is static HTML and Javascript and is served directly from the gh-pages branch on GitHub.
+## Introduction
+A wage that is an income that is high enough to maintain a "normal standard of living". A normal standard of living refers to the level of wealth, comfort, material goods, and necessities available to a certain socio-economic class in a certain geographic area, usually a country.
+Cost of living is the amount of money needed to sustain a certain level of living, including basic expenses such as housing, food, taxes and health care. A cost-of-living index is a theoretical price index that measures relative cost of living over time or regions. It is an index that measures differences in the price of goods and services, and allows for substitutions with other items as prices vary.
+
+The purpose of this calculator is to assist the user to determine a realistic wage, initially within the context of a domestic worker, which is influenced by factors such as transport, children, education, food, housing, etc.
+
+
+## Getting Started
+
+### Local development
+
+1. Clone this project by running `git clone https://github.com/codebridge-za/living-wage.git`.
+2. Make sure you have the latest [NodeJS](https://nodejs.org/en/) installed.
+3. Run `npm install` in the root folder of the repository.
+4. Run `npm start` to spin up the development server.
+5. Open `localhost:8000` in your browser.
+
+### Testing
+
+It is recommended to test on an webserver such as Apache. 
+However, this calculator is so simple you can just test it by opening the index.html.
+
+### Technologies
+1. HTML
+2. CSS
+3. JavaScript
+4. jQuery
+5. Bootstrap

css/styles.css

@@ -222,6 +222,10 @@ h1, h2, h3, h4, h5, h6{
 
 }
 
+#outer-pay-amount-week, #outer-pay-amount-month {
+    display: none;
+}
+
 .btn-primary{
 
     background: #059;

index.html

@@ -7,7 +7,7 @@
   <title>Living Wage | Code for South Africa </title>
 
   <!-- Bootstrap -->
-  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
   <link href="css/bootstrap-select.min.css" rel="stylesheet">
   <link href="css/bootstrap-slider.css" rel="stylesheet">
   <link href="css/styles.css" rel="stylesheet">
@@ -76,20 +76,52 @@ <h1>Living Wage</h1>
 
         <form id="input-form" role="form">
           <div class="form-group">
-            <label class="control-label lead question" for="pay-amount">How much do you pay your household worker?</label><br>
+            <label class="control-label lead question" for="pay-amount-day">How much do you pay your household worker?</label><br>
             <div class="row">
               <div class="col-sm-9">
-                <input
-                    id="pay-amount"
-                    class="slider"
-                    style="width: 100%;"
-                    type="text"
-                    name="pay-amount"
-                    data-slider-min="50"
-                    data-slider-max="8000"
-                    data-slider-step="10"
-                    value="500"
-                    data-slider-value="500"/>
+                  <input
+                  id="pay-amount"
+                  type="text"
+                   style="display: none;">
+                <div id="outer-pay-amount-day">
+                  <input
+                      id="pay-amount-day"
+                      class="slider"
+                      style="width: 100%;"
+                      type="text"
+                      name="pay-amount"
+                      data-slider-min="50"
+                      data-slider-max="600"
+                      data-slider-step="10"
+                      value="100"
+                      data-slider-value="100"/>
+                </div>
+                <div id="outer-pay-amount-week">
+                  <input
+                      id="pay-amount-week"
+                      class="slider"
+                      style="width: 100%;"
+                      type="text"
+                      name="pay-amount-week"
+                      data-slider-min="200"
+                      data-slider-max="3000"
+                      data-slider-step="50"
+                      value="500"
+                      data-slider-value="500"/>
+                </div>
+                <div id="outer-pay-amount-month">
+                  <input
+                      id="pay-amount-month"
+                      class="slider"
+                      style="width: 100%;"
+                      type="text"
+                      name="pay-amount-month"
+                      data-slider-min="1000"
+                      data-slider-max="13000"
+                      data-slider-step="50"
+                      value="2000"
+                      data-slider-value="2000"/>
+                </div>
               </div>
               <div class="col-sm-3">
                 <select class="selectpicker" name="pay-rate" data-width="100%" id="pay-rate">
@@ -370,7 +402,7 @@ <h4 class="panel-title">
               </p>
               <p class="note">
                 Transportation is not cheap in Cape Town (public or private) and this is likely true through South Africa.
-                Of course if the tariff or the number of trips from poorer areas to urban employer centres were lower
+                Of course, if the tariff or the number of trips from poorer areas to urban employer centres were lower
                 then the cost would be lower. But it can also be higher depending on the distance.
               </p>
 
@@ -519,7 +551,7 @@ <h4 class="panel-title">
 
 										<div class="form-group">
 			                <label for="education-cost" class="lead question">What much do you estimate your domestic worker spends on <strong>sending kids to school</strong>?</label>
-			                <p>Estimate the cost per school aged child: </p>
+			                <p>Estimate the cost per school-aged child: </p>
 			                <input
 			                    id="education-cost"
 			                    class="slider"
@@ -606,7 +638,7 @@ <h4 class="panel-title">
 							    <div class="col-sm-9">
 
 										<div class="form-group">
-			                <label for="communication-cost" class="lead question">What do you estimate each member of your domestic worker's household spends on <strong>communcation</strong>?</label><br>
+			                <label for="communication-cost" class="lead question">What do you estimate each member of your domestic worker's household spends on <strong>communication</strong>?</label><br>
 			                <p>Estimate the monthly cost per person in the household:</p>
 			                <input
 			                    id="communication-cost"
@@ -744,7 +776,7 @@ <h4 class="panel-title">
               	These include clothing, household items, personal care, and emergency expenses. Estimate other costs incurred per person in the household.
               </p>
               <p class="note">
-                This should including for emergencies and procurement of durable goods, transportation of goods (gas cylinders, groceries, etc), implicit and explicit costs of running a household.
+                This should include for emergencies and procurement of durable goods, transportation of goods (gas cylinders, groceries, etc), implicit and explicit costs of running a household.
               </p>
 
           </div>
@@ -785,7 +817,7 @@ <h4 class="panel-title">
 
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
-<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 <script src="js/bootstrap-select.min.js"></script>
 <script src="js/bootstrap-slider.js"></script>
 <script src="js/main.js"></script>

js/main.js

@@ -168,8 +168,8 @@ function update_display(class_name) {
 
 function validate_input(household_size, pay_rate, pay_amount) {
     if (!$.isNumeric(pay_amount)) {
-        $("#pay-amount").parents('.form-group').addClass('has-error');
-        $("#pay-amount").focus();
+        $("#pay-amount-" + pay_rate).parents('.form-group').addClass('has-error');
+        $("#pay-amount-" + pay_rate).focus();
         pay_amount = false;
     }
     if (household_size && pay_rate && pay_amount){
@@ -180,26 +180,47 @@ function validate_input(household_size, pay_rate, pay_amount) {
     return false
 }
 
+function update_sliders(rate) {
+    // Update all the sliders to show the equivalent of the matching value
+
+    $("#pay-amount-day").slider('setValue', $("#pay-amount").val() / constants.workdays_per_month, true);
+    $("#pay-amount-week").slider('setValue', $("#pay-amount").val() / constants.weeks_per_month, true);
+    $("#pay-amount-month").slider('setValue', parseFloat($("#pay-amount").val()), true);
+
+    // Hide all sliders.
+    $("#outer-pay-amount-day").hide();
+    $("#outer-pay-amount-week").hide();
+    $("#outer-pay-amount-month").hide();
+
+    // Show the slider matching the selected rate.
+    $("#outer-pay-amount-" + rate).show();
+}
 
 function update_output() {
 
     // read input
     var household_size = $("#household-size").val();
     var pay_rate = $("#pay-rate").val();
-    var pay_amount = $("#pay-amount").val();
-
+    var pay_amount = $("#pay-amount-" + pay_rate).val();
+    
     if (validate_input(household_size, pay_rate, pay_amount)) {
         var monthly_expenditure = calculate_expenditure(household_size);
 
         // calculate monthly pay
         var monthly_pay = 0;
         // Assumption using DoL info - a month includes 4.33 weeks and a week is for 5 work days.
-        if (pay_rate == "day")
+        if (pay_rate == "day") {
             monthly_pay = pay_amount * constants.workdays_per_month;
-        else if (pay_rate == "week")
+        }
+        else if (pay_rate == "week") {
             monthly_pay = pay_amount * constants.weeks_per_month;
-        else if (pay_rate == "month")
+        }
+        else if (pay_rate == "month") {
             monthly_pay = pay_amount;
+        }
+
+        // Update the overall pay-amount input box.
+        $("#pay-amount").val(monthly_pay);
 
         var output_percentage = (monthly_pay / monthly_expenditure);
         output_percentage *= 100;
@@ -266,13 +287,20 @@ $(document).ready(function() {
         }, 900, 'swing');
     });
 
-    $("#pay-amount").focus();
+    $("#pay-amount-day").focus();
 
     // initialize dropdown selects
     $("#pay-rate").selectpicker().on("change", function() {
+        update_sliders($("#pay-rate").val());
+        update_output();
+    })
+    $("#pay-amount-day").on("change", function() {
+        update_output();
+    })
+    $("#pay-amount-week").on("change", function() {
         update_output();
     })
-    $("#pay-amount").on("change", function() {
+    $("#pay-amount-month").on("change", function() {
         update_output();
     })
     $('#assumption-container .selectpicker').selectpicker().on("change",function() {