Open In App

Ovulation Day and Next Period Calculator in React.js

Improve
Improve
Like Article
Like
Save
Share
Report

Let’s construct a period calculator to determine the upcoming period and ovulation day. Menstruation involves the monthly shedding of the uterine lining, with an average cycle lasting 28 days (ranging from 21 to 35 days). Ovulation, the release of an egg from the ovaries, typically occurs approximately 14 days before the next menstrual period in a 28-day cycle.

Prerequisites:

Approach:

  • The user will be able to select the length of the period cycle.
  • The user will be able to pick the last period start date from a calendar. The calendar will be built using the react-calendar package. 
  • For calculating the next period date and ovulation date, the react-moment package is used. It will calculate the user’s period and ovulation date based on their input.
  • Next Period Date: To calculate the next period day we will count the number of days in your average cycle starting on the first day of your last period. This will give you an estimate of when your next period will begin.  
  • Ovulation Date: Generally ovulation occurs 14 days before your period starts. We will deduct 14 days from the next period start date.  

Steps to Create React Application And Installing Module:

Step 1: Make a project directorycreate a React app named “period-calculator” using the following command:

npx create-react-app period-calculator

Step 2: After the period-calculator app is created, switch to the new folder period-calculator using the following command:

cd period-calculator

Step 3: Install the required packages.

  • react-moment: To manipulate dates 
  • react-calendar: To build a calendar component

Install the above dependencies by using the following command:

npm i react-moment react-calendar

Project Structure:

The final Project structure 

The updated dependencies in package.json file will look like:

"dependencies": {
"react": "^18.2.0",
"react-calendar": "^4.7.0",
"react-dom": "^18.2.0",
"react-moment": "^1.1.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

Example: Include the following code in your index.html file, located in the public folder of your project directory.

index.html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description"
          content="Web site created using create-react-app" />
 
    <link href=
          rel="stylesheet"
          integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous">
    <title>React App</title>
</head>
 
<body>
    <div id="root"></div>
    <script src=
            integrity=
 "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous">
    </script>   
</body>
 
</html>


Let’s make our Next Period and Ovulation Date calculator: We will first import the Moments package to work with the dates. 

import Moment from "react-moment";

Next, we’ll import the React Calendar component and its CSS to create a calendar in our application. 

import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";

Example: Below is the code of the above explained approach.

App.js




import "./App.css";
import React, { useState } from "react";
import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";
import logo from "./logo.png";
 
import Moment from "react-moment";
import "./style.css";
 
function App() {
  const [value, onChange] = useState(new Date());
  const [cycle, cycleValue] = useState("28");
 
  const date = value;
  console.log(cycle);
  const cycleLength = parseInt(cycle);
 
  return (
    <>
      <div className="text-center">
        <nav className="navbar navbar-light bg-light">
          <div className="container-fluid text-center">
            <img
              src={logo}
              alt=""
              width="250"
              height="50"
              className="d-inline-block"
            />
 
            <h4>Calculate Next period, Ovulation Day </h4>
          </div>
        </nav>
        <h4>Calculate Next period, Ovulation Day</h4>
 
        <label for="cycle">Select your Cycle Length : </label>
        <select
          onChange={(e) => cycleValue(e.target.value)}
          defaultValue={cycle}
          className="m-2"
        >
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
          <option value="32">32</option>
          <option value="33">33</option>
          <option value="34">34</option>
          <option value="35">35</option>
          <option value="36">36</option>
          <option value="37">37</option>
          <option value="38">38</option>
          <option value="39">39</option>
          <option value="40">40</option>
          <option value="41">41</option>
          <option value="42">42</option>
          <option value="43">43</option>
          <option value="44">44</option>
          <option value="45">45</option>
        </select>
      </div>
 
      <p className="text-center">
        Select Your Last Period Start Date from the Calendar
      </p>
 
      <div className="d-flex justify-content-center ">
        <Calendar onChange={onChange} value={value}
          className="calendar mt-0" />
      </div>
 
      <div className="text-center mt-4 p-2">
        <div className="row">
          <div class="d-flex justify-content-center">
            <div className="col-md-3 m-3 box ">
              <p>Next Period</p>
 
              <Moment format="Do MMMM YYYY"
                add={{ days: cycleLength - 1 }}>
                {date}
              </Moment>
            </div>
            <div className="col-md-3 m-3 box ">
              <p> Approximate Ovulation Day</p>
 
              <Moment
                format="Do MMMM YYYY"
                add={{ days: cycleLength - 1 - 14 }}
              >
                {date}
              </Moment>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
 
export default App;


CSS




* {
    overflow: hidden;
}
 
.box {
    display: inlineBlock;
    margin: 30px auto 20px auto;
    box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.25);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
}
 
.calendar {
    margin: 30px auto 20px auto;
    box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.25);
}
 
abbr[title] {
    text-decoration: none;
}


Step to run the Application: Run the application by using the following command:

npm start

Output:

Ovulation and next Period Date Calculator



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads