cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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="edd-calculator-page">

  <!--Set the header text-->
  <div data-role="header">
    <h1>EDD Calculator</h1>
  </div>

  <div role="main" class="ui-content">
    <!--Set the text to insruct the user on what to do. The header id is used when updating the text to display the edd-->
    <p>Use this calculator to estimate the expected delivery date for a pregnant woman.</p>
    <h2 id='EDD_Date'><span>When was the first day of her last period?</span></h2>

    <!--Built in calendar display using jquery mobile. The various data-options can be used to change the look and feel of the
				calendar and limit the dates to certain criteria. Fiddle around to design a calendar you like.-->
    <div>
      <input type="text" id="EDD-input" data-role="datebox" data-theme="d" data-options='{"mode":"calbox", "overrideDateFormat":"%Y-%m-%d", "overrideHeaderFormat": "%A, %-d %B, %Y", "overrideDateFieldOrder":["d","m","y"], "useHeader":false, "useInline": true, "hideInput": true, "themeDateToday": "d", "themeDate": "a", "beforeToday": true}'
      />
    </div>
  </div>

  <!--Set the footer content. Pressing the calculate button calls the CalculateEDD() with the onclick method. This is 
			a javascript function used to determine the EDD.-->
  <div data-role="footer">
    <a href='' data-role='button' onclick="CalculateEDD('EDD-input')">Calculate</a>
  </div>

</div>
            
          
!
            
              body {
  text-align: center;
}

.ui-header .ui-title {
  white-space: normal;
  margin: 0.6em 10% 0.8em !important;
}

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

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

.ui-datebox-container {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  width: 100% !important;
  background-color: transparent;
}

.ui-field-contain {
  border: 0;
}
            
          
!
            
                    // This function takes an input date, defined by the name property and calculates the EDD
      // using the moment.js library. The EDD is calculated by adding 280 days to the input date
      // and the format is changed to be more reader-friendly.
      // Finally, the text of the header is then updated to display on screen.
/*
      function CalculateEDD(name) {
        var date = $("input[name='" + name + "'").val();
        var edd = moment(date).add(280, 'days').f  */    // This function takes an input date, defined by the name property and calculates the EDD
      // using the moment.js library. The EDD is calculated by adding 280 days to the input date
      // and the format is changed to be more reader-friendly.
      // Finally, the text of the header is then updated to display on screen.

      function CalculateEDD(id) {
        var date = $("#" + id).val();
        var edd = moment(date).add(280, 'days').format('DD MMM YYYY');
        $("#EDD_Date").html("Your estimated EDD is:   " + edd);
      };ormat('DD MMM YYYY');
        $("#EDD_Date").text("Your estimated EDD is:   " + edd);
      };

            
          
!
999px
Loading ..................

Console