React.js 中的排卵日和下一个周期计算器

在本文中，我们将构建一个经期计算器，用于计算您下次经期和排卵日的日期。月经是月经期子宫内膜的每月脱落。平均一个周期持续28天；但是，它可以从 21 天到 35 天不等。卵子从卵巢中释放出来称为排卵。一般来说，28天月经周期的排卵期发生在下一次月经前14天左右。但是，每个人的周期长度可能会有所不同，排卵和月经开始之间的间隔可能会有所不同。

方法：我们将构建一个周期计算器：

• 用户将能够选择周期周期的长度。
• 用户将能够从日历中选择最后一个期间的开始日期。日历将使用 react-calendar 包构建。
• 为了计算下一个月经日期和排卵日期，使用 react-moment 包。它将根据用户的输入计算用户的经期和排卵日期。

下一个周期日期：为了计算下一个周期日期，我们将从您最后一个周期的第一天开始计算您的平均周期中的天数。这将使您估计下一个时期何时开始。

排卵日期：通常排卵发生在您的月经开始前 14 天。我们将从下一个周期开始日期起扣除 14 天。

请按照以下步骤开始。

创建 React 应用程序：

第 1 步：创建一个项目目录，前往终端，并使用以下命令创建一个名为“period-calculator”的 React 应用程序：

npx create-react-app period-calculator

第 2 步：创建 period-calculator 应用程序后，使用以下命令切换到新文件夹 period-calculator：

cd period-calculator

第 3 步：安装所需的软件包。

• react-moment：操纵日期
• react-calendar：构建日历组件

使用以下命令安装上述依赖项：

npm i react-moment react-calendar

项目结构：我们将修改项目的结构并保留必要的文件。将 style.css 文件添加到项目文件夹。该项目应如下所示：

最终项目结构

示例：在您的 index.html 文件中包含以下代码，该文件位于项目目录的公共文件夹中。我们将使用引导程序来构建我们的组件。将引导 CDN 导入 index.html，如下所示：

• index.html：将以下代码添加到 index.html 文件中：

index.html

  

    
    
    
    
    
  
    
    React App

  

    
    
        

  

让我们制作我们的下一个时期和排卵日期计算器：我们将首先导入 Moments 包来处理日期。

import Moment from "react-moment";

接下来，我们将导入 React Calendar 组件及其 CSS 以在我们的应用程序中创建一个日历。

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

通过单击日历上显示的日期，用户可以选择他们的最后一个周期日期，该值将使用 useState 挂钩存储在 value 变量中。当前日期将作为最后一个期间的开始日期的初始值。
用户必须选择他们的周期长度和最后一个周期开始日期来获得估计。平均月经周期为 28 天，但最长可达 45 天。周期的初始值为 28 天。我们要做的第一件事是使用引导导航栏组件创建一个导航栏。您可以使用任何图像作为徽标。之后，我们有一个用于选择周期长度的菜单和一个用于选择最后一个周期开始日期的日历。使用 Moment 组件，我们将根据用户输入操作日期。要增加或减少天数，我们必须解析周期长度并将其转换为数字。 cycleLength 表示解析的日期。
我们将周期长度添加到最后一个周期日期以获得下一个周期日期。从下一个月经日期开始，我们将减去 14 天来获得排卵日期。

注意：这是月经规律的估计情况。

• App.js：在 App.js 文件中编写以下代码。

应用程序.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 (
    <>
      

        

          

            
  
            
Calculate Next period, Ovulation Day 
          
        
        
Calculate Next period, Ovulation Day
  
        Select your Cycle Length : 
         cycleValue(e.target.value)}
          defaultValue={cycle}
          className="m-2"
        >
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
        
      
  
      

        Select Your Last Period Start Date from the Calendar
      
  
      

        
      
  
      

        

          

            

              
Next Period
  
              
                {date}
              
            
            

              
 Approximate Ovulation Day
  
              
                {date}
              
            
          
        
      
    
  );
}
  
export default App;

• style.css：样式化我们的应用程序。将以下代码添加到 style.css 文件以设置我们的下一个经期和排卵日期应用程序的样式。

样式.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;
}

• index.js：您的 index.js 文件应如下所示。 index.js 文件作为主要入口点，在其中，App.js 文件在 DOM 的根 ID 处呈现。

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
  
ReactDOM.render(, document.getElementById("root"));

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：默认情况下，React 项目将在端口 3000 上运行。您可以在浏览器上通过 localhost:3000 访问它。周期长度的默认值为 28，最后一个周期开始日期设置为当前日期。因此，您将获得默认值的结果。您可以选择自己的周期长度和最后一个时期的开始日期来计算您的下一个时期和排卵日期。

排卵期和下一个时期日期计算器