Special Nutritional Requirements Tracker
About this app
A web app for tracking special nutritional requirements for people with CSID and EoE.
Special Nutritional Requirements Tracker 🍽️ Special Nutritional Requirements Tracker 🍽️ Food Item 1 Ingredients: Wheat, Soy, Dairy, Egg Food Item 2 Ingredients: Pea Protein, Water, Sunflower Oil
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Special Nutritional Requirements Tracker</title>
<meta name="description" content="A web app for tracking special nutritional requirements for people with CSID and EoE.">
<meta name="keywords" content="CSID, EoE, Nutrition, Tracker, Food, Allergens">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
font-family: 'Lobster', cursive;
text-align: center;
color: #20639B;
}
.container {
margin-top: 2em;
}
.food-item {
margin-bottom: 1em;
}
.food-item h2 {
font-size: 1.5em;
margin-bottom: 0.5em;
}
.food-item p {
margin-bottom: 0.5em;
}
.allergen {
color: #EB5E55;
}
.safe {
color: #0F9960;
}
.emoji {
font-size: 2em;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const allergens = ["Bran", "Bulgur", "Durum", "Einkorn", "Emmer", "Farina", "Graham Flour", "Kamut", "Semolina", "Spelt",
"Hydrolyzed Wheat Protein", "Modified Wheat Starch", "Wheat Germ Oil", "Wheat grass", "Wheat Protein Isolate",
"Wheat Starch", "Cereal Extract", "Couscous", "Creacker meal", "Wheat Branson hydrolysate", "Wheat germ glycerides",
"Wheat-berries", "Wheat germ", "Edamame", "Miso", "Natto", "Soy albumin", "Soy concentrate", "Soy fiber",
"Soy formula", "Soy grits", "Soy nuts", "Sprouts", "Tamari", "Tempeh", "Textured vegetable protein (TVP)", "Tofu",
"Casein", "Caseinates", "Curds", "Ghee", "Lactalbumin", "Lactoferrin", "Lactose", "Lactulose", "Whey",
"Albumin", "Globulin", "Lecithin", "Livetin", "Lysozyme", "Ovalbumin", "Ovoglobulin", "Ovomucin", "Ovomucoid",
"Ovotransferrin", "Silici albuminate", "Vitellin"];
const foodItems = document.querySelectorAll('.food-item');
foodItems.forEach(item => {
const ingredients = item.dataset.ingredients.split(',');
let safe = true;
ingredients.forEach(ingredient => {
if (allergens.includes(ingredient.trim())) {
safe = false;
}
});
if (safe) {
item.classList.add('safe');
item.querySelector('.emoji').textContent = '✅';
} else {
item.classList.add('allergen');
item.querySelector('.emoji').textContent = '⚠️';
}
});
});
</script>
</head>
<body>
<h1>🍽️ Special Nutritional Requirements Tracker 🍽️</h1>
<div id="main-container" class="container">
<div class="food-item" data-ingredients="Wheat, Soy, Dairy, Egg">
<h2>Food Item 1</h2>
<p>Ingredients: Wheat, Soy, Dairy, Egg</p>
<p class="emoji"></p>
</div>
<div class="food-item" data-ingredients="Pea Protein, Water, Sunflower Oil">
<h2>Food Item 2</h2>
<p>Ingredients: Pea Protein, Water, Sunflower Oil</p>
<p class="emoji"></p>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!