"Calorie Calculator"
Bootstrap 3.1.0 Snippet by xGQx

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Daily Calorie Calculator</h2> </div> <div class="row"> <div class="col-sm-offset-4 col-sm-4"> <form method="put"> <div class="form-group"> <label for="age">Age</label> <div class="input-group" data-validate="number"> <input type="text" class="form-control" name="age" id="age" placeholder="(Years)" required> <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> <div class="form-group"> <label for="sex">Sex</label> <div class="input-group" data-toggle="buttons"> <label class="btn btn-default active"><input type="radio" name="sex" value="male" checked="checked">Male</label> <label class="btn btn-default"><input type="radio" name="sex" value="female">Female</label> </div> </div> <div class="form-group"> <label>Weight(lbs)</label> <div class="input-group" data-validate="number"> <input type="text" class="form-control" name="weight" id="weight" placeholder="(lbs)" required> <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> <div class="form-group"> <label>Hieght(inches)</label> <div class="input-group" data-validate="number"> <input type="text" class="form-control" name="inches" id="inches" placeholder="(inches)" required> <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> <div class="form-group"> <label>Activity Level</label> <div class="input-group"> <select class="form-control" name="activity_level" id="activity_level" required> <option value="">Select an Acitivity Level</option> <option value="no">Little to no exercise</option> <option value="light">Light exercise (1−3 days per week)</option> <option value="moderate">Moderate exercise (3−5 days per week)</option> <option value="heavy">Heavy exercise (6−7 days per week)</option> <option value="extreme">Very heavy exercise (twice per day, extra heavy workouts)</option> </select> <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> <div class="form-group"> <label>Choose Goal:</label> <div class="input-group"> <select class="form-control" name="gain_loss_amount" id="gain_loss_amount" required> <option value="">Select a Goal</option> <option value="-1000">Lose 2 Pounds per Week</option> <option value="-750">Lose 1.5 Pounds per Week</option> <option value="-500">Lose 1 Pounds per Week</option> <option value="-250">Lose 0.5 Pounds per Week</option> <option value="0">Stay the Same Weight</option> <option value="250">Gain 0.5 Pound per Week</option> <option value="500">Gain 1 Pound per Week</option> <option value="750">Gain 1.5 Pounds per Week</option> <option value="1000">Gain 2 Pounds per Week</option> </select> <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span> </div> <div class="form-group"> <div id="dc_results" class="alert alert-success" style="display: none"> <h4>Estimated Daily Calories:<strong><span id="calAmount"></span></strong></h4> </div> </div> <div class="form-group"> <div class="modal-footer"> <button class="btn btn-danger" onclick="resetForm();">Reset</button> <button type="button" id="calculate" name="calculate" class="btn btn-primary" onclick="calcDailyCals();">Calculate</button> </div> </div> <div class="form-group"> <div class ="modal-footer" id="recommendations" style="display: none"> <h5><strong>Click Below for Recommendations!<strong></h5> <button class="btn btn-primary" onclick="findDiets();">Diets</button> <button class="btn btn-primary" onclick="findWorkouts()">Workouts</button> </div> </div> </div> </div> </form> </div> </div>
h2{ text-align: center; } .input-group-addon.primary { color: rgb(255, 255, 255); background-color: rgb(50, 118, 177); border-color: rgb(40, 94, 142); } .input-group-addon.success { color: rgb(255, 255, 255); background-color: rgb(92, 184, 92); border-color: rgb(76, 174, 76); } .input-group-addon.info { color: rgb(255, 255, 255); background-color: rgb(57, 179, 215); border-color: rgb(38, 154, 188); } .input-group-addon.warning { color: rgb(255, 255, 255); background-color: rgb(240, 173, 78); border-color: rgb(238, 162, 54); } .input-group-addon.danger { color: rgb(255, 255, 255); background-color: rgb(217, 83, 79); border-color: rgb(212, 63, 58); }
//var disable== ("calculate"); //song.attr('disabled', true); //$("#calculate").attr('disabled', true); //document.getElementById("calculate").disabled = true; $(document).ready(function() {//$("#calculate").attr('disabled', true); $('.input-group input[required], .input-group textarea[required], .input-group select[required]').on('keyup, change', function() { var $group = $(this).closest('.input-group'), $addon = $group.find('.input-group-addon'), $icon = $addon.find('span'), state = false; if (!$group.data('validate')) { state = $(this).val() ? true : false; }else if ($group.data('validate') == "email") { state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val()) }else if($group.data('validate') == 'phone') { state = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test($(this).val()) a++; }else if ($group.data('validate') == "length") { state = $(this).val().length >= $group.data('length') ? true : false; }else if ($group.data('validate') == "number") { state = !isNaN(parseFloat($(this).val())) && isFinite($(this).val()); } if (state) { $addon.removeClass('danger'); $addon.addClass('success'); $icon.attr('class', 'glyphicon glyphicon-ok'); }else{ $addon.removeClass('success'); $addon.addClass('danger'); $icon.attr('class', 'glyphicon glyphicon-remove'); } }); }); /* function b(a){ var b=$("#gain_loss_amount"); b.empty();$.each(a,function(a,c){ var d={value:c}; 0===c&&(d.selected="selected"); b.append($("<option></option>").attr(d).text(a)) })} var a={"Lose 2 Pounds per Week":-1000,"Lose 1.5 Pounds per Week":-750,"Lose 1 Pounds per Week":-500,"Lose 0.5 Pounds per Week":-250,"Stay the Same Weight":0,"Gain 0.5 Pound per Week":250,"Gain 1 Pound per Week":500,"Gain 1.5 Pounds per Week":750,"Gain 2 Pounds per Week":1E3}, var c={"Lose 1 Kg per Week":-1100,"Lose 0.75 Kg per Week":-825,"Lose 0.5 Kg per Week":-550,"Lose 0.25 Kg per Week":-275,"Stay the Same Weight":0,"Gain 0.25 Kg per Week":275,"Gain 0.5 Kg per Week":550,"Gain 0.75 Kg per Week":825,"Gain 1 Kg per Week":1100}; }); */ /* function validateDailyCalsValues(b){ var a="";$.isNumeric($("#age").val())||(a+="Age value must be a number\n"); $.isNumeric($("#weight").val())||(a+="Weight value must be a number\n"); $.isNumeric($("#inches").val())||(a=a+(b?"Feet ":"Height ")+"value must be a number\n"); // (!$("activity_level").val())(a="balls") // var c=$("#inches").val();b&&(!$.isNumeric(c)&&!(12>parseFloat(c)))&&(a+="Inches value must be a number less than 12\n"); return a } */ function calcDailyCals(){ //var b="standard"===$("input[name='units']:checked").val(), // a=validateDailyCalsValues(b); // if(a)alert(a); //if(state)alert("Fill in all values"); // if(a)alert("Fill in all fields!"); // else{ var a=parseFloat($("#weight").val()); b=(a*=0.453592); //var c=parseFloat($("#feet_cm").val()); var c=parseFloat($("#inches").val()); b=(c=2.54*c); var d=parseFloat($("#age").val()),e=$("input[name='sex']:checked").val(),b=$("#activity_level").val(), a="male"==e?88.362+13.397*a+4.799*c-5.677*d:447.593+9.247*a+3.098*c-4.33*d; "no"===b?a*=1.2:"light"===b?a*=1.375:"moderate"===b?a*=1.55:"heavy"===b?a*=1.725:"extreme"===b&&(a*=1.9); a=Math.round(a+parseInt($("#gain_loss_amount").val())); $("#calAmount").text(500<a?a:0); $("#dc_results").show(); //if(a>0) // $("#recommendations").show(); }//} function resetForm(){ $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val(''); $(':checkbox, :radio').prop('checked', false); location.reload(); }

Related: See More


Questions / Comments:

how to change lbs unit to kg unit. and inch unit to cm unit? I dont understand your calculation. help me please. thanks.

rosie95 () - 5 years ago - Reply 0