added method to display the expected date of next period (#60)

Co-authored-by: ayushanand308 <ayushanand_mc21a11_34@dtu.ac.in>
nisha331 · Feb 26, 2023 · 62ed8bb · 62ed8bb
1 parent 169855c
commit 62ed8bb
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 5 deletions.
diff --git a/css_files/style.css b/css_files/style.css
@@ -45,12 +45,12 @@
     height: 810px;
   }
 
-  .infobox{
+  #infobox{
     margin-top: 300px;
     text-align: center;
   }
 
-  .infobox>h2{
+  #infobox>h2{
     font-family: 'PT Serif Caption', serif;
     color: #E82771;
     font-weight: 800;
@@ -75,6 +75,16 @@
     color: #E82771;
     font-weight: 800;
     font-size: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+    left: 30px;
+    top: -100px;
+
+
   }
 
   #btn1 {
@@ -108,6 +118,13 @@
     font-size: 700;
   }
 
+  #edit-btn{
+    border-radius: 50px;
+    font-size: 20px;
+    color: #E82771;
+    border: none;
+    padding: 15px;
+    font-weight: 600;
   #cont{
     display: none;
   }
diff --git a/index.html b/index.html
@@ -49,7 +49,7 @@
 
       <main>
           <section>
-            <div class="infobox">
+            <div id="infobox">
               <h2>Last Periods was on</h2>
 
               <p>
@@ -58,11 +58,16 @@ <h2>Last Periods was on</h2>
 
               <div id="cont"><input type=date id = "Day">
                 <!-- Choose a date and enter in input field -->
+              <button id="btn" type="submit" onclick = "Calculator()"> Confirm </button>
+              </div> 
                 <button id="btn" type="submit" onclick = "Calculator()"> Confirm </button> 
                 <br><br>
                 <h3 id="result"></h3>
               </div>
             </div>
+              <br><br>
+              <div id="result"></div>
+              <br><br>
           </section>
         </main>
 

diff --git a/js_files/index.js b/js_files/index.js
@@ -4,6 +4,15 @@ document.addEventListener("keyup", (e) => {
     Calculator();
   }
 });
+
+let butt=document.getElementById("log-dates-btn")
+
+function toggle(ele) {
+  var cont = document.getElementById("cont");
+
+  cont.style.display = cont.style.display == "none" ? "block" : "none";
+}
+
 const calender=document.getElementById("cont");
 let calender1=window.getComputedStyle(calender).getPropertyValue("display");
 const log=document.getElementById("btn1");
@@ -82,8 +91,22 @@ function Calculator() {
         d2 = sum;
       }
     }
+
+    let diff=getDaysSinceDate(d2,m2,y2)
+    let message
+    if(diff<0){
+      message="Period in "+parseInt((-1)*diff+1)+" days"
+    }
+    else{
+      message="your period should have been " + parseInt(diff-1) +" days ago"
+    }
+    document.getElementById("infobox").innerHTML=""
     document.getElementById("result").innerHTML =
-      d2 + " " + monthNames[m2 - 1] + " " + y2;
+    `${message}
+    <button id="edit-btn" onlclick="load()">Edit Period Dates</button>
+  `  
+  document.getElementById("edit-btn").addEventListener("click",load)
+
   } else {
     // console.log("leap");
     if (m1 == 02) {
@@ -123,7 +146,30 @@ function Calculator() {
         d2 = sum;
       }
     }
+    let diff=getDaysSinceDate(d2,m2,y2)
+    let message
+    if(diff<0){
+      message="Period in "+parseInt((-1)*diff+1)+" days"
+    }
+    else{
+      message="your period should have been " + parseInt(diff-1)+" days ago"
+    }
     document.getElementById("result").innerHTML =
-      d2 + " " + monthNames[m2 - 1] + " " + y2;
+      message
   }
 }
+
+
+function getDaysSinceDate(d2, m2, y2) {
+  const currentDate = new Date();
+  const date2 = new Date(`${m2}/${d2}/${y2}`);
+  const diffTime = (currentDate - date2);
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
+  return diffDays;
+}
+
+
+function load(){
+  window.location.href="index.html"
+
+}