{"id":6324,"date":"2022-08-18T10:41:04","date_gmt":"2022-08-18T10:41:04","guid":{"rendered":"https:\/\/bekoka.com\/?page_id=6324"},"modified":"2022-08-19T12:58:45","modified_gmt":"2022-08-19T12:58:45","slug":"pregnancy-calculator","status":"publish","type":"page","link":"https:\/\/bekoka.com\/en\/pregnancy-calculator\/","title":{"rendered":"Pregnancy Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6324\" class=\"elementor elementor-6324 elementor-5375\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6c085a28 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6c085a28\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5fd53974\" data-id=\"5fd53974\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8bf0a3b elementor-widget elementor-widget-html\" data-id=\"8bf0a3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <lang=\"en\">\r\n<meta charset=\"utf-8\">\r\n\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n  <title>Pregnancy Calculator<\/title>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/bekoka.com\/calculator\/bulma.css\">\r\n\r\n\r\n\r\n<style>\r\n\r\n\r\n*{\r\n    font-size: 20px;\r\n    line-height: 1.8;\r\n    }\r\n\r\n.container{\r\n    margin: 0 auto !important;\r\n        width: unset;\r\n    }\r\n\r\n.vdp-datepicker__calendar {\r\n    width: 100% !important;\r\n}\r\n.vdp-datepicker__calendar .cell.selected {\r\n    background: #00d2b2 !important;\r\n    color: #fff;\r\n    font-weight: bold;\r\n}\r\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {\r\n    border: 1px solid #00d2b2 !important;\r\n}\r\n.vdp-datepicker__calendar .cell.selected:hover {\r\n    background: #00d2b2 !important;\r\n}\r\n.select {\r\n  margin-bottom: 1em;\r\n}\r\n.fade-enter {\r\n  opacity: 0;\r\n}\r\n.fade-enter-active {\r\n  transition: opacity 1.5s;\r\n}\r\n.fade-leave {\r\n  opacity: 0;\r\n}\r\n.fade-leave-active {\r\n}\r\n.content ol {\r\n    list-style-position: outside;\r\n    margin-right: 2em;\r\n    margin-top: 1em;\r\n}\r\nol {\r\n  \/* remove the default styling for the list *\/\r\n  list-style: none;\r\n  margin: 0;\r\n  padding:1rem  0 ;\r\n  \/* Initialize the counter *\/\r\n  counter-reset: ingredients;\r\n    text-align: left!important; \r\n   \r\n}\r\n\r\nol li {\r\n  \/* which counter to increment *\/\r\n  counter-increment: ingredients;\r\n  \/* layout and spacing between the list items - unrelated to the custom counter stuff *\/\r\n  margin-bottom: .5rem;\r\n  display: flex;\r\n\r\n  color: #4A4A4A;\r\n}\r\n\r\nol li:before {\r\n  \/* this defines the content for the list item *\/\r\n  content: counter(ingredients);\r\n  \/* these are the custom styles I'm applying to them *\/\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background-color: #00d1b2;\r\n  color: white;\r\n  padding: 1rem;\r\n  border-radius: 42px;\r\n  height: 36px;\r\n  width: 36px;\r\n  font-size: 1.8rem;\r\n  font-weight: 700;\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n<\/style>\r\n  <\/head>\r\n<body>\r\n <section class=\"hero is-primary has-text-centered\">\r\n  <div class=\"hero-body\">\r\n    <div class=\"container\">\r\n      <h1 class=\"title is-1\">Pregnancy Due Date Calculator<\/h1>\r\n    <\/div>\r\n  <\/div>\r\n  <\/section>\r\n  \r\n  <section id=\"app\" class=\"section content has-text-centered\">\r\n    \r\n<transition name=\"fade\" mode=\"out-in\">\r\n    <div class=\"content columns level is-centered\r\n\" v-if=\"!calcReturned\" key=\"calendar\">\r\n\r\n      <div class=\"column is-one-third level has-text-centered \">\r\n        <p class=\"subtitle\">Please select the first day of your last menstrual period:<\/p>\r\n        <vuejs-datepicker :inline=\"true\" v-model=\"date\">{{ date }}<\/vuejs-datepicker>\r\n      <\/div>\r\n\r\n      <div class=\"column is-one-third has-text-centered level\">\r\n        <p>Usual number of days in your cycle:<\/p>\r\n        <div class=\"select is-primary\">\r\n          <select name=\"days\" v-model=\"cycleSelected\">\r\n            <option v-for=\"n in 45\" v-if=\"n >= 20\">{{ n }}<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"level-item\">\r\n          <button class=\"button is-large is-primary is-rounded \" id=\"calculate-btn\" @click=\"startCalc(); calculateFertileBegin(); calculateFertileEnds(); calculateDueDate();\">Calculate<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"content has-text-centered\" v-else key=\"result\">\r\n\r\n      <p class=\"subtitle\">Here are the results based on the information you provided:<\/p>\r\n      <p>Your next most fertile period is <strong>{{ fertileFrom }}<\/strong> to <strong>{{ fertileUntil }}<\/strong>.<\/p>\r\n      <p>If you conceive within this timeframe, your estimated due date will be <strong>{{ dueDate }}<\/strong>.<\/p>\r\n      <div class=\"level-item\">\r\n        <button class=\"button is-large is-primary is-rounded\" id=\"resetCalc\" @click=\"resetCalc\">Calculate Again<\/button>\r\n      <\/div>\r\n        \r\n\r\n  \r\n      <p style=\"padding:20px 0 0 0;    text-align: left!important; \"> Since your period varies from month to month depending on your mood, physical activity level, and other factors, anticipating these days is akin to aiming at a moving target that is not fixed. If you believe the calculations of this tool are insufficient, you can learn how to manually and accurately calculate it by using the following guide:\r\n<\/p>\r\n<ol>\r\n  <li>First, use the result to determine when the period begins and how many days it lasts: if the new cycle begins 28 days after the first day of the previous cycle, ovulation is likely to occur in the middle of the 28-day period, 14 days after the course begins, or 14 days after the first day.\r\n<\/li>\r\n  <li>Second, pay attention to any changes in vaginal secretions: Before ovulation, you may notice clear, sticky liquids that resemble egg whites. After ovulation, these secretions or fluids will turn white and sticky, and the likelihood of pregnancy will be low, if not non-existent.\r\n<\/li>\r\n  <li>Third, keep an eye on your body temperature: ovulation can cause a slight rise in body temperature (less than one degree). Measure your body temperature every morning before you get out of bed. You will repeatedly check your temperature. You have to understand that fertility days occur two to three days before your body temperature rises.\r\n<\/li>\r\n  <li>Fourth, I recommend that you use an ovulation prediction device, which detects high hormone levels before ovulation by analyzing urine samples. The tool also predicts when ovulation will occur and alerts the user before it happens. To obtain reliable results, you must follow the device's instructions.<\/li>\r\n<\/ol>\r\n    <\/div>\r\n<\/transition>\r\n    \r\n    <div class=\"notification is-full\" style=\"text-align: center;\">Go to the articles that interest you at this stage from <a href=\"https:\/\/bekoka.com\/en\/category\/maternity-and-pregnancy\/\"><strong>here<\/strong><\/a> <\/div>\r\n\r\n  <\/section>\r\n\r\n<script src=\"https:\/\/bekoka.com\/calculator\/vue.min.1%20copy%201.js\"><\/script>\r\n<script src=\"https:\/\/bekoka.com\/calculator\/vuejs-datepicker.min.1%20copy%201.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.22.2\/moment.min.js\"><\/script>\r\n<script>\r\n\/\/ Ovulation Predictor Calculator using Vue.js + Vue Datepicker + MomentJS + Bulma CSS\r\n\r\nnew Vue({\r\n  el: '#app',\r\n  components: {\r\n  \tvuejsDatepicker\r\n  },\r\n  data() {\r\n    return {\r\n      calcReturned: false,\r\n      date: new Date(),\r\n      cycleSelected: 28,\r\n      fertileFrom: \"\",\r\n      fertileUntil: \"\",\r\n      dueDate: \"\",\r\n      fullDate: \"\",\r\n    };\r\n  },\r\n  methods: {\r\n    startCalc: function() {\r\n      this.calcReturned = true;\r\n    },\r\n    calcDate: function() {\r\n      var day = parseInt(document.querySelector(\"span.day.selected\").innerHTML);\r\n      var month = document.querySelector(\"span.month.selected\").innerHTML;\r\n      var year = parseInt(document.querySelector(\"span.year.selected\").innerHTML);\r\n\r\n      var months = [\r\n        \"January\",\r\n        \"February\",\r\n        \"March\",\r\n        \"April\",\r\n        \"May\",\r\n        \"June\",\r\n        \"July\",\r\n        \"August\",\r\n        \"September\",\r\n        \"October\",\r\n        \"November\",\r\n        \"December\"\r\n      ];\r\n      \r\n      months.forEach(function (value, i) {\r\n      if (value === month && i <= 8 ) {\r\n        i ++;\r\n        month = \"0\" + i.toString();\r\n      } else if (value === month && i >= 9 ) {\r\n          i ++;\r\n        month = i.toString();\r\n      }\r\n      });\r\n      \r\n      this.fullDate = year + \"\" + month + \"\" + day;\r\n    },\r\n    calculateFertileBegin: function() {\r\n      this.calcDate();\r\n      if ( this.cycleSelected === 28) {\r\n        this.fertileFrom = moment(this.fullDate, 'YYYYMMDD').add(12, 'days').format('MMMM Do YYYY');\r\n      } else {\r\n          this.fertileFrom = moment(this.fullDate, 'YYYYMMDD').add(this.cycleSelected - 28 + 12, 'days').format('MMMM Do YYYY');  \r\n      }\r\n    },    \r\n    calculateFertileEnds: function() {\r\n      \/\/this.calcDate(); is called from calculateFertileBegin\r\n      if ( this.cycleSelected === 28) {\r\n        this.fertileUntil = moment(this.fullDate, 'YYYYMMDD').add(16, 'days').format('MMMM Do YYYY');\r\n      } else {\r\n          this.fertileUntil = moment(this.fullDate, 'YYYYMMDD').add(this.cycleSelected - 28 + 16, 'days').format('MMMM Do YYYY');  \r\n      }\r\n    },\r\n    calculateDueDate: function() {\r\n      \/\/this.calcDate(); is called from calculateFertileBegin\r\n      if ( this.cycleSelected === 28) {\r\n        this.dueDate = moment(this.fullDate, 'YYYYMMDD').add(280, 'days').format('MMMM Do YYYY');\r\n      } else {\r\n          this.dueDate = moment(this.fullDate, 'YYYYMMDD').add(this.cycleSelected - 28 + 280, 'days').format('MMMM Do YYYY');  \r\n      }\r\n    },\r\n    resetCalc: function() {\r\n      this.calcReturned = false;\r\n      this.date = new Date();\r\n      this.cycleSelected = 28;\r\n      this.fertileFrom = \"\";\r\n      this.fertileUntil = \"\";\r\n      this.dueDate = \"\";\r\n      this.fullDate = \"\";\r\n    },\r\n  },\r\n});\r\n\r\n\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pregnancy Calculator Pregnancy Due Date Calculator Please select the first day of your last menstrual period: {{ date }} Usual number of days in your cycle:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6324","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bekoka.com\/en\/wp-json\/wp\/v2\/pages\/6324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bekoka.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bekoka.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bekoka.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bekoka.com\/en\/wp-json\/wp\/v2\/comments?post=6324"}],"version-history":[{"count":0,"href":"https:\/\/bekoka.com\/en\/wp-json\/wp\/v2\/pages\/6324\/revisions"}],"wp:attachment":[{"href":"https:\/\/bekoka.com\/en\/wp-json\/wp\/v2\/media?parent=6324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}