NutriTracker

by inspirationaltwist

HTML

<html>
<head>
	 <meta charset="UTF-8" />
  	
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

	  <link rel="stylesheet" type="text/css" href="nutrition-tracker.css" />
</head>
	<body>
		<h1>NutriTracker</h1>

		<!-- <div id="q1"> -->
			<div id="prompt">Before we begin, let's learn more about you.
			<br>What's your name?
			</div>
			<br> <input id="field" name="field" type="text" placeholder="Enter your name" />
<!-- 			<br><button id="submit" name="submit" class="btn btn-success" type="submit">Next</button> -->
		<!-- </div> -->

		<div id="text">Your age:<br></div>
		<input id="age" type="range" name="rangeInput" min="18" max="80" step="1" onchange="updateAgeInput(this.value);">
<div id="ageDefault">49</div>

<br><button id="continue" name="submit" class="btn btn-success" type="submit">Continue</button>

		<div id="prompt2"></div>



		<!-- <div id="q2"></div> -->

		<!-- <select id="selectAge"> -->
		<div id="health">
		<ul>
		<li>
	    <input type="checkbox" id="diabetes" name="diabetes" value="newsletter"><label for="diabetes">Diabetes</label>
	    </li>

	    <li>
	    <input type="checkbox" id="hbp" name="hbp" value="newsletter"><label for="subscribeNews">High Blood Pressure</label>
	    </div>
	    </li>
	    </ul>

	    <br><button class='btn btn-success' id="submitProf">Submit</button>

		<!-- </select> -->

		<div id="display">
		<input type="text" name="search" placeholder="Search for a food item" selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico" />
	
		<div id="wrap">
			<li>
			</li>
		</div>
		<h4></h4>
		</div>

		
<!-- 		<div id="meter">
			<div id=inner-meter></div> -->
					<div id="count">
		<div>My current sugar count: </div><span id='mySugarCount'></span><br>
		<div>Recommended daily sugar count: <br>25 grams</div><br>
		<div id="pre-leftover"><br>Sugars remaining: <span id='leftover'></span></div>
		</div>

		<!-- </div> -->



  <script...

CSS

html, body{
	margin: 0;
	padding: 0;
	text-align: center;
	background: #314755;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #26a0da, #314755);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #26a0da, #fff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

img {
	transform: scale(0.3);
	margin-top: -20%;
}

input[type=text] {
	display: block;
	width: 30%;
    margin: auto;
    /*margin-top: 5%;*/
    padding: 5px 20px;
    box-sizing: border-box;
    border: 4px solid green;
}

li {
	list-style-type: none;	
}

#display > li {
	list-style-type: none;
	display: block;
	/*margin: auto;*/
	margin: 0;
	/*margin-top: 2%;*/
	font-size: 0.8em;

}

#display ul:hover {
	cursor: pointer;
	color: darkred;
	font-weight: bold;
}

/*CONTAINERS*/

#wrap {
/*	height: 20%;
	width: 29.7%;
	border: 2px solid green;*/
	margin: auto;	
	width: 30%;	
	display: none;
}

#meter {
	position: relative;
	height: 30%;
	width: 3%;
	border: 2px solid #000;
	border-radius: 25%;
	display: block;
	float: right;
	margin-top: -25%;
	margin-right: 15%;
}

#inner-meter {
	position: absolute;
	/*height: 10%;*/
	width: 115%;
	background-color: green;
	border: 2px solid #000;
	padding-top: 300%;
	border-radius: 25%;
	display: block;
	float: right;
	margin-top: 512%;
	margin-right: -6%;
}

/*#count {
	display: block;
	float: right;
	margin-top: -15%;
}*/

/*HEADERS*/

h1 {
	margin-top: 10%;
}

h4 p {
	/*border-bottom: 1px solid green;*/
	border: 2px solid green;
	padding: 1%;
	font-size: 0.9em;
	width: 30%;
	margin: auto;	
	text-align: center;	
	/*margin-top: 1%;		*/
}

#foodName {
	color: darkblue;
	width: 50%;
	margin: auto;
	padding: 1%;
	font-size: 1.2em;
}

#display, #health, #age, #ageDefault, #text , #continue, #submitProf, #pre-leftover, #count {
	display: none;
}

#age {
	width: 40%;
}

#pre-leftover {
	color: darkred;
	font-weight: bold;
	font-size: 1.3em;
}

/* FIRST SCREEN - COLLECT USER INFO */
#intro...

JavaScript

/*
get nutrition facts for food item (e.g. 1 banana)
show image of food item

determine how much user should eat, if at all
add food item to daily food journal/tracker
count nutrition values & show how much of each primary (and secondary) nutrients they need to reach daily recommendation (or how much they've exceeded it by)
are they at healthy level, safe level, or in danger (health meter)

suggest food items as user enters search term
have user check if food belongs to standard / branded data source, and filter results based on that

user profile: health condition, history, age, gender

*/
var search = $( "input[name='search']");
var food_Item = search.val();
var QUERY_LIMIT = 5;
var NUTRIENT_QUERY_MAX = 100;
var NAMES_OF_STANDARD_NUTRIENTS = ["Sodium, NA", "Sugars, total", "Protein", "Carbohydrate, by difference", "Cholesterol", "Fatty acids, total trans", "Fatty acids, total saturated", "Fiber, total dietary", "Calcium, Ca", "Potassium, K"];


var Google_API_Key = 'AIzaSyChFmxcotyJD1iIKw0WL-uy2AXO7o5xF9Q'; 
var Google_Search_Engine_Id = '012029723201963103841:tmf9zdgfp_k';


/************************************* FIRST SCREEN - COLLECT USER INFO *****************************************/
var name = $('#userName');
var submit = $('#submit');
var q1 = $('#q1');
var q2 = $('#q2');
var prompt = $('#prompt');
var field = $('#field');

/* USER PROFILE */
var user = {};


// $(document).ready(function() {
// 	submitName().then(function(name) {
// 		submitAge()}).then(function(age) {
// 			submitCondition();
// 		});
// 	});

function updateAgeInput(val) {
          $('#textInput').html(val); 
}

	
	submitName().then(function(name) {
		// prompt.html(`Hello ${user.name}! How old are you?`);
		submitAge()
	}).then(function(age) {
				// console.log('yo');
				user.age = age;
				// console.log(user);
				submitCondition()				
			}).done(function() {
				profileComplete();
				// console.log(user);
			});




function submitName() {
	var dfd = $.Deferred();

	// var...