Ovulation Day and Next Period Calculator in React.js

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:

• React JS
• React useState

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

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.

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

npm start

Output: