Kim's Bread Flour Blend Calculator
Saya ada sediakan satu kalkulator khas untuk anda buat Flour Blend. Kalkulator ni disiapkan untuk memudahkan pengiraan berapa gram campuran bahan lain yang diperlukan untuk membuat tepung roti Kim.
Cara guna Kalkulator Kim's Bread Flour Blend
Sekiranya anda nak buat kiraan untuk 500gram flour blend, anda hanya perlu masukkan 500gram pada kalkulator.
Lepas tu tekan butang Calculate, dan kalkulator ini akan memberikan jumlah gram yang diperlukan bagi bahan-bahan berikut;
- Potato Starch
- White rice flour,
- Tapioca Starch,
- Whey Protein, dan
- Xanthan Gum
secara automatik dengan ratio yang tepat mengikut formula asal Kim's Bread Flour Blend.
Akses Kalkulator
Anda boleh terus menggunakan Kalkulator Kim's Bread Flour Blend ini setiap kali anda nak buat adunan roti. Dah tak perlu pening-pening kepala nak buat kiraan untuk setiap bahan.{alertSuccess}
Letak Kalkulator dalam blog atau website
Bagi anda yang mempunyai blog atau website sendiri, anda boleh letakkan code yang saya sediakan di bawah ini ke dalam blog anda.
<html>
<head>
<title>Mixture Calculator</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<style>
body {
font-family: Arial, sans-serif;
background-color: #F7F7F2; /* Main Background */
margin: 0;
padding: 0;
}
.mixture-calculator {
position: relative; /* Added for absolute positioning of logo and link */
width: 90%;
max-width: 400px;
margin: 50px auto;
background-color: #FFFFFF; /* Calculator Background */
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden; /* Clear float */
border: 1px solid #CCCCCC; /* Container border */
}
.mixture-calculator h2 {
text-align: center;
color: #333333;
margin-bottom: 20px;
}
.mixture-calculator label {
display: block;
margin-bottom: 5px;
color: #333333; /* Input Text */
}
.mixture-calculator input[type="text"],
.mixture-calculator input[type="number"] { /* Applied to both text and number inputs */
width: calc(50% - 5px);
padding: 8px;
margin-bottom: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
background-color: #EAE7DC; /* Input Background */
color: #333333; /* Input Text */
}
.mixture-result {
width: 50%;
float: left;
box-sizing: border-box;
margin-bottom: 10px;
padding-right: 10px;
}
.mixture-result:nth-child(2n) {
padding-right: 0;
}
.mixture-result label {
font-weight: bold;
margin-bottom: 5px;
color: #333333; /* Input Text */
display: block;
}
.mixture-result input[type="text"] {
width: calc(100% - 10px);
padding: 6px;
border: 1px solid #cccccc;
border-radius: 4px;
background-color: #FFFFFF; /* Calculator Background */
color: #333333; /* Input Text */
}
.mixture-calculator button {
width: 100%;
padding: 10px;
background-color: #5EAAA8; /* Button Background */
color: #FFFFFF; /* Button Text */
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
clear: both; /* Ensures button clears floated elements */
}
.mixture-calculator button:hover {
background-color: #478E8B; /* Darker shade of Button Background */
}
/* Style for logo and link */
.logo-link-container {
position: absolute;
bottom: 10px;
right: 10px;
}
.logo-link-container a {
color: #5EAAA8; /* Link Color */
text-decoration: none;
font-size: 14px;
margin-left: 5px;
}
.logo-link-container a:hover {
text-decoration: underline;
}
</style>
<script>
function calculateMixture() {
// Get the total weight input value
var totalWeight = parseFloat(document.getElementById('totalWeight').value);
// Reference mixture ratios
var ratios = {
"potatoStarch": 285 / 700,
"riceFlour": 250 / 700,
"tapiocaStarch": 75 / 700,
"wheyProtein": 75 / 700,
"xanthanGum": 15 / 700
};
// Calculate quantities for each ingredient based on the ratios
var quantities = {
"potatoStarch": (ratios["potatoStarch"] * totalWeight).toFixed(2),
"riceFlour": (ratios["riceFlour"] * totalWeight).toFixed(2),
"tapiocaStarch": (ratios["tapiocaStarch"] * totalWeight).toFixed(2),
"wheyProtein": (ratios["wheyProtein"] * totalWeight).toFixed(2),
"xanthanGum": (ratios["xanthanGum"] * totalWeight).toFixed(2)
};
// Display the quantities
document.getElementById('potatoStarch').value = quantities["potatoStarch"];
document.getElementById('riceFlour').value = quantities["riceFlour"];
document.getElementById('tapiocaStarch').value = quantities["tapiocaStarch"];
document.getElementById('wheyProtein').value = quantities["wheyProtein"];
document.getElementById('xanthanGum').value = quantities["xanthanGum"];
}
</script>
</head>
<body>
<div class="mixture-calculator">
<h2>Kim's Bread Flour Blend Calculator</h2>
<label for="totalWeight">Enter total mixture weight (in grams):</label>
<input id="totalWeight" inputmode="numeric" pattern="\d*" type="number" />
<button onclick="calculateMixture()">Calculate</button>
<br /><br />
<div class="mixture-result">
<label for="potatoStarch">Potato Starch (g):</label>
<input id="potatoStarch" readonly="" type="text" />
</div>
<div class="mixture-result">
<label for="riceFlour">Rice Flour (g):</label>
<input id="riceFlour" readonly="" type="text" />
</div>
<div class="mixture-result">
<label for="tapiocaStarch">Tapioca Starch (g):</label>
<input id="tapiocaStarch" readonly="" type="text" />
</div>
<div class="mixture-result">
<label for="wheyProtein">Whey Protein (g):</label>
<input id="wheyProtein" readonly="" type="text" />
</div>
<div class="mixture-result">
<label for="xanthanGum">Xanthan Gum (g):</label>
<input id="xanthanGum" readonly="" type="text" />
</div>
<!-- Logo and Link -->
<div class="logo-link-container">
<a href="https://www.asmrdhia.com">
<img alt="asmrdhia logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQP7WKbTeIZAMzvL5fDopiBW9FEQbJ0YCgC2iPnxeW9CUvq_Xd4_js2CZvKvS3pbviiThdlDKkx4AlBSf6uyoLPDrXU4izMlXkZtfOb1FiceAHuEoWdIGjnL6NSMnOTt5IFTxmAcQV3CMGR5wQR9C9YBkjVOTFnkHsoJtkf4nEPNVNv1G7-AWbMM6Vpks/s1600/logo%20flour%20blend.png" />
</a>
</div>
</div>
</body>
</html>
Tags:
Tips dan Trick
