Task 1 - Refactor this code

index.html

<!-- Instruction:

Fork this pen to your account, then do the "Task 2" on your forked pen. Provide the link to your forked pen with your answer. -->

<div id="forms">
  <div class="forms_body_r">
    <h2><span class="number1"></span>My contribution will be...</h2>
    <form action="" method="post" name="myForm" id="myForm">

      <div class="formcontent" style="margin-bottom: 0px;">
        <div class='input-warn-content' id='box-AmountOther'></div>
        <input id="paymentFreq" name="paymentFreq" type="hidden" value="monthly">
        <div id="donationTabs" style="background-color: rgb(255, 255, 255); border:none; display:none;">
          <ul style="background-color: rgb(255, 255, 255); border:none;">
            <li><a href="#don-fragment-1" onclick="updateFreq('monthly');">Monthly Donation</a></li>
            <li><a href="#don-fragment-2" onclick="updateFreq('single');">Single Donation</a></li>
          </ul>
          <div id="don-fragment-1">
            <div>
              <span id="spryradio18">
                        <br>
                        <input name="regularAmount" type="radio" id="rbtnOneOff1" checked="checked" value="30" class="noborder" onclick="regularAmountOtherClear();">
                        <label for="rbtnOneOff1"><span class="cifra">$</span><span class="value">30</span></label>
              &nbsp;
              <input name="regularAmount" type="radio" id="rbtnOneOff2" value="50" class="noborder" onclick="regularAmountOtherClear();">
              <label for="rbtnOneOff2"><span class="cifra">$</span><span class="value">50</span></label> &nbsp;
              <input name="regularAmount" type="radio" id="rbtnOneOff3" value="100" class="noborder" onclick="regularAmountOtherClear();">
              <label for="rbtnOneOff3"><span class="cifra">$</span><span class="value">100</span></label> &nbsp;
              <INPUT name="regularAmount" type="radio" id="regularOther" value="Other" class="noborder" style="visibility:hidden;">
              <label for="AmountA"><span class="value">Other</span></label> <span class="cifra">$</span>
              <span class="radioRequiredMsg">You must choose an amount.</span>
              </span>
              <span id="sprytextfield9">
		                <INPUT name="regularAmountOther" type="text" id="regularAmountOther" value="" onclick="regularAmountOtherFunction()" onfocus="document.getElementById('regularOther').checked=true;" style="width: 40px;" maxlength="6">
                        <p>MONTHLY CONTRIBUTION</p>
                        <p><span class="textfieldInvalidFormatMsg" style="position:relative;top:-30px; left:280px;">Just numbers, no decimals please.</span></p>
              <p><span class="textfieldMinValueMsg" style="position:relative;top:-30px; left:320px;">Must be at least $1</span>
                <span class="textfieldRequiredMsg" style="position:relative;top:-30px; left:285px;">You must enter an amount.</span>
              </p>
              </span>
            </div>
          </div>
          <div id="don-fragment-2">
            <div>
              <span id="spryradio32">
                    <br>
                    <input name="singleAmount" type="radio" id="rbtnOneOff1" value="55" class="noborder" onclick="singleAmountOtherClear();">
                    <label for="rbtnOneOff1"><span class="cifra">$</span><span class="value">55</span></label>
              &nbsp;
              <input name="singleAmount" type="radio" id="rbtnOneOff2" checked="checked" value="80" class="noborder" onclick="singleAmountOtherClear();">
              <label for="rbtnOneOff2"><span class="cifra">$</span><span class="value">80</span></label> &nbsp;
              <input name="singleAmount" type="radio" id="rbtnOneOff3" value="125" class="noborder" onclick="singleAmountOtherClear();">
              <label for="rbtnOneOff3"><span class="cifra">$</span><span class="value">125</span></label> &nbsp;
              <INPUT type="radio" name="singleAmount" id="singleOther" value="Other" class="noborder" style="visibility:hidden;">
              <label for="AmountA"><span class="value">Other</span></label> <span class="cifra">$</span>
              <span class="radioRequiredMsg">You must choose an amount.</span>
              </span>
              <span id="sprytextfield31">
                    <INPUT name="singleAmountOther" type="text" id="singleAmountOther" value="" onclick="singleAmountOtherFunction()" onfocus="document.getElementById('singleOther').checked=true;" style="width: 40px;" maxlength="6">
                    <p>
                        <span class="textfieldInvalidFormatMsg" style="position:relative;top:-30px; left:280px;">Just numbers, no decimals.</span>
              </p>
              <p>
                <span class="textfieldMinValueMsg" style="position:relative;top:-30px; left:320px;">Must be at least $1</span>
                <span class="textfieldRequiredMsg" style="position:relative;top:-30px; left:285px;">You must enter an amount.</span>
              </p>
              </span>
            </div>
          </div>
        </div>
        <!-- Details section -->
        <h2><span class="number2"></span>My personal details</h2>

        <div>
          <label for="First Name"><span class="round">First name</span></label>
        </div>
        <div>
          <span id="sprytextfield1">
            <input name="Firstname" type="text" id="Firstname" class="required" size="40" value="" placeholder="Your first name" "moveOnMax(this,'txtLastName')">
            <span class="textfieldRequiredMsg">Please enter your first name.</span></span>
        </div>
        <div>
          <label for="Last Name"><span class="round">Last name</span></label>
        </div>
        <div>
          <span id="sprytextfield2">
            <input class="required" id="txtLasttName" name="txtLastName" size="40" type="text" value="" placeholder="Your last name" "moveOnMax(this,'regSuburb')">
            <span class="textfieldRequiredMsg">Please enter your last name.</span></span>
        </div>
        <div>
          <label for="Date of Birth"><span class="round">Date of Birth</span></label>
        </div>
        <div>
          <span id="sprytextfield33">
            <input class="rounded" id="dob" name="dob" size="40" type="text" value="" placeholder="dd/mm/yyyy" "moveOnMax(this,'regSuburb')">
            <span class="textfieldInvalidFormatMsg">Please enter your date of birth in the format dd/mm/yyyy.</span></span>
        </div>
        <div>
          <label for="regSuburb"><span class="round">Postal Address</span></label>
        </div>
        <div>
          <span id="sprytextfield3">
            <input class="required" id="address" name="address" size="50" maxlength="150" type="text"
                   value="" placeholder="Eg. 1 Queen St, Auckland ... and field will auto-complete" "moveOnMax(this,'regCity')">
            <span class="textfieldRequiredMsg">Please enter your address.</span></span>
        </div>
        <!-- Hidden fields for splitting out address from address look up -->
        <input id="dpid" name="dpid" type="hidden" value="">
        <input id="address1" name="address1" type="hidden" value="">
        <input id="address2" name="address2" type="hidden" value="">
        <input id="suburb" name="suburb" type="hidden" value="">
        <input id="city" name="city" type="hidden" value="">
        <input id="country" name="country" type="hidden" value="">
        <input id="postcode" name="postcode" type="hidden" value="">
        <div>
          <label for="areacode"><span class="round">Home Telephone</span></label>
        </div>
        <div>
          <select id="prefixRegPhone" name="prefixRegPhone" class="rounded">
                <option value=""></option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="09">09</option>
                <option value="Intl.">Intl.</option>
            </select>
          <input class="rounded" id="regPhone" maxlength="30" name="regPhone" size="30" type="tel" value="" placeholder="Don't use spaces or markers" "moveOnMax(this,'mobilePhone')">
        </div>
        <div>
          <label for="areacode"><span class="round">Mobile Telephone</span></label>
        </div>
        <div>
          <select id="prefixMobilePhone" name="prefixMobilePhone" class="rounded">
                <option value=""></option>
                <option value="020">020</option>
                <option value="021">021</option>
                <option value="022">022</option>
                <option value="027">027</option>
                <option value="029">029</option>
                <option value="Intl.">Intl.</option>
            </select>
          <input class="rounded" id="mobilePhone" maxlength="30" name="mobilePhone" size="30" type="tel" value="" placeholder="Don't use spaces or markers" "moveOnMax(this,'regEmail')">
        </div>
        <div>
          <label for="Emailnonsup" class="round">Email</label>
        </div>
        <div>
          <span id="sprytextfield5">
                <input id="Emailnonsup" maxlength="100" name="Email" size="40" type="email" value="" class="required" placeholder="Your email address" "moveOnMax(this,'regCardType')" >
                <span class="textfieldRequiredMsg">Please enter your email address.</span>
          <p>
            <span class="textfieldInvalidFormatMsg" style="position:relative;top:-58px; left:235px;">Please enter a valid email address.</span>
          </p>
          </span>
        </div>

        <div style="display:none">
          <input name="Updates" type="checkbox" class="noborder" id="Updates" value="true">
          <span style="font-size:10px;">
                Please send me updates by email. <a href="/appeal/../appeal/privacy.html" rel="shadowbox;height=167px;width=441px">We respect your privacy.</a>
            </span>
        </div>

        <h2><span class="number3"></span>Payment options</h2>

        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra ante a ornare venenatis. Cras ultrices non magna vitae tincidunt. Vestibulum consectetur ligula ac tristique mattis.</div>

        <span style="font-size:12px;text-align:left;">All transactions will be billed in New Zealand dollars.<br>
            </span>
        </p>
        <br>
        <span style="font-size:10px;text-align:left;">
            Do you need help? Contact us: 00 000 0000
        </span>
        <p>&nbsp;</p>
      </div>
  </div>
  </form>


  
</div>
<!-- .forms_body_r -->

script.js

var damo = urlParam("damo");
var daso = urlParam("daso");
var das = urlParam("das");
var dam = urlParam("dam");
var dt = urlParam("dt");

// Handle URL params
function urlParam(name) {
  var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
  if (results == null) {
    return "";
  } else {
    return results[1] || 0;
  }
}

Shadowbox.init();

// move cursor field
function moveOnMax(field, nextFieldID) {
  if (field.value.length >= field.maxLength) {
    document.getElementById(nextFieldID).focus();
  }
}

function regularAmountOtherFunction() {
  sprytextfield9 = new Spry.Widget.ValidationTextField("sprytextfield9", "integer", {
    minValue: 1,
    validateOn: ["blur"],
    isRequierd: true
  });
  document.getElementById('regularAmountOther').focus();
  if (document.getElementById('regularAmountOther').value == "") {
    document.getElementById('regularAmountOther').value = damo;
  }
}

function regularAmountOtherClear() {
  // remove validation off regularAmountOther text field
  if (sprytextfield9) {
    sprytextfield9.reset();
    sprytextfield9.destroy();
    sprytextfield9 = null;
  }
  document.getElementById('regularAmountOther').value = "";
  document.getElementById('regularOther').checked = false;
}

function singleAmountOtherFunction() {
  sprytextfield31 = new Spry.Widget.ValidationTextField("sprytextfield31", "integer", {
    minValue: 1,
    validateOn: ["blur"],
    isRequierd: true
  });
  document.getElementById('singleAmountOther').focus();
  if (document.getElementById('singleAmountOther').value == "") {
    //document.getElementById('singleAmountOther').value = daso;
  }
}

function singleAmountOtherClear() {
  // remove validation off singleAmountOther text field
  if (sprytextfield31) {
    sprytextfield31.reset();
    sprytextfield31.destroy();
    sprytextfield31 = null;
  }
  document.getElementById('singleAmountOther').value = "";
  document.getElementById('singleOther').checked = false;
}

function displayAmount() {
  var amount = 0;
  if ($("#paymentFreq").val() === "single") {
    amount = $("input:radio[name ='singleAmount']:checked").val();
    if (amount === "Other") {
      amount = $("#singleAmountOther").val();
    }
  } else if ($("#paymentFreq").val() === "monthly") {
    amount = $("input:radio[name ='regularAmount']:checked").val();
    if (amount === "Other") {
      amount = $("#regularAmountOther").val();
    }
  }

  if (amount >= 0) {
    $('#amountTotal').val(amount);
  } else {
    $('#amountTotal').val(0);
  }
}

// Start up the tabs
$(document).ready(function() {
  $("#tabs").tabs();
  $("#tabs").show();
  $("#donationTabs").tabs();
  $("#donationTabs").show();

  if (das == 0 && dam == 1) {
    $("#donationTabs").tabs("remove", 1);
  }
  if (dam == 0 && das == 1) {
    $("#donationTabs").tabs("remove", 0);
  }
  if ((dt == "s" && das == 1) || (dam == 0 && das == 1)) {
    $("#donationTabs").tabs('select', 1);
    updateFreq('single');
  } else {
    $("#donationTabs").tabs('select', 0);
    updateFreq('monthly');
  }
  displayAmount();

  // Update total amount
  $('input').change(function() {
    displayAmount();
  });
  $('input').keyup(function() {
    displayAmount();
  });
});

// Change between showing bank account tab and not
function updateFreq(option) {
  if (option === 'single') {
    $("#paymentFreq").val("single");

    if (dam != 0) {
      regularAmountOtherClear();
    }

    // Handle validation of radio and other amount fields
    if (spryradio18) {
      spryradio18.reset();
      spryradio18.destroy();
      spryradio18 = null;
    }
    if (!spryradio32) {
      spryradio32 = new Spry.Widget.ValidationRadio("spryradio32", {
        validateOn: ["change"]
      });
    }

    // Make sure the credit card payment tab is selected and direct debit payment is hidden
    $('#tabs').tabs('select', 0);
    togglePayment('credit');
    $('.directDebitParts').hide();
  } else {
    $("#paymentFreq").val("monthly");

    if (das != 0) {
      singleAmountOtherClear();
    }

    // Handle validation of radio and other amount fields
    if (spryradio32) {
      spryradio32.reset();
      spryradio32.destroy();
      spryradio32 = null;
    }
    if (!spryradio18) {
      spryradio18 = new Spry.Widget.ValidationRadio("spryradio18", {
        validateOn: ["change"]
      });
    }

    // Make sure the direct debit payment tab is available
    $('.directDebitParts').show();
    togglePayment('credit');
  }
  displayAmount();
}

/*
Shouldn't need this any longer
function upDateCCVal() {
    var e = document.getElementById("regCardType");
    var card = e.options[e.selectedIndex].value;
    var i = 0;

    // remove validation off last text field
    if(sprytextfield15){
        sprytextfield15.reset();
        sprytextfield15.destroy();
        sprytextfield15 = null;
    }

    // Set determine field length
    switch(card){
        case "V":
            i = 4;
            break;
        case "M":
            i = 4;
            break;
        case "A":
            i = 3;
            break;
        case "D":
            i = 2;
            break;
        default:
            i = 4;
    }

    // Create new validation object
    sprytextfield15 = new Spry.Widget.ValidationTextField("sprytextfield15", "integer", {minChars:i, maxChars:i, validateOn:["blur"], isRequierd:true});
    $("#regCardNumber4").attr('maxlength',i);
}
*/

function togglePayment(option) {
  if (option == 'credit') {
    $("#paymentMethod").val("credit");
    // Enable credit card validation
    /*
        if(!sprytextfield7){
            sprytextfield7 = new Spry.Widget.ValidationTextField("sprytextfield7", "none", {validateOn:["blur"]});
        }
        if(!sprytextfield12){
            sprytextfield12 = new Spry.Widget.ValidationTextField("sprytextfield12", "integer", {validateOn:["blur"], minChars:4});
        }
        if(!sprytextfield13){
            sprytextfield13 = new Spry.Widget.ValidationTextField("sprytextfield13", "integer", {validateOn:["blur"], minChars:4});
        }
        if(!sprytextfield14){
            sprytextfield14 = new Spry.Widget.ValidationTextField("sprytextfield14", "integer", {validateOn:["blur"], minChars:4});
        }
        if(!sprytextfield15){
            sprytextfield15 = new Spry.Widget.ValidationTextField("sprytextfield15", "integer", {validateOn:["blur"], minChars:2});
        }
        if(!spryselect16){
            spryselect16 = new Spry.Widget.ValidationSelect("spryselect16", {validateOn:["change"]});
        }
        if(!spryselect17){
            spryselect17 = new Spry.Widget.ValidationSelect("spryselect17", {validateOn:["change"]});
        }
        if(!spryselect20){
            spryselect20 = new Spry.Widget.ValidationSelect("spryselect20", {validateOn:["change"]});
        }
        if(!sprytextfield21){
            sprytextfield21 = new Spry.Widget.ValidationTextField("sprytextfield21", "integer", {validateOn:["blur"], minChars:3});
        }
*/
    // Disable direct debit validation
    if (sprytextfield22) {
      sprytextfield22.reset();
      sprytextfield22.destroy();
      sprytextfield22 = null;
    }
    if (sprytextfield23) {
      sprytextfield23.reset();
      sprytextfield23.destroy();
      sprytextfield23 = null;
    }
    if (sprytextfield24) {
      sprytextfield24.reset();
      sprytextfield24.destroy();
      sprytextfield24 = null;
    }
    if (sprytextfield25) {
      sprytextfield25.reset();
      sprytextfield25.destroy();
      sprytextfield25 = null;
    }
    if (sprytextfield26) {
      sprytextfield26.reset();
      sprytextfield26.destroy();
      sprytextfield26 = null;
    }
    if (sprytextfield27) {
      sprytextfield27.reset();
      sprytextfield27.destroy();
      sprytextfield27 = null;
    }
    if (sprytextfield28) {
      sprytextfield28.reset();
      sprytextfield28.destroy();
      sprytextfield28 = null;
    }
    if (sprycheckbox29) {
      sprycheckbox29.reset();
      sprycheckbox29.destroy();
      sprycheckbox29 = null;
    }
    if (sprycheckbox30) {
      sprycheckbox30.reset();
      sprycheckbox30.destroy();
      sprycheckbox30 = null;
    }
  } else {
    $("#paymentMethod").val("debit");

    // Disable credit card section validation
    /*
    if(sprytextfield7){
        sprytextfield7.reset();
        sprytextfield7.destroy();
        sprytextfield7 = null;
    }
    if(sprytextfield12){
        sprytextfield12.reset();
        sprytextfield12.destroy();
        sprytextfield12 = null;
    }
    if(sprytextfield13){
        sprytextfield13.reset();
        sprytextfield13.destroy();
        sprytextfield13 = null;
    }
    if(sprytextfield14){
        sprytextfield14.reset();
        sprytextfield14.destroy();
        sprytextfield14 = null;
    }
    if(sprytextfield15){
        sprytextfield15.reset();
        sprytextfield15.destroy();
        sprytextfield15 = null;
    }
    if(spryselect16){
        spryselect16.reset();
        spryselect16.destroy();
        spryselect16 = null;
    }
    if(spryselect17){
        spryselect17.reset();
        spryselect17.destroy();
        spryselect17 = null;
    }
    if(spryselect20){
        spryselect20.reset();
        spryselect20.destroy();
        spryselect20 = null;
    }
    if(sprytextfield21){
        sprytextfield21.reset();
        sprytextfield21.destroy();
        sprytextfield21 = null;
    }
    */

    // Enable direct debit validation
    if (!sprytextfield22) {
      sprytextfield22 = new Spry.Widget.ValidationTextField("sprytextfield22", "none", {
        validateOn: ["blur"]
      });
    }
    if (!sprytextfield23) {
      sprytextfield23 = new Spry.Widget.ValidationTextField("sprytextfield23", "integer", {
        validateOn: ["blur"],
        minChars: 2
      });
    }
    if (!sprytextfield24) {
      sprytextfield24 = new Spry.Widget.ValidationTextField("sprytextfield24", "integer", {
        validateOn: ["blur"],
        minChars: 4
      });
    }
    if (!sprytextfield25) {
      sprytextfield25 = new Spry.Widget.ValidationTextField("sprytextfield25", "integer", {
        validateOn: ["blur"],
        minChars: 7
      });
    }
    if (!sprytextfield26) {
      sprytextfield26 = new Spry.Widget.ValidationTextField("sprytextfield26", "integer", {
        validateOn: ["blur"],
        minChars: 2
      });
    }
    if (!sprytextfield27) {
      sprytextfield27 = new Spry.Widget.ValidationTextField("sprytextfield27", "none", {
        validateOn: ["blur"]
      });
    }
    if (!sprytextfield28) {
      sprytextfield28 = new Spry.Widget.ValidationTextField("sprytextfield28", "none", {
        validateOn: ["blur"]
      });
    }
    if (!sprycheckbox29) {
      sprycheckbox29 = new Spry.Widget.ValidationCheckbox("sprycheckbox29");
    }
    if (!sprycheckbox30) {
      sprycheckbox30 = new Spry.Widget.ValidationCheckbox("sprycheckbox30");
    }
  }
}

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {
  validateOn: ["blur"]
});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {
  validateOn: ["blur"]
});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {
  validateOn: ["blur"]
});
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "none", {
  validateOn: ["blur"]
});
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "email", {
  validateOn: ["blur"]
});
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "none", {
  validateOn: ["blur"]
});

var sprytextfield33 = new Spry.Widget.ValidationTextField("sprytextfield33", "date", {
  validateOn: ["blur"],
  format: "dd/mm/yyyy",
  useCharacterMasking: true,
  isRequired: false
});

var sprytextfield9 = ""; // not required until regularAmountOther radio selected
var sprytextfield31 = ""; // not required until singleAmountOther radio selected

// Amount radio buttons
var spryradio18 = ""
var spryradio32 = ""

/*
// Credit card fields
var sprytextfield12 = "";
var sprytextfield13 = "";
var sprytextfield14 = "";
var sprytextfield15 = "";
// CC expiry date
var spryselect16 = "";
var spryselect17 = "";
// Card type
var spryselect20 = "";
// Card CVC2
var sprytextfield21 = "";
// Name on card
var sprytextfield7 = "";
*/

// Debit card fields
// Account name
var sprytextfield22 = "";
// Account number
var sprytextfield23 = "";
var sprytextfield24 = "";
var sprytextfield25 = "";
var sprytextfield26 = "";
// Bank name
var sprytextfield27 = "";
// Bank branch
var sprytextfield28 = "";
// Check boxes
var sprycheckbox29 = "";
var sprycheckbox30 = "";

togglePayment('credit');

//Address lookup

window.onload = function() {
  var checker_options = {
    populates: {
      dpid: "DPID",
      address: "FullAddress",
      address1: "AddressLine1",
      address2: "AddressLine2",
      suburb: "Suburb",
      city: "CityTown",
      postcode: "Postcode"
    }
  }
  new NZPost.Addressing.Checker(document.getElementById('address'), 'e1255810-ec92-012e-5d83-005056013e39', checker_options);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="https://address.nzpost.co.nz/assets/checker.js"></script>
<script src="https://cdn.jsdelivr.net/shadowbox/3.0.3/shadowbox.js"></script>
<script src="https://secure.greenpeace.org.nz/appeal/SpryAssets/SpryValidationSelect.js"></script>
<script src="https://secure.greenpeace.org.nz/appeal/SpryAssets/SpryValidationTextField.js"></script>
<script src="https://secure.greenpeace.org.nz/appeal/SpryAssets/SpryValidationRadio.js"></script>
<script src="https://secure.greenpeace.org.nz/appeal/SpryAssets/SpryValidationCheckbox.js"></script>

style.css

@charset "utf-8";
body {
  margin: 0px;
  background-color: #70819a;
  height: 100%;
  width: 100%;
}

#container {
  margin: auto;
  height: 100%;
  width: 100%;
}

@media (min-width: 481px) {
  body {
    background: #FFF url("https://secure.greenpeace.org.nz/appeal//images/boat1702-bg.jpg") no-repeat fixed center center;
    -webkit-background-size: cover;
    /* For WebKit*/
    -moz-background-size: cover;
    /* Mozilla*/
    -o-background-size: cover;
    /* Opera*/
    background-size: cover;
    /* Generic*/
  }
  #container {
    width: 460px;
  }
}

@media (min-width: 767px) {
  #container {
    width: 747px;
  }
}

@media (min-width: 980px) {
  #container {
    width: 960px;
  }
}


/* to get the footer at the bottom */

html,
body,
#container {
  height: 100%;
}

body > #container {
  height: auto;
  min-height: 100%;
}

.title-image {
  color: white;
  font-family: arial, "lucida console", sans-serif;
  font-size: 38px;
  font-weight: bold;
  padding-left: 20px;
  position: relative;
  text-shadow: 1px 1px 2px rgba(150, 150, 150, 0.75);
  text-transform: uppercase;
}

#forms {
  font-family: arial, "lucida console", sans-serif;
  margin-top: 24px;
  margin-bottom: 40px;
  position: relative;
}

.forms_body_l,
.forms_body_r {
  text-align: left;
  padding: 10px;
  background-color: #FFF;
  border: none;
  position: relative;
  padding: 10px 20px;
  width: auto;
}

.forms_body_l {
  font-size: 14px;
  color: #000;
  margin-bottom: 14px;
  padding: 10px 20px 30px;
}

.forms_body_r {}

@media (min-width: 767px) {
  .forms_body_r {
    width: 377px;
    margin: 0 auto;
  }
}

@media (min-width: 980px) {
  .forms_body_r {
    width: 475px;
  }
}


/*
.forms_body_l {
	font-family:arial,"lucida console",sans-serif;
	font-size:14px;
	color:#000;
	float: left;
	margin:0 10px auto 0;
	padding: 10px 20px;
	width: 364px;
}*/

.forms_body_l h2 {
  color: black;
  font-size: 28px;
}


/*
.forms_body_r {
	width: 494px;
	padding-left: 25px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background:none repeat scroll 0 0 #fff;
	border:1px solid #069;
	margin-top:0;
	text-align: left;	
	position:relative;
}
*/

.forms_body_r h2 {
  color: #66CC00;
  font-size: 20px;
  font-family: arial, "lucida console", sans-serif;
}

.forms_body_r .value {
  color: #4a4a4a;
  font-size: 24px;
  font-family: arial, "lucida console", sans-serif;
  margin-right: 10px;
}

.forms_body_r .cifra {
  color: #4a4a4a;
  font-size: 18px;
  vertical-align: top;
  font-family: arial, "lucida console", sans-serif;
}


/* FORM ***********************/


/*
#forms .round{
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
background:none repeat scroll 0 0 #069;
color:#FFFFFF;
font-size:16px !important;
font-family: arial, "lucida console", sans-serif;
padding: 0px 10px 2px 10px;
font-weight:bold;
padding-top:3px;
left:3px;
}
*/

#forms .round {
  color: #069;
  font-family: arial, "lucida console", sans-serif;
  font-size: 12px !important;
  font-weight: bold;
  left: 3px;
}

.required {
  padding-right: 25px;
  height: 20px;
  background: url(https://secure.greenpeace.org.nz/appeal/style/images/required.png)right no-repeat;
  -moz-border-radius: 0 5px 5px 5px;
  -webkit-border-radius: 0 5px 5px 5px;
  width: 200px;
}

#forms input.noborder {
  border: 0px;
}

#forms select.noborder {
  border: 0px;
}

#forms radio.noborder {
  border: 0px;
}

.number1 {
  width: 47px;
  height: 39px;
  vertical-align: middle;
  background-image: url(https://secure.greenpeace.org.nz/appeal/images/1.png);
  display: inline-block;
  margin-right: 5px;
}

.number2 {
  width: 47px;
  height: 39px;
  vertical-align: middle;
  background-image: url(https://secure.greenpeace.org.nz/appeal/images/2.png);
  display: inline-block;
  margin-right: 5px;
}

.number3 {
  width: 47px;
  height: 39px;
  vertical-align: middle;
  background-image: url(https://secure.greenpeace.org.nz/appeal/images/3.png);
  display: inline-block;
  margin-right: 5px;
}

input,
textarea,
select {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #069;
  outline: medium none;
  padding: 8px;
  font-size: 14px;
  font-family: arial, "lucida console", sans-serif;
  margin-bottom: 20px;
}

#forms input.rounded {
  -moz-border-radius: 0 5px 5px 5px;
  -webkit-border-radius: 0 5px 5px 5px;
  width: 200px;
  height: 20px;
}

#tip {
  top: -60px;
  left: 200px;
  float: left;
  position: relative;
  z-index: 101;
}

#tip .image {
  float: left;
  left: -10px;
  position: relative;
  top: 23px;
}

#tip .text {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-color: #5cb9ce;
  background-color: #8cd940;
  color: #000;
  font-size: 12px !important;
  padding: 10px;
  width: 200px;
  float: left;
  line-height: 15px;
}

.update {
  font-size: 10px;
}

.radioRequiredState .radioRequiredMsg,
.radioInvalidState .radioInvalidMsg {
  position: absolute;
  top: 200px;
  left: 180px;
}

.detailslabels {
  float: left;
  width: 102px;
}

.requiredtext {
  color: #666666;
  margin-top: 5px;
}

.logoSecured {
  text-align: right;
  margin-right: 38px;
  margin-top: 0px;
}

#Submit {
  display: block;
  width: 206px;
  height: 50px;
  background: url("https://secure.greenpeace.org.nz/appeal/images/bt-submit.png") no-repeat 0 0;
}

#Submit:hover {
  background-position: 0 -50px;
}

#Submit span {
  display: none;
}


/* END_FORM ***********************/


/* PAGE ***********************/

.ui-autocomplete {
  background-color: white;
  width: 400px;
  border: 1px solid #cfcfcf;
  list-style-type: none;
  padding-left: 0px;
}

#footer {
  margin: auto;
  height: 40px;
  width: 950px;
  font-size: 11px;
  background-color: #069;
  padding: 5px;
  color: #FFF;
}


/* loading div */

.loading {
  width: 100%;
  height: 1850px;
  z-index: 1001;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}

#box-loading {
  background-color: #ff9804;
  width: 400px;
  height: 130px;
  z-index: 1002;
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  padding: 10px;
  color: #000;
  margin: auto;
}


/* card error messages divs */

.declined {
  border-style: solid;
  border-width: 1px;
  border-color: #9a0303;
  background-color: #f38686;
  padding: 10px;
  margin-bottom: 10px;
}


/* try again div */

#try-again {
  background: url(https://secure.greenpeace.org.nz/appeal/images/back-trans-70.png);
  width: 100%;
  height: 100%;
  z-index: 1003;
  position: fixed;
  display: block;
  top: 0;
  left: 0;
}

.try-again-box {
  background-color: #4d4d4d;
  width: 295px;
  height: 90px;
  z-index: 1004;
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  padding: 10px;
  color: #fff;
  margin-left: -200px;
  margin-top: -65;
  left: 50%;
  position: absolute;
  top: 0;
}

.monkey {
  width: 295px;
  height: 310px;
  z-index: 1004;
  margin-left: -190px;
  margin-top: 90px;
  left: 50%;
  position: absolute;
  top: 0;
  background: url(images/orangutan.png);
}


/* END_PAGE ***********************/

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.story-01 {
  font-size: 16px;
}

.story-02 {
  font-size: 16px;
}

.ui-tabs .ui-tabs-panel {
  border-top: none !important;
}

#ccform {
  display: -webkit-flex;
  -webkit-flex: 1;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  height: 100%;
  width: 100%;
  -webkit-flex-direction: column;
  font-family: arial, "lucida console", sans-serif;
}

#pxpayFrame {
  height: 100%;
  width: 100%;
}

.ui-tabs .ui-tabs-nav {
  list-style: none;
  position: relative;
  padding: .2em .2em 0;
  border-bottom: 5px solid #66cc00 !important;
  width: 100%;
}

.ui-corner-all {
  -webkit-border-radius: 0px !important;
}

.scroll-wrapper {
  position: fixed;
  right: 0;
  bottom: 30px;
  left: 0;
  top: 30px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

@media (min-width: 767px) {
  .scroll-wrapper {
    width: 500px;
    height: 580px;
    overflow: hidden;
    position: relative;
    top: 0;
    bottom: 0;
  }
  .scroll-wrapper iframe {
    width: 100%;
    height: 100%;
  }
}

ul.checker_box {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: solid 5px #55AF02;
  background: #E3E9F2;
  border-radius: 5px;
  font-size: 15px;
  z-index: 2;
}

ul.checker_box li {
  width: 95%;
}

ul.checker_box li a.address_item {
  padding: 2px 5px;
  color: #111;
  display: block;
  text-decoration: none;
}

ul.checker_box li a.address_hover {
  background: #FF9;
  color: #fff;
}

styles

<link href="https://secure.greenpeace.org.nz/appeal/style/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<link href="https://secure.greenpeace.org.nz/appeal/SpryAssets/SpryValidationSelect.css" rel="stylesheet" />
<link href="https://secure.greenpeace.org.nz/appeal/SpryAssets/SpryValidationTextField.css" rel="stylesheet" />
<link href="https://secure.greenpeace.org.nz/appeal/SpryAssets/SpryValidationRadio.css" rel="stylesheet" />
<link href="https://secure.greenpeace.org.nz/appeal/SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/shadowbox/3.0.3/shadowbox.css" rel="stylesheet" />

task-1-refactor-this-code.markdown

Task 1 - Refactor this code

A Pen by Francis Park on CodePen.

License.