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

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" class="block">
    <h1>Expected Date of Delivery 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 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>
    </div>
    
    <!-- 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>
    </div>
    
    <!-- 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>
    </div>
    
    <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}'/>
    </div>   
</div>
  
<!-- 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>
    
    <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>
   
    <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>
    
    <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>
  
    <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>
    
    <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>
  
    <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>

    <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>
    
    <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>
    
    <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>
    </fieldset>

    <input id="submit_btn" type=submit value="Submit"> 
  </form>
</div>  
 <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>
 <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="http://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> 
  </div>
 
            
          
!
            
              body {
  position: relative;
  text-align: center;
}

.ui-content{
  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-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;
}

.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;
}
#calcID{
  background-color:#6bc2e1;
  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);
  $("#Calender").hide();     
  $("#title").hide(); 
  $("#calcID").hide();  
  $("#next_btn").show();
  $("#weeks").show();
  
 //calculate trimester
 var now = moment();
 var input = moment(date);
 var trimester = now.diff(input, "days");
  
 //show correct trimester information 
 if (trimester < 84) {
   $("#trimester_one").show();
   } else if (trimester <= 168){
   $("#trimester_two").show();
   } else {
   $("#trimester_three").show();
  }
};

//This function displays the quetionaire form previously built in the HTML
$("#next_btn").on("click", function() {
  
  $("#questionaire_form").show();
  $("#title").hide();
  $("#EDD_Date").hide();
  $("#next_btn").hide();
  $("#weeks").hide();
  $(".trimester").hide();
  $("#prompt").show();
});

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

  $("input:radio:checked").each( function() {
    score += parseInt($(this).val());         
    $("#questionaire_form").hide();
    $("#prompt").hide();
    $("#footer").hide();
  });  
  
if (score >=14) { 
  $("#depression").show();
  } else { 
    $("#nodepression").show();
}
};

            
          
!
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