From a9dd6af31c204b0155745881acd3b6ce1524cec2 Mon Sep 17 00:00:00 2001
From: Anjali havanur <78612291+Anjalih11@users.noreply.github.com>
Date: Sat, 14 May 2022 09:31:54 -0700
Subject: [PATCH 1/6] commit

---
 Calculators/index.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 Calculators/index.css
diff --git a/Calculators/index.css b/Calculators/index.css
new file mode 100644
index 00000000..0e1c8dc8
--- /dev/null
+++ b/Calculators/index.css
@@ -0,0 +1,24 @@
+* {
+    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;
+}

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 2/6] 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 93e8c832c3e7664e9929c33e4ab2db7c10cda03c Mon Sep 17 00:00:00 2001
From: Anjali havanur <78612291+Anjalih11@users.noreply.github.com>
Date: Sat, 14 May 2022 11:46:30 -0700
Subject: [PATCH 3/6] commit

---
 Calculators/index.css  |  24 ------
 Calculators/index.html | 192 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 192 insertions(+), 24 deletions(-)
 delete mode 100644 Calculators/index.css
 create mode 100644 Calculators/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/Calculators/index.html b/Calculators/index.html
new file mode 100644
index 00000000..f76d9663
--- /dev/null
+++ b/Calculators/index.html
@@ -0,0 +1,192 @@
+<!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="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>
+                <!-- 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>
+
+                <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>
+
+                <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>
+
+        <!-- Scripts -->
+        <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 = [];
+
+                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++) {
+                        //Get Data from local storage
+                        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);
+
+
+                        cell1.innerHTML = "Height: " + buffer.personHeight + "(cm)___";
+                        cell2.innerHTML = "Weight: " + buffer.personWeight + "(lbs)___";
+                        cell3.innerHTML = "Record: " + buffer.personPro + "(protein) needed___";
+                        cell4.innerHTML = "Date: " + buffer.personDate;
+
+                    }
+                }
+
+            });
+        </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 4/6] 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>

From 8bc6ec74e87c6e137136fe4556bc7793565cebd7 Mon Sep 17 00:00:00 2001
From: Anjali havanur <78612291+Anjalih11@users.noreply.github.com>
Date: Tue, 17 May 2022 19:50:22 -0700
Subject: [PATCH 5/6] update

---
 Calculators/index.html | 361 +++++++++++++++++++++++------------------
 1 file changed, 199 insertions(+), 162 deletions(-)

diff --git a/Calculators/index.html b/Calculators/index.html
index f76d9663..a45560f2 100644
--- a/Calculators/index.html
+++ b/Calculators/index.html
@@ -1,192 +1,229 @@
 <!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="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;
+<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>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <style>
+        * {
+            color: white;
+        }
+        
+        body {
+            background-color: white;
+        }
+        
+        .sub {
+            margin-right: 500px;
+        }
+        
+        @media only screen and (max-width: 600px) {
+            .container {
+                background: rgb(21, 131, 185);
+                height: auto;
+                margin-right: 200px;
             }
-            
-            body {
-                background-color: black;
+        }
+        /* Small devices (portrait tablets and large phones, 600px and up) */
+        
+        @media only screen and (min-width: 600px) {
+            .container {
+                background: rgb(21, 131, 185);
             }
-            
+        }
+        /* Medium devices (landscape tablets, 768px and up) */
+        
+        @media only screen and (min-width: 768px) {
             .container {
-                width: 375px;
-                height: auto;
-                margin-left: 350px;
-                background-color: rgb(12, 14, 15);
-                padding-left: 30px;
+                background: rgb(21, 131, 185);
             }
-            
-            h1.thick {
-                font-weight: bold;
+        }
+        /* Large devices (laptops/desktops, 992px and up) */
+        
+        @media only screen and (min-width: 992px) {
+            .container {
+                background: rgb(21, 131, 185);
             }
-            
-            .btn {
-                background-color: whitesmoke;
-                color: black;
+        }
+        /* Extra large devices (large laptops and desktops, 1200px and up) */
+        
+        @media only screen and (min-width: 1200px) {
+            .container {
+                background: rgb(21, 131, 185);
             }
-        </style>
-    </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>
-
-                <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">
+        }
+        
+        .container {
+            width: 500px;
+            height: auto;
+            margin-left: auto;
+            background-color: ;
+            padding-left: 30px;
+            margin-top: 30px;
+        }
+        
+        h1.thick {
+            font-weight: bold;
+        }
+        
+        .btn {
+            background-color: whitesmoke;
+            color: black;
+        }
+    </style>
+</head>
+
+
+<body>
+    <div class="container sub">
+
+        <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>
-
-                <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>
-
-        <!-- Scripts -->
-        <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;
-                    }
-
+            <br>
+
+            <button type="submit" class="btn btn-primary" style="color:black; background-color:whitesmoke;">Calculate</button>
+            <ul id="results"></ul>
+            <hr>
+
+            <button type="button" id="history-button" class="btn btn-secondary" style="color:black; background-color:whitesmoke;">View History</button>
+            <hr>
+            <table id="myTable"></table>
+            <hr>
+            <hr>
+
+        </form>
+    </div>
+    </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 person = {
+                personHeight: height,
+                personWeight: weight,
+                personSelection: selection,
+                personDate: strDate,
+                personPro: pro
+            };
 
-                var userData = [];
 
-                if (localStorage.getItem(name) !== null) {
-                    userData = JSON.parse(localStorage.getItem(name));
-                }
+            var userData = [];
 
-                userData.push(person);
+            //Check for User info
+            if (localStorage.getItem(name) !== null) {
+                userData = JSON.parse(localStorage.getItem(name));
+            }
+
+            userData.push(person);
+
+            localStorage.setItem(name, JSON.stringify(userData));
 
-                localStorage.setItem(name, JSON.stringify(userData));
 
 
-               
-                let button = document.getElementById("history-button");
-                button.addEventListener("click", viewHistory);
+            let button = document.getElementById("history-button");
+            button.addEventListener("click", viewHistory);
 
-                
-                function viewHistory(array) {
-                   
-                    var retrieveData = JSON.parse(localStorage.getItem(name));
-                    console.log(retrieveData.length);
+            function viewHistory(array) {
+                var retrieveData = JSON.parse(localStorage.getItem(name));
+                console.log(retrieveData.length);
 
-                    
-                    var table = document.getElementById("myTable");
+                var table = document.getElementById("myTable");
 
-                    
-                    for (i = 0; i < retrieveData.length; i++) {
-                        //Get Data from local storage
-                        var buffer = retrieveData[i];
+                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);
+                    var row = table.insertRow();
+                    var cell1 = row.insertCell(0);
+                    var cell2 = row.insertCell(1);
+                    var cell3 = row.insertCell(2);
+                    var cell4 = row.insertCell(3);
 
 
-                        cell1.innerHTML = "Height: " + buffer.personHeight + "(cm)___";
-                        cell2.innerHTML = "Weight: " + buffer.personWeight + "(lbs)___";
-                        cell3.innerHTML = "Record: " + buffer.personPro + "(protein) needed___";
-                        cell4.innerHTML = "Date: " + buffer.personDate;
+                    cell1.innerHTML = "Height: " + buffer.personHeight + "(cm)___";
+                    cell2.innerHTML = "Weight: " + buffer.personWeight + "(lbs)___";
+                    cell3.innerHTML = "Record: " + buffer.personPro + "(protein) needed___";
+                    cell4.innerHTML = "Date: " + buffer.personDate;
 
-                    }
                 }
+            }
+
+        });
+    </script>
 
-            });
-        </script>
-    </body>
+</body>
 
-    </html>
+</html>

From 12c36e8a0b0627d11f5eae84c1b40a121c764048 Mon Sep 17 00:00:00 2001
From: Anjali havanur <78612291+Anjalih11@users.noreply.github.com>
Date: Sat, 28 May 2022 00:19:52 -0700
Subject: [PATCH 6/6] commit

---
 Calculators/{ => Protein Calculator}/index.html | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename Calculators/{ => Protein Calculator}/index.html (100%)

diff --git a/Calculators/index.html b/Calculators/Protein Calculator/index.html
similarity index 100%
rename from Calculators/index.html
rename to Calculators/Protein Calculator/index.html
