The repo for Purrform's main BigCommerce store.
feat: add Dry Matter Basis Calculator with input fields and result display
+462
-403
+2
assets/js/app.js
+2
assets/js/app.js
···
59
59
import('./theme/custom/feline-grimace-scale'),
60
60
'pages/custom/page/rawsome-catculator': () =>
61
61
import('./theme/custom/rawsome-catculator'),
62
+
'pages/custom/page/dry-matter-basis-calculator': () =>
63
+
import('./theme/custom/dry-matter-basis-calculator'),
62
64
};
63
65
64
66
/**
+47
assets/js/theme/custom/dry-matter-basis-calculator.js
+47
assets/js/theme/custom/dry-matter-basis-calculator.js
···
1
+
import PageManager from '../page-manager';
2
+
3
+
export default class DryMatterBasisCalculator extends PageManager {
4
+
onReady() {
5
+
this.proteinInput = document.getElementById('dmb-protein-input');
6
+
this.moistureInput = document.getElementById('dmb-moisture-input');
7
+
this.calcBtn = document.getElementById('dmb-calc-btn');
8
+
this.resultEl = document.querySelector('.dmb-result');
9
+
if (!this.calcBtn) return;
10
+
this.calcBtn.addEventListener('click', () => this.calculate());
11
+
}
12
+
13
+
calculate() {
14
+
const protein = parseFloat(this.proteinInput.value);
15
+
const moisture = parseFloat(this.moistureInput.value);
16
+
17
+
if (Number.isNaN(protein) || Number.isNaN(moisture) || moisture >= 100 || moisture < 0 || protein < 0) {
18
+
this.resultEl.hidden = true;
19
+
return;
20
+
}
21
+
22
+
const dry = 100 - moisture;
23
+
const dmb = ((protein / dry) * 100).toFixed(2);
24
+
this.render({ protein, moisture, dry, dmb });
25
+
}
26
+
27
+
render({ protein, moisture, dry, dmb }) {
28
+
this.resultEl.hidden = false;
29
+
this.resultEl.innerHTML = '';
30
+
31
+
const rows = [
32
+
`% Protein = ${protein}`,
33
+
`% Moisture = ${moisture} (dry portion = ${dry}%)`,
34
+
`DMB = ${dmb}%`,
35
+
];
36
+
37
+
const heading = document.createElement('h3');
38
+
heading.textContent = 'Dry Matter Basis';
39
+
this.resultEl.appendChild(heading);
40
+
41
+
rows.forEach((text) => {
42
+
const p = document.createElement('p');
43
+
p.textContent = text;
44
+
this.resultEl.appendChild(p);
45
+
});
46
+
}
47
+
}
+1
-1
assets/scss/custom/main.scss
+1
-1
assets/scss/custom/main.scss
···
4
4
/* Custom Page Styling */
5
5
@import 'pages/cart';
6
6
@import 'pages/pdp';
7
-
@import 'pages/calculators';
8
7
@import 'pages/rawsome-catculator';
8
+
@import 'pages/dry-matter-basis-calculator';
9
9
@import 'pages/diet-builder';
10
10
@import 'pages/feline-grimace-scale';
11
11
@import 'pages/account';
-240
assets/scss/custom/pages/_calculators.scss
-240
assets/scss/custom/pages/_calculators.scss
···
1
-
.dry-matter-basis-calculator-page {
2
-
.calculator-toggler {
3
-
margin: 0 auto 2rem;
4
-
width: 100%;
5
-
justify-content: space-between;
6
-
display: none;
7
-
8
-
p {
9
-
padding: 12px;
10
-
text-align: center;
11
-
margin-bottom: 0;
12
-
margin-top: 0;
13
-
14
-
a {
15
-
color: $marketing-brand-text;
16
-
}
17
-
}
18
-
19
-
p.active {
20
-
border-bottom: 2px solid $marketing-brand-green;
21
-
font-weight: 700;
22
-
}
23
-
24
-
@include breakpoint('medium') {
25
-
width: 35%;
26
-
display: flex;
27
-
}
28
-
}
29
-
30
-
// ── Toggler (mobile) ─────────────────────────────────────────
31
-
.calculator-toggler-mobile {
32
-
background-color: $marketing-brand-green-light;
33
-
display: block;
34
-
width: 100vw;
35
-
position: relative;
36
-
left: calc(-50vw + 50%);
37
-
padding: 1rem 0;
38
-
39
-
.inner {
40
-
margin: auto;
41
-
width: 92%;
42
-
43
-
p {
44
-
padding: 0.5rem 0.8rem;
45
-
margin-bottom: 0.2rem;
46
-
47
-
a {
48
-
color: $marketing-brand-text;
49
-
}
50
-
}
51
-
52
-
p#toggler-active {
53
-
background-color: $marketing-brand-card;
54
-
border-radius: 30px;
55
-
56
-
span {
57
-
float: right;
58
-
59
-
&.open {
60
-
rotate: 180deg;
61
-
}
62
-
}
63
-
}
64
-
65
-
#toggler-dropdown {
66
-
display: none;
67
-
68
-
&.active {
69
-
display: block;
70
-
}
71
-
}
72
-
}
73
-
74
-
@include breakpoint('medium') {
75
-
display: none;
76
-
}
77
-
}
78
-
79
-
#dmb-test {
80
-
display: none;
81
-
background-color: $headingColor;
82
-
border-radius: 20px;
83
-
padding: 30px 30px 20px;
84
-
margin-top: 20px;
85
-
86
-
h3 {
87
-
color: white;
88
-
font-weight: 700;
89
-
font-size: 24px;
90
-
margin: 0 0 1rem;
91
-
}
92
-
93
-
p {
94
-
color: white;
95
-
font-weight: 700;
96
-
font-size: 20px;
97
-
margin-bottom: 1rem;
98
-
}
99
-
}
100
-
101
-
#dry-matter-container {
102
-
padding-top: 2rem;
103
-
display: grid;
104
-
gap: 20px;
105
-
grid-template-columns: 1fr;
106
-
}
107
-
108
-
#dry-matter-container h1 {
109
-
color: #687d6a;
110
-
}
111
-
112
-
#dry-matter-container .dmc2 h1 {
113
-
color: #232524;
114
-
}
115
-
116
-
.green-col {
117
-
color: #687d6a;
118
-
}
119
-
120
-
.dmc2 {
121
-
order: -1;
122
-
border: 1px solid #dcdcdc;
123
-
border-radius: 40px;
124
-
box-shadow: 1px 1px 8px 2px rgba(220, 220, 220, 1);
125
-
padding: 0 20px 20px;
126
-
127
-
@include breakpoint('medium') {
128
-
padding: 0 30px 20px;
129
-
}
130
-
131
-
.percent-calculator {
132
-
display: block;
133
-
134
-
div {
135
-
position: relative;
136
-
137
-
input {
138
-
margin-top: 0.5rem;
139
-
}
140
-
141
-
#calcBtn {
142
-
width: 100%;
143
-
transition: all 0.2s ease;
144
-
border: 2px solid $headingColor !important;
145
-
146
-
&:hover {
147
-
background-color: white !important;
148
-
149
-
p {
150
-
color: $headingColor !important;
151
-
}
152
-
}
153
-
154
-
@include breakpoint('medium') {
155
-
position: absolute;
156
-
bottom: 0;
157
-
left: 0;
158
-
}
159
-
}
160
-
161
-
@include breakpoint('medium') {
162
-
padding: 0 0.7rem 0 0;
163
-
}
164
-
}
165
-
166
-
@include breakpoint('medium') {
167
-
display: grid;
168
-
max-width: 100%;
169
-
grid-template-columns: 35% 35% 30%;
170
-
171
-
p {
172
-
margin-bottom: 0.5rem;
173
-
}
174
-
175
-
input {
176
-
width: 100%;
177
-
}
178
-
}
179
-
}
180
-
}
181
-
182
-
#dry-matter-bottom {
183
-
margin-top: 2rem;
184
-
background-color: #f3f2f2;
185
-
width: 100vw;
186
-
position: relative;
187
-
left: calc(-50vw + 50%);
188
-
padding: 3rem 0;
189
-
190
-
.dry-matter-info-table {
191
-
display: grid;
192
-
grid-template-columns: auto;
193
-
margin: auto;
194
-
width: 92%;
195
-
196
-
p {
197
-
margin-bottom: 1rem;
198
-
}
199
-
200
-
strong {
201
-
font-size: 24px;
202
-
}
203
-
204
-
table {
205
-
width: 100%;
206
-
207
-
th {
208
-
font-weight: 700;
209
-
text-align: left;
210
-
color: #687d6a;
211
-
padding: 0.5rem 55px 0.5rem 0;
212
-
}
213
-
214
-
td {
215
-
padding: 0.5rem 55px 0.5rem 0;
216
-
border-bottom: 1px solid #dbdada;
217
-
}
218
-
}
219
-
220
-
@include breakpoint('medium') {
221
-
width: 81%;
222
-
grid-template-columns: auto auto auto;
223
-
}
224
-
}
225
-
226
-
@include breakpoint('medium') {
227
-
width: 99.4vw;
228
-
}
229
-
}
230
-
231
-
@include breakpoint('medium') {
232
-
#dry-matter-container {
233
-
grid-template-columns: 1fr 1fr;
234
-
}
235
-
236
-
.dmc2 {
237
-
order: 2;
238
-
}
239
-
}
240
-
}
+346
assets/scss/custom/pages/_dry-matter-basis-calculator.scss
+346
assets/scss/custom/pages/_dry-matter-basis-calculator.scss
···
1
+
// ── Dry Matter Basis Calculator ───────────────────────────────────────
2
+
3
+
.dry-matter-basis-calculator-page {
4
+
width: 100vw;
5
+
margin-left: calc(-50vw + 50%);
6
+
background: $marketing-brand-bg;
7
+
min-height: 100vh;
8
+
position: relative;
9
+
padding: 2rem 1rem;
10
+
11
+
// ── Heading ───────────────────────────────────────────────────
12
+
.calculator-heading {
13
+
margin: 2rem auto;
14
+
text-align: center;
15
+
max-width: 70ch;
16
+
text-wrap: balance;
17
+
position: relative;
18
+
z-index: 1;
19
+
animation: dmbFadeDown 0.6s ease both;
20
+
21
+
h1 {
22
+
font-weight: 700;
23
+
font-size: clamp(1.8rem, 5vw, 2.8rem);
24
+
color: $marketing-brand-green;
25
+
line-height: 1.1;
26
+
letter-spacing: -0.5px;
27
+
margin-bottom: 1rem;
28
+
}
29
+
30
+
p {
31
+
font-size: 1rem;
32
+
font-weight: 300;
33
+
color: $marketing-brand-text-muted;
34
+
line-height: 1.6;
35
+
max-width: 520px;
36
+
margin-inline: auto;
37
+
}
38
+
}
39
+
40
+
// ── Toggler (desktop) ─────────────────────────────────────────
41
+
.calculator-toggler {
42
+
margin: 0 auto 2rem;
43
+
width: 100%;
44
+
justify-content: space-between;
45
+
display: none;
46
+
47
+
p {
48
+
padding: 12px;
49
+
text-align: center;
50
+
margin-bottom: 0;
51
+
margin-top: 0;
52
+
53
+
a {
54
+
color: $marketing-brand-text;
55
+
}
56
+
}
57
+
58
+
p.active {
59
+
border-bottom: 2px solid $marketing-brand-green;
60
+
font-weight: 700;
61
+
}
62
+
63
+
@include breakpoint('medium') {
64
+
width: 35%;
65
+
display: flex;
66
+
}
67
+
}
68
+
69
+
// ── Toggler (mobile) ──────────────────────────────────────────
70
+
.calculator-toggler-mobile {
71
+
background-color: $marketing-brand-green-light;
72
+
display: block;
73
+
width: 100vw;
74
+
position: relative;
75
+
left: calc(-50vw + 50%);
76
+
padding: 1rem 0;
77
+
78
+
.inner {
79
+
margin: auto;
80
+
width: 92%;
81
+
82
+
p {
83
+
padding: 0.5rem 0.8rem;
84
+
margin-bottom: 0.2rem;
85
+
86
+
a {
87
+
color: $marketing-brand-text;
88
+
}
89
+
}
90
+
91
+
p#toggler-active {
92
+
background-color: $marketing-brand-card;
93
+
border-radius: 30px;
94
+
95
+
span {
96
+
float: right;
97
+
98
+
&.open {
99
+
rotate: 180deg;
100
+
}
101
+
}
102
+
}
103
+
104
+
#toggler-dropdown {
105
+
display: none;
106
+
107
+
&.active {
108
+
display: block;
109
+
}
110
+
}
111
+
}
112
+
113
+
@include breakpoint('medium') {
114
+
display: none;
115
+
}
116
+
}
117
+
118
+
// ── Main calculator grid ──────────────────────────────────────
119
+
#dry-matter-container {
120
+
padding-top: 2rem;
121
+
display: grid;
122
+
gap: 2rem;
123
+
grid-template-columns: 1fr;
124
+
125
+
@include breakpoint('medium') {
126
+
grid-template-columns: 1fr 1fr;
127
+
}
128
+
}
129
+
130
+
// ── Intro column ──────────────────────────────────────────────
131
+
.dmb-intro {
132
+
h2 {
133
+
font-size: 1.4rem;
134
+
font-weight: 700;
135
+
color: $marketing-brand-green;
136
+
margin-bottom: 1rem;
137
+
}
138
+
139
+
p {
140
+
font-size: 0.95rem;
141
+
color: $marketing-brand-text-muted;
142
+
line-height: 1.65;
143
+
margin-bottom: 1rem;
144
+
}
145
+
}
146
+
147
+
// ── Input card ────────────────────────────────────────────────
148
+
.dmb-input {
149
+
order: -1;
150
+
background-color: $marketing-brand-card;
151
+
border: 2px solid $marketing-brand-border;
152
+
border-radius: $marketing-brand-radius;
153
+
padding: 1.5rem 1.25rem 1.75rem;
154
+
box-shadow: 0 2px 12px rgba(84, 96, 82, 0.08);
155
+
156
+
@include breakpoint('medium') {
157
+
order: 2;
158
+
padding: 1.75rem 2rem 2rem;
159
+
}
160
+
161
+
h2 {
162
+
font-size: 1.1rem;
163
+
font-weight: 600;
164
+
color: $marketing-brand-text;
165
+
line-height: 1.4;
166
+
margin-bottom: 1.5rem;
167
+
}
168
+
169
+
.dmb-green {
170
+
color: $marketing-brand-green;
171
+
}
172
+
}
173
+
174
+
// ── Input fields ──────────────────────────────────────────────
175
+
.dmb-input__fields {
176
+
display: flex;
177
+
flex-direction: column;
178
+
gap: 1rem;
179
+
180
+
@include breakpoint('medium') {
181
+
display: grid;
182
+
grid-template-columns: 1fr 1fr auto;
183
+
align-items: flex-end;
184
+
gap: 0.75rem;
185
+
}
186
+
}
187
+
188
+
.dmb-input__field {
189
+
display: flex;
190
+
flex-direction: column;
191
+
gap: 0.4rem;
192
+
193
+
label {
194
+
font-size: 0.85rem;
195
+
color: $marketing-brand-text;
196
+
text-transform: uppercase;
197
+
letter-spacing: 0.5px;
198
+
}
199
+
200
+
input[type='number'] {
201
+
width: 100%;
202
+
height: 3.5rem;
203
+
border: 2px solid $marketing-brand-border;
204
+
border-radius: $marketing-brand-radius;
205
+
background-color: $marketing-brand-bg;
206
+
color: $marketing-brand-text;
207
+
font-size: 1.2rem;
208
+
font-weight: 600;
209
+
text-align: center;
210
+
appearance: textfield;
211
+
transition:
212
+
border-color $marketing-brand-transition,
213
+
box-shadow $marketing-brand-transition;
214
+
215
+
&:focus {
216
+
outline: none;
217
+
border-color: $marketing-brand-green;
218
+
box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1);
219
+
}
220
+
221
+
&::-webkit-outer-spin-button,
222
+
&::-webkit-inner-spin-button {
223
+
appearance: none;
224
+
margin: 0;
225
+
}
226
+
}
227
+
228
+
&.dmb-input__field--btn {
229
+
@include breakpoint('medium') {
230
+
padding-bottom: 0;
231
+
}
232
+
233
+
.rawsome-button--primary {
234
+
width: 100%;
235
+
height: 3.5rem;
236
+
}
237
+
}
238
+
}
239
+
240
+
// ── Result panel ──────────────────────────────────────────────
241
+
.dmb-result {
242
+
margin-top: 1.5rem;
243
+
background-color: $marketing-brand-green;
244
+
border-radius: $marketing-brand-radius;
245
+
padding: 1.25rem 1.5rem;
246
+
247
+
h3 {
248
+
color: #fff;
249
+
font-size: 1.1rem;
250
+
font-weight: 700;
251
+
margin: 0 0 0.75rem;
252
+
}
253
+
254
+
p {
255
+
color: #fff;
256
+
font-size: 1rem;
257
+
font-weight: 600;
258
+
margin-bottom: 0.5rem;
259
+
260
+
&:last-child {
261
+
margin-bottom: 0;
262
+
}
263
+
}
264
+
}
265
+
}
266
+
267
+
// ── Bottom info section ───────────────────────────────────────────────
268
+
#dry-matter-bottom {
269
+
border-top: 1px solid $marketing-brand-border;
270
+
margin-top: 2rem;
271
+
width: 100vw;
272
+
position: relative;
273
+
left: calc(-50vw + 50%);
274
+
padding: 3rem 0;
275
+
background-color: $marketing-brand-green-light;
276
+
277
+
.dry-matter-info-table {
278
+
display: grid;
279
+
grid-template-columns: 1fr;
280
+
gap: 2rem;
281
+
margin: auto;
282
+
width: 92%;
283
+
284
+
> div {
285
+
background-color: $marketing-brand-card;
286
+
border: 2px solid $marketing-brand-border;
287
+
border-radius: $marketing-brand-radius;
288
+
padding: 1.5rem;
289
+
290
+
h3 {
291
+
font-size: 1.1rem;
292
+
font-weight: 700;
293
+
color: $marketing-brand-green;
294
+
margin: 0 0 1rem;
295
+
}
296
+
297
+
p {
298
+
color: $marketing-brand-text-muted;
299
+
font-size: 0.95rem;
300
+
margin-bottom: 0.5rem;
301
+
302
+
&:last-child {
303
+
margin-bottom: 0;
304
+
}
305
+
306
+
strong {
307
+
font-size: 1rem;
308
+
color: $marketing-brand-green;
309
+
}
310
+
}
311
+
}
312
+
313
+
@include breakpoint('medium') {
314
+
width: 81%;
315
+
grid-template-columns: 1fr 1fr 1fr;
316
+
}
317
+
}
318
+
}
319
+
320
+
// ── Comparison table (third info card) ───────────────────────────────
321
+
.dmb-comparison-table {
322
+
display: grid;
323
+
grid-template-columns: 1fr 1fr;
324
+
gap: 1rem;
325
+
326
+
.dmb-comparison-table__col {
327
+
.dmb-comparison-table__heading {
328
+
font-weight: 700;
329
+
color: $marketing-brand-green;
330
+
margin-bottom: 0.5rem;
331
+
}
332
+
}
333
+
}
334
+
335
+
// ── Animations ────────────────────────────────────────────────────────
336
+
@keyframes dmbFadeDown {
337
+
from {
338
+
opacity: 0;
339
+
transform: translateY(-16px);
340
+
}
341
+
342
+
to {
343
+
opacity: 1;
344
+
transform: translateY(0);
345
+
}
346
+
}
+66
-162
templates/pages/custom/page/dry-matter-basis-calculator.html
+66
-162
templates/pages/custom/page/dry-matter-basis-calculator.html
···
1
1
{{#partial "page"}}
2
-
3
2
<div class="dry-matter-basis-calculator-page">
4
3
<div class="calculator-heading">
5
-
<h1>
6
-
How much protein are you currently feeding your cat?
7
-
</h1>
8
-
<p>Use our calculator below to compare how much protein Purrform provides versus other cat foods</p>
4
+
<h1>How much protein are you currently feeding your cat?</h1>
5
+
<p>
6
+
Use our calculator below to compare how much protein Purrform
7
+
provides versus other cat foods
8
+
</p>
9
9
</div>
10
10
11
11
{{> components/custom/calculator-toggler}}
12
12
{{> components/custom/calculator-toggler-mobile}}
13
13
14
14
<div id="dry-matter-container">
15
-
<div class="dmc1">
16
-
<h1>Dry Matter Basis Calculator</h1>
15
+
<div class="dmb-intro">
16
+
<h2>Dry Matter Basis Calculator</h2>
17
17
<p>
18
18
This calculator will help you find out how much protein your cat is
19
-
really eating & compare it to the amount in other cat foods. As cats are
19
+
really eating & compare it to the amount in other cat foods. As cats are
20
20
carnivores, it is vital that they are fed a high protein diet to have a
21
21
long and healthy life.
22
22
</p>
···
40
40
foods.
41
41
</p>
42
42
</div>
43
-
<div class="dmc2">
44
-
<h1>
45
-
Input the <span class="green-col">% of protein</span> and the
46
-
<span class="green-col">% moisture</span> of the food you want to
43
+
44
+
<div class="dmb-input">
45
+
<h2>
46
+
Input the <span class="dmb-green">% of protein</span> and the
47
+
<span class="dmb-green">% of moisture</span> of the food you want to
47
48
calculate:
48
-
</h1>
49
+
</h2>
49
50
50
-
<div class="percent-calculator">
51
-
<div>
52
-
<label for="ingredient"><strong>% Protein</strong></label>
53
-
<input
54
-
id="ingredient"
55
-
style="
56
-
border-radius: 32px;
57
-
border: 1px solid #dbdada;
58
-
padding-left: 10px;
59
-
color: #000000;
60
-
font-weight: bold;
61
-
font-size: 18px;
62
-
margin-right: 10px;
63
-
64
-
height: 3rem;
65
-
"
66
-
/>
51
+
<div class="dmb-input__fields">
52
+
<div class="dmb-input__field">
53
+
<label for="dmb-protein-input"><strong> Protein %</strong></label>
54
+
<input id="dmb-protein-input" type="number" min="0" max="100" step="0.1" />
67
55
</div>
68
-
<div>
69
-
<label for="moisture"><strong>% Moisture</strong></label>
70
-
<input
71
-
id="moisture"
72
-
style="
73
-
border-radius: 32px;
74
-
border: 1px solid #dbdada;
75
-
padding-left: 10px;
76
-
color: #000000;
77
-
font-weight: bold;
78
-
font-size: 18px;
79
-
margin-right: 10px;
56
+
<div class="dmb-input__field">
57
+
<label for="dmb-moisture-input"><strong> Moisture %</strong></label>
58
+
<input id="dmb-moisture-input" type="number" min="0" max="99" step="0.1" />
59
+
</div>
60
+
<div class="dmb-input__field dmb-input__field--btn">
61
+
<button id="dmb-calc-btn" class="rawsome-button--primary">
62
+
Calculate
63
+
</button>
64
+
</div>
65
+
</div>
80
66
81
-
height: 3rem;
82
-
"
83
-
/>
84
-
</div>
85
-
<div>
86
-
<button
87
-
id="calcBtn"
88
-
style="
89
-
height: 3rem;
90
-
border-color: #687d6a;
91
-
border-radius: 40px;
92
-
background-color: #687d6a;
93
-
text-align: center;
94
-
"
95
-
>
96
-
<p
97
-
style="
98
-
color: #fff;
99
-
font-size: 18px;
100
-
font-weight: bold;
101
-
margin: auto;
102
-
padding-bottom: 3px;
103
-
"
104
-
>
105
-
Calculate
106
-
</p>
107
-
</button>
67
+
<div class="dmb-result" hidden></div>
108
68
</div>
109
69
</div>
110
70
111
-
<div id="dmb-test">
112
-
<h3>Dry Matter Basis</h3>
113
-
<p id="dmb-protein"></p>
114
-
<p id="dmb-moisure"></p>
115
-
<p id="dmb-dmb"></p>
116
-
</div>
117
-
118
-
<div id="DMBWindow"></div>
119
-
</div>
120
-
</div>
121
-
122
-
<div id="dry-matter-bottom">
123
-
<div class="dry-matter-info-table">
124
-
<div>
125
-
<h3>Dry Food</h3>
126
-
<p>Protein = 36%</p>
127
-
<p> Moisture = 11%</p>
128
-
<p> 100% (dry and wet) - 11% (wet) = 89% dry</p>
129
-
<p> (36% Protein / 89%dry) x 100</p>
130
-
<p><strong>= 40% Protein DMB in dry food</strong></p>
131
-
</div>
132
-
<div>
133
-
<h3>Canned Food</h3>
134
-
<p>Protein = 10%</p>
135
-
<p> Moisture = 78%</p>
136
-
<p> 100% (dry and wet) - 78% (wet) = 22% dry</p>
137
-
<p>(10% Protein / 22%dry) x 100</p>
138
-
<p><strong>= 45% Protein DMB in dry food</strong></p>
139
-
</div>
140
-
<div>
141
-
<h3>Calculating the Dry Matter Basis</h3>
142
-
<table>
143
-
<thead >
144
-
<tr>
145
-
<th>Dry Food</th>
146
-
<th>Canned Food</th>
147
-
</tr>
148
-
<tr>
149
-
<td>Protein 36%</td>
150
-
<td>Protein 10%</td>
151
-
</tr>
152
-
<tr>
153
-
<td>Fat 18%</td>
154
-
<td>Fat 5%</td>
155
-
</tr>
156
-
<tr>
157
-
<td>Moisture 11%</td>
158
-
<td>Moisture 78%</td>
159
-
</tr>
160
-
</thead>
161
-
</table>
71
+
<div id="dry-matter-bottom">
72
+
<div class="dry-matter-info-table">
73
+
<div>
74
+
<h3>Dry Food</h3>
75
+
<p>Protein: 36%</p>
76
+
<p>Moisture: 11%</p>
77
+
<p>100% (dry and wet) − 11% (wet) = 89% dry</p>
78
+
<p>(36% Protein / 89% dry) × 100</p>
79
+
<p><strong>= 40% Protein DMB in dry food</strong></p>
80
+
</div>
81
+
<div>
82
+
<h3>Canned Food</h3>
83
+
<p>Protein: 10%</p>
84
+
<p>Moisture: 78%</p>
85
+
<p>100% (dry and wet) − 78% (wet) = 22% dry</p>
86
+
<p>(10% Protein / 22% dry) × 100</p>
87
+
<p><strong>= 45% Protein DMB in canned food</strong></p>
88
+
</div>
89
+
<div>
90
+
<h3>Calculating the Dry Matter Basis</h3>
91
+
<div class="dmb-comparison-table">
92
+
<div class="dmb-comparison-table__col">
93
+
<p class="dmb-comparison-table__heading">Dry Food</p>
94
+
<p>Protein: 36%</p>
95
+
<p>Fat: 18%</p>
96
+
<p>Moisture: 11%</p>
97
+
</div>
98
+
<div class="dmb-comparison-table__col">
99
+
<p class="dmb-comparison-table__heading">Canned Food</p>
100
+
<p>Protein: 10%</p>
101
+
<p>Fat: 5%</p>
102
+
<p>Moisture: 78%</p>
103
+
</div>
104
+
</div>
105
+
</div>
162
106
</div>
163
107
</div>
164
108
</div>
165
-
{{/partial}}
166
-
{{> layout/base}}
167
-
168
-
169
-
<style>
170
-
@media only screen and (max-width: 640px) {
171
-
.percent-calculator input,
172
-
.percent-calculator button {
173
-
width: 100% !important;
174
-
margin-bottom: 10px;
175
-
}
176
-
}
177
-
</style>
178
-
179
-
<script>
180
-
let closeWindow = () => {
181
-
let DMBWindow = document.getElementById("DMBWindow");
182
-
DMBWindow.innerHTML = ``;
183
-
};
184
-
185
-
let showCalc = () => {
186
-
let calcBtn = document.getElementById("calcBtn");
187
-
let calcInfo = document.getElementById("dmb-test");
188
-
189
-
let ingredientPercent = document.getElementById("ingredient").value;
190
-
let moisturePercent = document.getElementById("moisture").value;
191
-
let moisture = 100 - moisturePercent;
192
-
193
-
let DMBcalc = ((ingredientPercent / moisture) * 100).toFixed(2);
194
-
195
-
calcInfo.style.display = "block";
196
-
197
-
document.getElementById("dmb-protein").innerHTML =
198
-
"% Protein = " + `${ingredientPercent}`;
199
-
document.getElementById("dmb-moisure").innerHTML =
200
-
"% Moisture = " + `${moisture}`;
201
-
document.getElementById("dmb-dmb").innerHTML =
202
-
"DMB = " + `${DMBcalc}` + "%";
203
-
};
204
-
205
-
calcBtn.addEventListener("click", showCalc);
206
-
</script>
109
+
{{/partial}}
110
+
{{> layout/base}}