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="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
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