From 59877d9e7882ceeda8d1d33786cd312517581dd4 Mon Sep 17 00:00:00 2001
From: Anjali havanur <78612291+Anjalih11@users.noreply.github.com>
Date: Sat, 14 May 2022 11:15:28 -0700
Subject: [PATCH 1/2] do

---
 Calculators/index.css         | 24 -----------
 Protein Calculator/index.html | 75 +++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 24 deletions(-)
 delete mode 100644 Calculators/index.css
 create mode 100644 Protein Calculator/index.html
diff --git a/Calculators/index.css b/Calculators/index.css
deleted file mode 100644
index 0e1c8dc8..00000000
--- a/Calculators/index.css
+++ /dev/null
@@ -1,24 +0,0 @@
-* {
-    color: white;
-}
-
-body {
-    background-color: black;
-}
-
-.container {
-    width: 375px;
-    height: auto;
-    margin-left: 350px;
-    background-color: rgb(12, 14, 15);
-    padding-left: 30px;
-}
-
-h1.thick {
-    font-weight: bold;
-}
-
-.btn {
-    background-color: whitesmoke;
-    color: black;
-}
diff --git a/Protein Calculator/index.html b/Protein Calculator/index.html
new file mode 100644
index 00000000..11fb3eac
--- /dev/null
+++ b/Protein Calculator/index.html	
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<head>
+    <title>Protein Calculator</title>
+
+    <!-- Links -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
+</head>
+
+
+<body>
+    <div class="container">
+
+        <h1 class="text-center">Protein Calculator</h1>
+
+        <form>
+            <!-- Input Name -->
+            <div class="form-group">
+                <label>Name</label>
+                <input class='form-control text-center' type="text" id="name" placeholder="name" autocomplete="off">
+            </div>
+            <hr>
+
+            <!-- Input Height -->
+            <div class="form-group">
+                <label>Height</label>
+                <input class='form-control text-center' type="text" id="height" placeholder="cm" autocomplete="off">
+            </div>
+            <hr>
+
+            <!-- Input Weight -->
+            <div class="form-group">
+                <label>Weight</label>
+                <input class='form-control text-center' type="text" id="weight" placeholder="kg" autocomplete="off">
+            </div>
+            <hr>
+
+            <!-- Input Addition Info -->
+            <label for="sel">Active Type (select one):</label>
+            <select class="form-control" id="sel" name="sellist">
+                <option value="sedentary" style="color:black;">sedentary adult</option>
+                <option value="endurance"style="color:black;">endurance runner</option>
+                <option value="strength"style="color:black;">strength training</option>
+            </select>
+            <br>
+
+            <!-- Submit Button -->
+            <button type="submit" class="btn btn-primary" style="color:black; background-color:rgb(12, 158, 226);">Calculate</button>
+            <ul id="results"></ul>
+            <hr>
+
+            <!-- View History Button -->
+            <button type="button" id="history-button" class="btn btn-secondary" style="color:black; background-color:rgb(12, 158, 226);">View History</button>
+            <hr>
+            <table id="myTable"></table>
+            <hr>
+            <hr>
+
+        </form>
+    </div>
+
+    <!-- Scripts -->
+    <script src="script.js"></script>
+</body>
+
+</html>

From ffd556d342bc94375ce51a4e0a95109da3ac3387 Mon Sep 17 00:00:00 2001
From: Anjali havanur <78612291+Anjalih11@users.noreply.github.com>
Date: Sat, 14 May 2022 11:52:13 -0700
Subject: [PATCH 2/2] update

---
 Protein Calculator/index.html | 240 +++++++++++++++++++++++++---------
 1 file changed, 175 insertions(+), 65 deletions(-)

diff --git a/Protein Calculator/index.html b/Protein Calculator/index.html
index 11fb3eac..5c0fae44 100644
--- a/Protein Calculator/index.html	
+++ b/Protein Calculator/index.html	
@@ -1,75 +1,185 @@
 <!DOCTYPE html>
-<html lang="en">
-
-
-<head>
-    <title>Protein Calculator</title>
-
-    <!-- Links -->
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
-</head>
-
-
-<body>
-    <div class="container">
-
-        <h1 class="text-center">Protein Calculator</h1>
-
-        <form>
-            <!-- Input Name -->
-            <div class="form-group">
-                <label>Name</label>
-                <input class='form-control text-center' type="text" id="name" placeholder="name" autocomplete="off">
-            </div>
-            <hr>
-
-            <!-- Input Height -->
-            <div class="form-group">
-                <label>Height</label>
-                <input class='form-control text-center' type="text" id="height" placeholder="cm" autocomplete="off">
-            </div>
-            <hr>
-
-            <!-- Input Weight -->
-            <div class="form-group">
-                <label>Weight</label>
-                <input class='form-control text-center' type="text" id="weight" placeholder="kg" autocomplete="off">
-            </div>
-            <hr>
-
-            <!-- Input Addition Info -->
-            <label for="sel">Active Type (select one):</label>
-            <select class="form-control" id="sel" name="sellist">
+    <html lang="en">
+
+
+    <head>
+        <title>Protein Calculator</title>
+
+        <!-- Links -->
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
+        <style>
+            * {
+                color: white;
+            }
+            
+            body {
+                background-color: black;
+            }
+            
+            .container {
+                width: 375px;
+                height: auto;
+                margin-left: 350px;
+                background-color: rgb(12, 14, 15);
+                padding-left: 30px;
+            }
+            
+            h1.thick {
+                font-weight: bold;
+            }
+            
+            .btn {
+                background-color: whitesmoke;
+                color: black;
+            }
+        </style>
+    </head>
+
+
+    <body>
+        <div class="container">
+
+            <h1 class="text-center">Protein Calculator</h1>
+
+            <form>
+                <div class="form-group">
+                    <label>Name</label>
+                    <input class='form-control text-center' type="text" id="name" placeholder="name" autocomplete="off">
+                </div>
+                <hr>
+
+                <div class="form-group">
+                    <label>Height</label>
+                    <input class='form-control text-center' type="text" id="height" placeholder="cm" autocomplete="off">
+                </div>
+                <hr>
+
+                <div class="form-group">
+                    <label>Weight</label>
+                    <input class='form-control text-center' type="text" id="weight" placeholder="kg" autocomplete="off">
+                </div>
+                <hr>
+
+                <label for="sel">Active Type (select one):</label>
+                <select class="form-control" id="sel" name="sellist">
                 <option value="sedentary" style="color:black;">sedentary adult</option>
                 <option value="endurance"style="color:black;">endurance runner</option>
                 <option value="strength"style="color:black;">strength training</option>
             </select>
-            <br>
+                <br>
+
+                <button type="submit" class="btn btn-primary" style="color:black; background-color:rgb(12, 158, 226);">Calculate</button>
+                <ul id="results"></ul>
+                <hr>
+
+                <button type="button" id="history-button" class="btn btn-secondary" style="color:black; background-color:rgb(12, 158, 226);">View History</button>
+                <hr>
+                <table id="myTable"></table>
+                <hr>
+                <hr>
+
+            </form>
+        </div>
+
+        <script>
+            const form = document.querySelector('form');
+
+            form.addEventListener('submit', function(e) {
+                e.preventDefault();
+
+                name = document.getElementById("name").value;
+                const height = parseInt(document.querySelector('#height').value);
+                const weight = parseInt(document.querySelector('#weight').value);
+                const selection = document.getElementById("sel").value;
+                const results = document.querySelector('#results');
+                var strResult = new String();
+
+                var date = new Date();
+
+                var pro;
+
+                var strDate = date.toUTCString();
+
+                if (name.length === 0) {
+                    results.innerHTML = "Please provide your name";
+                } else if ((height === '') || (height < 0) || (isNaN(height))) {
+                    results.innerHTML = "Please provide a valid height";
+                } else if (weight === '' || weight < 0 || isNaN(weight)) {
+                    results.innerHTML = "Please provide a valid weight";
+                } else {
+                    if (selection === "sedentary") {
+                        pro = (weight / 2.2 * 0.8).toFixed(2);
+                        strResult = "~ Require " + `<span>${pro}</span>` + " grams of protein daily." + `<br>` + "~ Record Date: " + date;
+                        results.innerHTML = strResult;
+                    } else if (selection === "endurance") {
+                        pro = (weight / 2.2 * 1.4).toFixed(2);
+                        strResult = "~ Require " + `<span>${pro}</span>` + " grams of protein daily." + `<br>` + "~ Record Date: " + date;
+                        results.innerHTML = strResult;
+                    } else if (selection === "strength") {
+                        pro = (weight / 2.2 * 1.8).toFixed(2);
+                        strResult = "~ Require " + `<span>${pro}</span>` + " grams of protein daily." + `<br>` + "~ Record Date: " + date;
+                        results.innerHTML = strResult;
+                    }
+
+                }
+
+                var person = {
+                    personHeight: height,
+                    personWeight: weight,
+                    personSelection: selection,
+                    personDate: strDate,
+                    personPro: pro
+                };
+
+
+                var userData = [];
+
+                //Check for User info
+                if (localStorage.getItem(name) !== null) {
+                    userData = JSON.parse(localStorage.getItem(name));
+                }
+
+                userData.push(person);
+
+                localStorage.setItem(name, JSON.stringify(userData));
+
+
+                
+                let button = document.getElementById("history-button");
+                button.addEventListener("click", viewHistory);
+
+                function viewHistory(array) {
+                    var retrieveData = JSON.parse(localStorage.getItem(name));
+                    console.log(retrieveData.length);
+
+                    var table = document.getElementById("myTable");
+
+                    for (i = 0; i < retrieveData.length; i++) {
+                        var buffer = retrieveData[i];
+
+                        var row = table.insertRow();
+                        var cell1 = row.insertCell(0);
+                        var cell2 = row.insertCell(1);
+                        var cell3 = row.insertCell(2);
+                        var cell4 = row.insertCell(3);
 
-            <!-- Submit Button -->
-            <button type="submit" class="btn btn-primary" style="color:black; background-color:rgb(12, 158, 226);">Calculate</button>
-            <ul id="results"></ul>
-            <hr>
 
-            <!-- View History Button -->
-            <button type="button" id="history-button" class="btn btn-secondary" style="color:black; background-color:rgb(12, 158, 226);">View History</button>
-            <hr>
-            <table id="myTable"></table>
-            <hr>
-            <hr>
+                        cell1.innerHTML = "Height: " + buffer.personHeight + "(cm)___";
+                        cell2.innerHTML = "Weight: " + buffer.personWeight + "(lbs)___";
+                        cell3.innerHTML = "Record: " + buffer.personPro + "(protein) needed___";
+                        cell4.innerHTML = "Date: " + buffer.personDate;
 
-        </form>
-    </div>
+                    }
+                }
 
-    <!-- Scripts -->
-    <script src="script.js"></script>
-</body>
+            });
+        </script>
+    </body>
 
-</html>
+    </html>
