css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <div data-role="page" id="edd-calculator-page">

  <!--Set the header text-->
  <div data-role="header" class="block">
    <h1>Expected Date of Delivery Calculator</h1>

  <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 id="title">Use this calculator to estimate your baby's due date. </p>
    <h2 id="EDD_Date"><span>When was the first day of your last period?</span></h2>
    <!-- first trimester information-->
    <div id="trimester_one" class="trimester">
      <h3>The First Trimester</h3>
      <p>There are 3 Trismesters in Pregnancy. The first trimester is from week 1-13. Are you feeling nauseous? Are your breasts feeling rounder and heavier than usual? If yes, then you could be in your first trimester. To stay healthy, stay away from fatty and spicy foods and be sure to take iron pills to help with the nausea. Eat dry bread and dry biscuits when you wake up. Also remember to eat a variety of fresh food so that you and your baby can get all the vitamins you need.</p>
    <!-- second trimester information-->
    <div id="trimester_two" class="trimester">
      <h3>The Second Trimester</h3>
      <p>There are 3 Trismesters in Pregnancy. The second trimester is from week 14-27. Are you feeling your baby move and kick inside of you? If no, go to the nearest clinic. If yes, drink milk or maas everyday for your baby's growth and development of bones. It is also important to have your blood pressure tested because high blood pressure is dangerous for you and your baby. In this trimester the gender could be visible and the baby's skeleton and bones begin to develop. He/she can also make sucking motions which is normal. The baby should now be able to hear, swallow, hair will begin to grow, the lungs will develop and finger and footprints will show. The baby may even respond to the mothers voice.</p>
    <!-- third trimester information-->
    <div id="trimester_three" class="trimester">
      <h3>The Third Trimester</h3>
      <p>There are 3 Trimesters in Pregnancy. The last trimester is from week 28-40. This is when your body should begin to prepare for the birth of the baby. Are you feeling mild contractions? If not, that is also okay, just be sure to go to your doctor for regular checkups to make sure you and the baby are healthy. If yes, this is quite normal because these are preparing you for labor. To prepare for labor and the birth, make sure you take your pajamas and toiletries to the hospital. During the third trimester, the baby's eyes open and bones fully develop. The nervous system continues to develop and the baby practices breathing. He/she can detect light, hold a firm grasp and will gain weight quickly. And soon the due date will arrive. </p>
    <p id="prompt" class="trimester">We understand that having a baby is a big change, so please complete the following form to recieve the best support!</p>
    <a href='' data-role='button' id="next_btn" class="trimester">Next</a>

    <!--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 id="Calender">
      <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}'/>
<!-- This code displays mutiple choice options that correspond with the question --> 

<div id="questionaire_form">
  <form action="" class= "multipleC" id="submitCal" onsubmit="CalculateDepression()">
    <fieldset class="question"> 
      <legend> 1. I have been able to laugh and see the funny side of things</legend>
      <label for="answer"> As much as I always could</label>
      <input type="radio" name="answer" value="0"><br> 

      <label for="answer">Not quite so much now</label>
      <input type="radio" name="answer" value="1"><br>

      <label for="answer">Definitely not so much now</label>
      <input type="radio" name="answer" value="2"><br> 

      <label for="answer">Not at all</label>
      <input type="radio" name="answer" value="3"><br>
    <fieldset class="question"> 
      <legend> 2. I have looked forward with enjoyment to things:</legend>
      <label for="answer"> As much as I ever did</label>
      <input type="radio" name="answer2" value="0"><br> 

      <label for="answer">A little less than I used to</label>
      <input type="radio" name="answer2" value="1"><br>

      <label for="answer">Much less than I used to</label>
      <input type="radio" name="answer2" value="2"><br> 

      <label for="answer">Hardly at all</label>
      <input type="radio" name="answer2" value="3"><br>
    <fieldset class="question"> 
      <legend> 3. I have blamed myself when things went wrong, and it wasn't my fault:</legend>
      <label for="answer">Yes most of the time</label>
      <input type="radio" name="answer3" value="3"><br> 

      <label for="answer">Yes, some of the time</label>
      <input type="radio" name="answer3" value="2"><br>

      <label for="answer">Not very much</label>
      <input type="radio" name="answer3" value="1"><br> 

      <label for="answer">No, never</label>
      <input type="radio" name="answer3" value="0"><br>
    <fieldset class="question"> 
      <legend> 4. I have been worried and I don't know why</legend>
      <label for="answer"> No not at all</label>
      <input type="radio" name="answer4" value="0"><br> 

      <label for="answer">Hardly ever</label>
      <input type="radio" name="answer4" value="1"><br>

      <label for="answer">Yes sometimes</label>
      <input type="radio" name="answer4" value="2"><br> 

      <label for="answer">Yes very much</label>
      <input type="radio" name="answer4" value="3"><br>
    <fieldset class="question"> 
      <legend> 5. I have felt scared or panicky and I don't know why</legend>
      <label for="answer">Yes quite a lot</label>
      <input type="radio" name="answer5" value="3"><br> 

      <label for="answer">Yes sometimes</label>
      <input type="radio" name="answer5" value="2"><br>

      <label for="answer">No, not much</label>
      <input type="radio" name="answer5" value="1"><br> 

      <label for="answer">Not at all</label>
      <input type="radio" name="answer5" value="0"><br>
    <fieldset class="question"> 
      <legend> 6.I have had difficulties in coping with things </legend>
      <label for="answer"> Yes, most of the time</label>
      <input type="radio" name="answer6" value="3"><br> 

      <label for="answer">Yes, sometimes</label>
      <input type="radio" name="answer6" value="2"><br>

      <label for="answer">Not very much</label>
      <input type="radio" name="answer6" value="1"><br> 

      <label for="answer">No never</label>
      <input type="radio" name="answer6" value="0"><br>
    <fieldset class="question"> 
      <legend> 7. I have been so unhappy that i've had difficulties sleeping</legend>
      <label for="answer"> Yes most of the time</label>
      <input type="radio" name="answer7" value="3"><br> 

      <label for="answer">Yes, sometimes</label>
      <input type="radio" name="answer7" value="2"><br>

      <label for="answer">Not very much</label>
      <input type="radio" name="answer7" value="1"><br> 

      <label for="answer">No never</label>
      <input type="radio" name="answer7" value="0"><br>

    <fieldset class="question"> 
      <legend> 8. I have felt sad and miserable</legend>
      <label for="answer"> Yes, most of the time</label>
      <input type="radio" name="answer8" value="3"><br> 

      <label for="answer">Yes, quite a lot</label>
      <input type="radio" name="answer8" value="2"><br>

      <label for="answer">Not very much</label>
      <input type="radio" name="answer8" value="1"><br> 

      <label for="answer">Not at all</label>
      <input type="radio" name="answer8" value="3"><br>
    <fieldset class="question"> 
      <legend> 9. I have been so unhappy that i have been crying:</legend>
      <label for="answer">Yes, most of the time</label>
      <input type="radio" name="answer9" value="3"><br> 

      <label for="answer">Yes, quite a lot</label>
      <input type="radio" name="answer9" value="2"><br>

      <label for="answer">Only sometimes</label>
      <input type="radio" name="answer9" value="1"><br> 

      <label for="answer">No never!</label>
      <input type="radio" name="answer9" value="0"><br>
    <fieldset class="question"> 
      <legend> 10. I have thought of harming myself or ending my life</legend>
      <label for="answer"> Yes, quite alot</label>
      <input type="radio" name="answer10" value="3"><br> 

      <label for="answer">Sometimes</label>
      <input type="radio" name="answer10" value="2"><br>

      <label for="answer">hardly ever</label>
      <input type="radio" name="answer10" value="1"><br> 

      <label for="answer">Never</label>
      <input type="radio" name="answer10" value="0"><br>

    <input id="submit_btn" type=submit value="Submit"> 
 <div id=depression class="trimester"> Your score indicates that you may be suffering from depression or anxiety. This is quite common during pregnancy and we recommend that you contact someone for support during this diffcult time.
   <a href="www.sadag.org/"> South African Depression and Anxiety Support Group </a> <br> To contact a counsellor between 8am-8pm Monday to Sunday, Call: 011 234 4837 / Fax number: 011 234 8182
<br>For a suicidal Emergency contact us on 0800 567 567
<br>24hr Helpline 0800 12 13 14
<br>SMS 31393 (and we will call you back)
 <div id=nodepression class="trimester"> Your score indicates that you are not suffering from depression during your pregnancy. We still encourage you to seek support during this exciting time. <br><br> <a href="https://sa.momsmatter.co.za/businessdirectory/672/new-mom-support-groups"> Moms Matter South Africa </a> </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" class="block" id="footer">
    <a href='' data-role='button' id="calcID" onclick="CalculateEDD('EDD-input')">Calculate </a> 
              body {
  position: relative;
  text-align: center;

  position: relative;

.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-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;

.block {
  background-color: #ffbe80 !important;

#next_btn {
  background-color: #6bc2e1;
  color: #fff !important;
  font-size: 1.2em;
  font-weight: normal;
  letter-spacing: .1em;

#footer {
  width: 100%;
  position: absolute;
  bottom: 0;

#questionaire_form {
  display: none;
  height: auto;
  position: absolute;
  top: 20%px;
  left: 10%;
  text-align: left;

.question {
  border: #ffbe80 2px solid !important;
  margin-bottom: 25px !important;

.ui-radio {
 margin: -15px 0 0 0;

label {
  padding-left: 50px;
#title {
  font-style: bold;
.trimester {
  display: none;
  padding-bottom: 20px;
  color: black;

.ui-input-btn {
  background-color: #6bc2e1 !important;
  color: #fff !important;
  font-weight: normal;
  font-size: 1.2em;
  letter-spacing: .1em;

              // 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);
 //calculate trimester
 var now = moment();
 var input = moment(date);
 var trimester = now.diff(input, "days");
 //show correct trimester information 
 if (trimester < 84) {
   } else if (trimester <= 168){
   } else {

//This function displays the quetionaire form previously built in the HTML
$("#next_btn").on("click", function() {

//This function calculates the questionnaire score
function CalculateDepression() {
  var score = 0;

  $("input:radio:checked").each( function() {
    score += parseInt($(this).val());         
if (score >=14) { 
  } else { 

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................