cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div data-role="page" id="measurements">
  <div data-role="header"  style="background-color:yellowgreen">
    <h1>Growth Calculator Data</h1>
  </div>

  <div role="main" class="ui-content">
    <form id='measurements-form'>

      <!--This is an example of a radio buttion, where one option is selected between the two. Which ever input is selected the 'gender' variable will be populated with the value 'M' or 'F', depending on the input.-->
      <div class="ui-field-contain">
        <label for="gender">Please select the gender:</label>
        <fieldset data-role="controlgroup" data-type="horizontal">
          <input type="radio" name="gender" value="M" data-theme="a" id='Male' checked="checked" />
          <label for="Male">Male</label>
          <input type="radio" name="gender" value="F" data-theme="a" id='Female' />
          <label for="Female">Female</label>
        </fieldset>
      </div>

      <div data-role="fieldcontain">
        <label for="height">Height (cm):</label>
        <input type="number" name="height" min="0" max="120" value="" />
      </div>
      <div data-role="fieldcontain">
        <label for="circumference">Left Mid-Upper Arm Circumference (mm):</label>
        <input type="number" name="circumference" value="" />
      </div>
      <div data-role="fieldcontain">
        <label for="weight">Weight (kg):</label>
        <input type="number" name="weight" value="" />
      </div>

      <!--The dob is used here to determine the age. Notice that the code is identical to that of the EDD calendar, except 
					the data-options 'mode' is set to a flipbox, changing the layout of the datebox. Fiddle around with other formats to 
					find the databox mode that you like best.

					The data only has values for children who are up to 1856 days old, so ensure that you input a dob that is young enough.
					Challenge: You can also limit the dates so that the user cannot go past 1856 days, so the input will always be valid.
					Give it a go. https://dev.jtsage.com/DateBox/doc/4-2-limit/ will point you in the right direction. The 'beforeToday' 
					option is an example of data limiting, where it only allows dates that are before today to be entered.-->

      <div data-role="fieldcontain">
        <label for="dob">DOB:</label>
        <div>
          <input name="dob" type="text" data-role="datebox" data-options='{"mode":"flipbox", "overrideDateFormat":"%Y-%m-%d", "useHeader":false, "hideInput": true, "showInitialValue": true, "useInline": true, "beforeToday":true, "useSetButton":false, "useImmediate":true}'
          />
        </div>
      </div>

    </form>
  </div>

  <!--The footer a 'data-rel' property which tells us what the button does. In this case, the 'Calculate' button first calculates the relevant data, then redirects to another page of id 'results'.-->
  <div data-role="footer" STYLE="background-color: yellowgreen">
    <a href="#results" data-role="button" data-rel="page" onclick="return calculateResults('#measurements-form')">Calculate</a>
  </div>

</div>

<div data-role="page" id="results">

  <div data-role="header" style="background-color:yellowgreen">
    <h1>Results</h1>
  </div>

  <div role="main" class="ui-content">

    <!--Each of these spans are changed in the calculateResults function as they can only be populated once the 
				data has been input-->
    <div class="ui-grid-a" style='text-align:center'>
      <div class="ui-block-a">Gender</div>
      <div class="ui-block-b"><span id="gender-result"></span></div>
      <div class="ui-block-a">Age (days)</div>
      <div class="ui-block-b"><span id="age-result"></span></div>
      <div class="ui-block-a">Height/length (cm)</div>
      <div class="ui-block-b"><span id="height-result"></span></div>
      <div class="ui-block-a">Height for age</div>
      <div class="ui-block-b"><span id="lhfa-result"></span></div>
      <div class="ui-block-a"> Left Mid Upper-Arm Circumference (mm)</div>
      <div class="ui-block-b"><span id="circumference-result"></span></div>
      <div class="ui-block-a">Nutrition Rate</div>
      <div class="ui-block-b"><span id="malnutrition-result"></span></div>
      <div class="ui-block-a">Weight (kg) </div>
      <div class="ui-block-b"><span id="weight-result"></span></div>
      <div class="ui-block-a">Weight for Height</div>
      <div class="ui-block-b"><span id="wfh-result"></span></div>
    </div>

    <div data-role="footer" style="background-color:yellowgreen">
      <a href="#" data-role="button" data-rel="back">Back</a>
    </div>
  </div>
            
          
!
            
              body {
  text-align: center;
}

label {
  color: yellowgreen;
  ;
  font-size: 220%;
}

.dob {
  color: yellowgreen;
}

.ui-header .ui-title {
  white-space: nowrap;
  color: dimgrey;
  length: 200px;
  width: 300px;
  margin: 0.6em 10% 0.8em !important;
}

.ui-footer .ui-btn {
  overflow: visible !important;
  white-space: normal !important;
  padding: 12px;
  font-size: 14px;
  background-color: ;
}

.ui-datebox-inline,
.ui-datebox-inlineblind,
.ui-datebox-container {
  border: 0px !important;
  background-color: #FF7F50;
  padding: 10px;
  margin-left: 5px;
}

.ui-datebox-header {
  margin-bottom: 10px;
}

.ui-datebox-flipcenter {
  width: 90% !important;
}

.ui-datebox-flipcontent div {
  width: 27%;
}

.ui-datebox-inline,
.ui-datebox-inlineblind,
.ui-datebox-container {
  border: 0px !important;
}

@media (min-width: 28em) {
  .ui-field-contain>label, .ui-field-contain .ui-controlgroup-label, .ui-field-contain>.ui-rangeslider>label {
    float: none !important;
    width: inherit !important;
    margin: 0.6em 10% 0.8em !important;
    \\this is the boxes headings
  }
  .
}

.ui-field-contain>label~[class*=ui-],
.ui-field-contain .ui-controlgroup-controls {
  float: none !important;
  width: inherit !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.ui-field-contain .ui-textinput-autogrow {
  width: 100% !important;
}
}
            
          
!
            
              function calculateResults(form) {

  // Parses each input from the form into variables of the appropriate type (eg. int, float). For the age, the difference between
  // todays date and the dob is used.
  var gender = $("input[name=gender]:checked", form).val();
  var ht = parseFloat($("input[name=height]", form).val()).toFixed(1); // round to 1 decimal (string)
  var height = parseFloat(ht);
  var dob = $("input[name=dob]", form).val();
  var age_fn = moment().diff(dob, "days");
  var age = parseInt(age_fn);
  var lhfa_z_score;

  if (ht == "NaN") {
    MobenziGW.Toast("Please enter a height value");
    return false;
  }

  if (height > 120) {
    MobenziGW.Toast("Please enter a height below 120cm");
    return false;
  }

  if (age > 1850) {
    MobenziGW.Toast("Please enter an age below 6 years");
    return false;
  }

  var cir = parseFloat($("input[name=circumference]", form).val()).toFixed(1); // round to 1 decimal (string)
  var circumference = parseFloat(cir);

  if (circumference > 0 && 160 > circumference) {
    var malnutrition = "<strong>Severe malnutrition</strong>";
  } else if (circumference > 160 && 185 > circumference) {
    malnutrition = "<strong>Moderate Malnutrition</strong>";
  } else {
    malnutrition = "<strong>Properly Nourished</strong>";
  }

  var gender = $("input[name=gender]:checked", form).val();
  var ht = parseFloat($("input[name=height]", form).val()).toFixed(1); // round to 1 decimal (string)
  var height = parseFloat(ht);
  var wt = parseFloat($("input[name=weight]", form).val()).toFixed(1); // round to 1 decimal (string)
  var weight = parseFloat(wt);
  var wfh_z_score;

  if (wt == "NaN") {
    MobenziGW.Toast("Please enter a weight value");
    return false;
  }

  $("#height-result").html(height + " cm");
  $("#gender-result").html((gender == "M" ? "Male" : "Female"));
  $("#age-result").html(age + " days");
  $("#lhfa-result").html("");
  $("#circumference-result").html(circumference + " mm");
  $("#malnutrition-result").html(malnutrition);
  $("#weight-result").html(weight + "kg");
  $("#wfh-result").html("");

  // Length/height for age. Depending on the gender, the the lfhadata variable will be populated with different values. 
  // The data only has values for children who are up to 1856 days old, so ensure that your dob meets this criteria.
  if (gender == "F") {
    var lhfadata = lhfa_girls();
  } else {
    var lhfadata = lhfa_boys();
  }

  // Calculates the score from the lfhadata data which will be used to categorise the type of growth.  
  var lhfa_z_scores = lhfadata[age];
  for (var i = -4; i <= 4; i++) {
    if (height < parseFloat(lhfa_z_scores[i])) {
      lhfa_z_score = i;
      break;
    }
  }

  // Depending on the score that was calculated, the growth type will be determined and the id, lhfa-result, will be displayed.
  if (lhfa_z_score <= -2 && lhfa_z_score > -3) {
    $("#lhfa-result").html("<strong>Moderately stunted</strong>");
  } else if (lhfa_z_score <= -3) {
    $("#lhfa-result").html("<strong>Severely stunted</strong>");
  } else {
    $("#lhfa-result").html("<strong>No stunting</strong>");
  }

  if (gender == "F") {
    var wfhdata = wfh_girls();
  } else {
    var wfhdata = wfh_boys();
  }

  // Calculates the score from the lfhadata data which will be used to categorise the type of growth.  
  var wfh_z_scores = wfhdata[height];
  for (var i = -4; i <= 4; i++) {
    if (weight < parseFloat(wfh_z_scores[i])) {
      wfh_z_score = i;
      break;
    }
  }

  if (wfh_z_score <= -2 && wfh_z_score > -3) {
    $("#wfh-result").html("<strong>Percentile: 50% - Your baby is average height.</strong>");
  } else if (wfh_z_score <= -3) {
    $("#wfh-result").html("<strong>Percentile: 36% - Your baby is shorter than average.</strong>");
  } else {
    $("#wfh-result").html("<strong>Percentile: 76% - Your baby is taller than average. </strong>");
  }
};
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console