I'm trying to build a calorie calculator which takes attributes like:
Vegan Vegetarian Ketogen etc.
I managed to get the macronutrients work, but I'm struggling with adding more than 1 conditional to the equation. 'vegan' works fine, but using the same code for another attribute 'vegetarian' yields no result. I'm pretty sure its a logic error somewhere but I can't figure it out.
Here's my code:
$(document).ready(function () {
$('.ingredient').click(function () {
var totalNum = $('#total');
var totalCarbs = $('#totalCarbs');
var totalFats = $('#totalFats');
var totalProteins = $('#totalProteins');
var pressed = $(this).hasClass('clicked');
var currentCalories = +totalNum.html();
var currentCarbs = +totalCarbs.html();
var currentFats = +totalFats.html();
var currentProteins = +totalProteins.html();
if (pressed) {
$(this).removeClass('clicked');
var calories = $(this).data('calories');
var carbs = $(this).data('carbs');
var fat = $(this).data('fat'); +
totalNum.html(currentCalories - calories); +
totalCarbs.html(currentCarbs - carbs); +
totalFats.html(currentFats - fat); +
totalProteins.html(currentProteins - proteins);
} else {
$(this).addClass('clicked');
var calories = $(this).data('calories');
var carbs = $(this).data('carbs');
var fat = $(this).data('fat');
var proteins = $(this).data('fat'); +
totalNum.html(currentCalories + calories); +
totalCarbs.html(currentCarbs + carbs); +
totalFats.html(currentFats + fat); +
totalProteins.html(currentProteins + fat);
}
// vegan
var vegan = false;
$(".ingredient.clicked").each(function () {
if (typeof $(this).attr("vegan") != "undefined") {
vegan = true;
} else {
vegan = false;
return false;
}
});
if (vegan) {
$('#type').text("Ez az összeállítás Vegán");
$('#typeImage').attr("src", "http://ift.tt/2fxWGy4");
} else {
$('#type').text("");
$('#typeImage').attr("src", "");
}
});
// vegetarian
var vegetarian = false;
$(".ingredient.clicked").each(function () {
if (typeof $(this).attr("vegetarian") != "undefined") {
vegetarian = true;
} else {
vegetarian = false;
return false;
}
});
if (vegetarian) {
$('#typeVega').text("Ez az összeállítás vegetáriánus");
$('#typeImageVega').attr("src", "http://ift.tt/2fxWGy4");
} else {
$('#typeVega').text("");
$('#typeImageVega').attr("src", "");
}
});
div,
p,
h1 {
margin: 0;
padding: 0;
box-sizing: border-box;
display: block;
}
body {
font-size: 1.0rem;
font-family: sans-serif;
background: #42413f;
}
.header {
margin-bottom: 30px;
text-align: center;
margin-top: 30px;
}
.header img {
margin-bottom: 30px;
}
.header h1 {
font-size: 1.5rem;
}
.ingredients {
background: #f3f3f3 url(http://ift.tt/2xLxBq9) center top repeat;
border-radius: 30px;
border: 4px solid #6FC0BB;
padding: 30px 60px;
max-width: 80%;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.ingredients h2 {
width: 100%;
font-size: 1.1rem;
text-transform: uppercase;
}
.ingredient {
border: 2px solid #6FC0BB;
padding: 10px 20px;
border-radius: 5px;
margin-right: 20px;
margin-bottom: 20px;
}
.ingredient:hover {
cursor: pointer;
background-color: #6FC0BB;
color: #fff;
border: 2px solid #6FC0BB;
}
.ingredient:active {
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.clicked {
background-color: #6FC0BB;
color: #fff;
border: 2px solid #282828;
}
.total {
margin-top: 30px;
font-weight: bold;
width: 100%;
font-size: 1.1rem;
text-transform: ;
}
//* fonts *//
@font-face {
font-family: 'Lithos Pro Black';
font-style: normal;
font-weight: normal;
src: local('Li Pro Black'), url('http://ift.tt/2fxUJS3') format('opentype');
}
@font-face {
font-family: 'Lithos Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Lithos Pro Regular'), url('http://ift.tt/2xKisp5') format('opentype');
}
/*@font-face {
font-family: 'Arial Narrow';
font-style: normal;
font-weight: normal;
src: local('Arial Narrow'), url('http://ift.tt/2fxUKp5') format('truetype');*/
@font-face {
font-family: 'Lobster Two Italic';
font-weight: normal;
font-style: normal;
src: local('Lobster Two Italic'), url('http://ift.tt/2xLxCud') format('opentype');
}
@font-face {
font-family: 'Proxima Nova';
src: url('http://ift.tt/2fygz8b Nova Alt Condensed Light.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url ('http://ift.tt/2xKiu0b Simonson - Proxima Nova Thin.otf');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('http://ift.tt/2fxRV7u Simonson - Proxima Nova Thin Italic.otf');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Proxima Nova';
src: url('http://ift.tt/2fxRV7u Simonson - Proxima Nova Thin.otf');
font-weight: 700;
font-style: italic;
}
/* Fontok */
p {
font-family: "Arial Narrow";
font-weight: 100;
font-style: normal !important;
}
.h-landmark span {
font-family: 'Lithos Pro Black' !important;
}
h2 a,
h3,
h2 {
font-family: 'Lithos Pro' !important;
font-style: normal;
font-size: 1.5em !important;
}
.x-brand {
display: none;
}
.total {
font-family: 'Lobster Two' !important;
font-style: italic;
font-size: 1.3em !important;
}
.typeImage,
typeImagevega {
height: 50px;
width;
50px;
}
.header img {
height: 50px;
width;
50px;
}
<div class="header">
<img src="http://ift.tt/2xLxD1f" alt="padthai wokbar" style="width:300px;">
<h1>How did you build your bowl?</h1>
<p>Select all the ingredients you added to your padthai wokbar meal and we'll do the rest.</p>
<br>
<div class="ingredients">
<h2 style="color:#6FC0BB;">Bases</h2>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian vegan>
<p>Rice Noodles
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian vegan>
<p>Egg Noodles
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
<p>Vermicelli
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
<p>Whole Grain Noodle
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
<p>White Rice
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Brown Rice
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Vegetable Base
<p>
</div>
<h2 style="color:#C84327;">Proteins</h2>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Chicken
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Pork
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Smoked Tofu
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Beef
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Duck
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Prawns
<p>
</div>
<h2 style="color:#90A94D;">Toppings</h2>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Vegetable Mix
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Cashew
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Sweet Peppers Mix
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Wood Ear Mushroom
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Mushroom
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Pineapple
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Bamboo Shots
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Chinese Cabbage
<p>
</div>
<h2 style="color:#424040;">Sauces</h2>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Thailand-Padthai
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Chinese Sweet and Sour
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Burma- Green Curry
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Indonesia- Satay
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Laosz- Red Curry
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Japan- Teriyaki
<p>
</div>
<h2 style="color:#6FC0BB;">Extra Toppings</h2>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Roasted Peanut
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Coriander
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Sesame Seed
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
<p>Basil
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegan>
<p>Coconut Chips
<p>
</div>
<h2 style="color:#C84327;">Desserts</h2>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Cumin Lemon Vinaigrette
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Honey Cilantro Vinaigrette
<p>
</div>
<div class="total">
Total calories: <span id="total"></span> Total Carbs:<span id="totalCarbs"></span> Total Fat:<span id="totalFats"></span> Total Protein:<span id="totalProteins"></span>
<br>
<img id="typeImage" src="" height="50px" width="50px" alt="Select Something!" />
<span id="type"></span>
<br>
<img id="typeImageVega" src="" height="50px" width="50px" alt="Test" />
<span id="typeVega"></span>
<br>
</div>
</div>
<script src='http://ift.tt/1NCktat'></script>
<script src="js/index.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire