<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="visit"><a href="http://onepagerapp.com/harunpehlivantebimtebitagem" target="_blank">HARUN PEHLİVAN</a></div>
<div class="container">
<div class="row">
<div class="twelve columns">
<h1>Macro Calculator</h1>
<p>Quickly calculate the amount of calories any food item or meal yields by entering the amount of protein, carbohydrates and fat by grams. Details can often be found on the back of food packs per serving. </p>
</div>
<form>
<div class="row">
<div class="four columns">
<label for="carbs">CARBS<span>(g)</span></label>
<input class="u-full-width" type="number" placeholder="0" id="carbs" min="0">
</div>
<div class="four columns">
<label for="protien">PROTEIN<span>(g)</span></label>
<input class="u-full-width" type="number" placeholder="0" id="protien" min="0">
</div>
<div class="four columns">
<label for="fats">FATS<span>(g)</span></label>
<input class="u-full-width" type="number" placeholder="0" id="fats" min="0">
</div>
</div>
</form>
<div class="row">
<div class="twelve columns total">
<p>YOUR RESULTS</p>
<h3 class="calories"><span>0</span> kcal</h3>
<p class="thickUnder">MACRONUTRIENTS</p>
<div class="sideC">Carbohydrate: <span class="c">0</span>g / <span class="percent"></span>% </div>
<div class="sideF">Fat: <span class="c">0</span>g / <span class="percent"></span>%</div>
<div class="sideP">Protien: <span class="c">0</span>g / <span class="percent"></span>% </div>
</div>
</div>
</div>
<div class="row tabs">
<div class="four columns tab1">Protein </div>
<div class="four columns tab2">Carbohydrates</div>
<div class="four columns tab3">Fats</div>
<div class="twelve columns tabP">
<p>Protien helps build and prevent muscle loss whilst keeping you fuller for longer. It requires more energy from your body to digest than any other macro effectively burning more calorie per gram consumed. Some good examples of protien sources include:
</p>
<ul>
<li>Meat</li>
<li>Eggs</li>
<li>Protien Shakes</li>
<li>Dairy</li>
</ul>
</div>
<div class="twelve columns tabC">
<p>Commonly speaking, carbs are largely divided into simple and complex carbohydrates depending on how easily the body can break them down. Good carb sources such as fruit, vegetables and grains all provide our body with energy by storing themselves as glycogen whilst often also being very dense in vitamins and fiber. Some good examples of protien sources include:
</p><ul>
<li>Oats</li>
<li>Fruit</li>
<li>Sweet potatoes</li>
</ul></div>
<div class="twelve columns tabF">
<p>Fats assist in the absorption of vitamins, brain function, hormone regulation and much more. Some good example of fat sources include:</p><ul>
<li>Meat</li>
<li>Nut butters</li>
<li>Oil</li>
</ul></div>
</div>
</div>
body {
-webkit-font-smoothing: antialiased;
height: 100vh;
font-family: 'Montserrat', sans-serif;
background: #F77D34;
}
input[type="number"] {
border: 1px solid white;
outline: none;
cursor: pointer;
}
h1 {
font-weight: bold;
}
h3 {
font-weight: bold;
}
p {
color: #FFF;
}
label span {
font-size: 1rem;
padding-left: 1%;
}
.total {
background: #FFF;
color: #000;
border-radius: 0.4rem;
padding: 2rem;
}
.total p {
color: #000;
}
.thickUnder {
border-bottom: 5px solid #000;
width: 15rem;
font-weight: bold;
}
.visit {
color: white;
font-size: 1.1rem;
background: #de7537;
width:143px;
padding: 6px;
border-radius: 10px;
position: fixed;
right: 20px;
}
.visit a {
color: white;
text-decoration: none;
}
.tabs{
padding-top:2rem;
}
.tab1, .tab2, .tab3{
background: #FFF;
color: #000;
-webkit-border-top-left-radius: 0.4rem;
-webkit-border-top-right-radius: 0.4rem;
-moz-border-radius-topleft: 0.4rem;
-moz-border-radius-topright: 0.4rem;
border-top-left-radius: 0.4rem;
border-top-right-radius: 0.4rem;
padding: 1rem;
cursor:pointer;
}
.tabP, .tabC, .tabF {
background: #FFF;
padding: 3rem;
}
.tabP p, .tabC p, .tabF p {
color:#000;
}
.tabC, .tabF{
display:none;
}
.columns {
/* background:red;
}
.row{
/*background: black;
}
(function() {
function cFat(fat) {
return fat * 9;
}
function cProtien(protien) {
return protien * 4;
}
function cCarbs(carbs) {
return carbs * 4;
}
function cAlcohol(alcohol) {
return alcohol * 7;
}
var carbs = $('#carbs');
var fats = $('#fats');
var protien = $('#protien');
carbs.on('keyup change ', function() {
var c = carbs.val();
$('.sideC .c').html(cCarbs(c));
calories();
});
fats.on('keyup change ', function() {
var f = fats.val();
$('.sideF .c').html(cFat(f));
calories();
});
protien.on('keyup change ', function() {
var p = protien.val();
$('.sideP .c').html(cProtien(p));
calories();
});
var calories = function() {
var ca = parseInt($('.sideC .c').html());
var fa = parseInt($('.sideF .c').html());
var pr = parseInt($('.sideP .c').html());
var totalC = ca + fa + pr;
$('.calories span').html(totalC);
console.log(totalC);
var perC = Math.ceil(ca / totalC * 100);
var perF = Math.ceil(fa / totalC * 100);
var perP = Math.ceil(pr / totalC * 100);
$('.sideC .percent').html(perC);
$('.sideF .percent').html(perF);
$('.sideP .percent').html(perP);
};
$('.tab1').on('click',function(){
$('.tabP').show();
$('.tabC').hide();
$('.tabF').hide();
});
$('.tab2').on('click',function(){
$('.tabP').hide();
$('.tabC').show();
$('.tabF').hide();
});
$('.tab3').on('click',function(){
$('.tabP').hide();
$('.tabC').hide();
$('.tabF').show();
});
})();
