Skip to content

Commit

Permalink
Merge pull request #1 from Anjalih11/Anjalih11-patch-1
Browse files Browse the repository at this point in the history 
Protein_Calculator
  • Loading branch information
@Anjalih11
Anjalih11 authored May 28, 2022
2 parents 12c36e8 + ffd556d commit 2ab8f5a
Showing 1 changed file with 185 additions and 0 deletions.
185 changes: 185 additions & 0 deletions Protein Calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +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="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>

<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);


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>

0 comments on commit 2ab8f5a

Please sign in to comment.