The repo for Purrform's main BigCommerce store.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add Dry Matter Basis Calculator with input fields and result display

+462 -403
+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
··· 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
··· 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
··· 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
··· 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
··· 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 &amp; 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) &minus; 11% (wet) = 89% dry</p> 78 + <p>(36% Protein / 89% dry) &times; 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) &minus; 78% (wet) = 22% dry</p> 86 + <p>(10% Protein / 22% dry) &times; 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}}