Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Patrick Oben
Patrick Oben
2,157 Points

My first script ever,Crazy!!! Please drop an idea for me

Hello everyone, I have been going through the library and tried producing a script as below. I had to guide on how to go and just had to wade my way through, doing trial and error and googling to see what works!

I intend to make a calculator to calculate the fertile period in a woman's menstrual cycle using the length of her cycle and her last day of her periods The calculation is as follows Her ovulation date = length of her cycle -14. This is the approximate date she will be ovulating eg if her cycle is 30 days, she will be ovulating on day 30-14=16 of her cycle, counting from the day of her last menses therefore if her last period was 12/1/2013, she will be ovulating on 1+16=17th december, counting 16 from 12/1/13 To get her fertile days, we can make an allowance of two days before and two days after, to get a range, which will be December 15th to 19th.

I want to creat a function that will calculate this date based on the her cycle length(different for each woman) and date of her last period Example is http://www.webmd.com/baby/healthtool-ovulation-calculator

MAJOR QUESTIONS/AREAs of uncertainty

  1. Please review the script and let me know what could have been better
  2. I want to show the results as a calender and got no clue what to do next
  3. When I test the page, firebox browser keeps running and does not stop, though it shows the dates!
  4. Any others

Thanks guys, your input will be very helpful for me

<! DOCTYPE>
<html>
<head>
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script type="text/javascript">
//  i tried to retrieve the values of the form below and make them variables.

function assign(form) {
    cycleLength = form.cLength.value;
    lastPeriod = form.lastPeriodDay.value;
}

$(function() {
    $(".datepicker").datepicker({
        dateFormat: 'yy,mm,dd'
    }); //this is for the datepicker used in the form
})

function startDay() { //this should give me the first day of the range of fertile days,
    var firstday = new Date(lastPeriod);
    var firstday0 = firstday.getDate() - 2;
    firstday.setDate(firstday0);
    var day1 = firstday.getMonth() + "/" + firstday.getDate() + "/" + firstday.getFullYear(); //trying to remove the hours and mins and get formate yyyy/mm/dd
    return day1;
}

function endDay() {
    var lastday = new Date(lastPeriod);
    var lastday0 = lastday.getDate() + 2;
    lastday.setDate(lastday0);
    var day2 = lastday.getMonth() + "/" + lastday.getDate() + "/" + lastday.getFullYear();
    return day2;
}

function fertileperiod() {
    alert("Your fertile period is from " + startDay() + " to " + endDay());
    //I want to display the results which are a range of dates on a calender. I have no clue how to go about this!
}
</script>

<style>
div.ui-datepicker{
 font-size:10px;
}
</style>
</head>
<body>
<div>
    <h1 id="headline">Ovulation Calculator</h1>

    <div id="FormCalc">
        <form action="" id="ovulationCalc" method="get" name="ovulationCalc">
            Length of Mentrual cycle <input id="cLength" max="35" min="21"
            name="cylelength" required="" size="2" type="number"><br>
            <br>
            Date of Last Period <input class="datepicker" name="lastPeriodDay"
            size="8" type="text" value=""><br>
            <br>
            <input id="b" onclick="assign(this.form),fertileperiod()" size="21"
            type="button" value="Calculate My Ov-Days!">
        </form>
    </div>
</div>
</body>
</html>

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

For Dec 21st and a cycle of 28 days the answer should be Jan 1st to 6th

source: http://www.babycenter.com/ovulation-calculator

However your calculator says Nov 19th to 23rd

http://codepen.io/jamesbarnett/pen/gxJyv

I'm guessing maybe you are showing the date of last cycle instead of the date of the next one.

I'd suggest you use moment.js since date math has a lot of edge cases.

Patrick Oben
Patrick Oben
2,157 Points
Patrick Oben
Patrick Oben
2,157 Points

Oooopss, thank you James. I thought I had that fixed that. I will check out moment.js. Thank you for the feedback

matthew moore
matthew moore
9,697 Points

I have to do the same thing for a client. Just wondering if you got yours working correctly and had it to share. As it will save me some work. Does it display a calendar too ?