- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. First you need to add a Code Block
with this code
<div class="dose-calculator-wrapper">
<div class="dose-calculator">
<h2>Dose Calculator</h2>
<div class="dose-calc-group">
<label class="dose-calc-label" for="average-weight">
Average weight of birds (g)
</label>
<div class="dose-calc-input-group">
<input
type="number"
id="average-weight"
class="dose-calc-input"
value="0"
min="0"
step="0.1"
placeholder="Enter weight in grams"
/>
</div>
</div>
<div class="dose-calc-group">
<label class="dose-calc-label" for="num-birds">
Number of birds
</label>
<div class="dose-calc-input-group">
<input
type="number"
id="num-birds"
class="dose-calc-input"
value="1"
min="1"
step="1"
placeholder="Enter number of birds"
/>
</div>
</div>
<div class="dose-calc-result">
<div class="dose-calc-result-label">Dose (mL)</div>
<div class="dose-calc-result-value">
<span class="dose-value">0.00</span>
<span class="dose-calc-result-unit">mL</span>
</div>
</div>
<button class="dose-calc-button" type="button">
Calculate Dose
</button>
<div class="dose-calc-formula">
Formula: (Average weight ÷ 9000) × No. of birds
</div>
</div>
</div>
#1.2. Next, hover on page where you use Code Block > Click Gear icon
Click Advanced > Paste this code
<style>
/* Dose Calculator Styles */
:root {
--calc-background-color: #4a1a6b;
--calc-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
--calc-round-corners: 10px;
--calc-space: 40px 30px;
--calc-text-color: #fff;
--calc-heading-space: 0 0 30px 0;
--calc-field-bottom-space: 25px;
--calc-field-title: 18px;
--calc-field-title-line-height: 1.4;
--calc-field-title-bottom-space: 10px;
--calc-field-input-padding: 15px 20px;
--calc-field-input-text-size: 16px;
--calc-field-input-background: #fff;
--calc-field-input-text-color: #1f2937;
--calc-input-active-outline-color: #fbbf24;
--calc-result-label-size: 16px;
--calc-result-label-bottom-space: 10px;
--calc-result-label-opacity: 0.9;
--calc-result-value-size: 36px;
--calc-result-value-weight: 700;
--calc-result-value-color: #fbbf24;
--calc-result-unit-size: 20px;
--calc-button-padding: 18px 30px;
--calc-button-text-size: 18px;
--calc-button-text-weight: 700;
--calc-button-background-color: #fbbf24;
--calc-button-text-color: #000;
--calc-button-text-letter-spacing: 0.5px;
--calc-formula-text-size: 14px;
--calc-formula-background-color:rgba(255, 255, 255, 0.05);
}
.dose-calc-formula{margin-top:20px;padding:15px;background:var(--calc-formula-background-color);border-radius:var(--calc-round-corners);font-size:var(--calc-formula-text-size);text-align:center;font-style:italic}.dose-calc-button{width:100%;padding:var(--calc-button-padding);color:var(--calc-button-text-color);font-size:var(--calc-button-text-size);font-weight:var(--calc-button-text-weight);border:none;border-radius:50px;background:var(--calc-button-background-color);cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:var(--calc-button-text-letter-spacing);font-family:inherit}.dose-calc-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgb(251 191 36 / .4)}.dose-calculator{background:var(--calc-background-color);border-radius:var(--calc-round-corners);padding:var(--calc-space);color:var(--calc-text-color);box-shadow:var(--calc-shadow)}.dose-calculator h2{margin:var(--calc-heading-space);text-align:center;color:var(--calc-text-color)}.dose-calc-group{margin-bottom:var(--calc-field-bottom-space)}.dose-calc-label{display:block;font-size:var(--calc-field-title);margin-bottom:var(--calc-field-title-bottom-space);line-height:var(--calc-field-title-line-height)}.dose-calc-input-group{position:relative}.dose-calc-input{width:100%;padding:var(--calc-field-input-padding);font-size:var(--calc-field-input-text-size);border:none;border-radius:var(--calc-round-corners);background:var(--calc-field-input-background);color:var(--calc-field-input-text-color);box-sizing:border-box;font-family:inherit}.dose-calc-input:focus{outline:3px solid var(--calc-input-active-outline-color);outline-offset:2px}.dose-calc-result-value{font-size:var(--calc-result-value-size);font-weight:var(--calc-result-value-weight);color:var(--calc-result-value-color)}.dose-calc-result{background:rgb(255 255 255 / .1);border-radius:10px;padding:20px;margin:30px 0;text-align:center}.dose-calc-result-label{font-size:var(--calc-result-label-size);margin-bottom:var(--calc-result-label-bottom-space);opacity:var(--calc-result-label-opacity)}.dose-calc-result-unit{font-size:var(--calc-result-unit-size);margin-left:5px}.dose-calc-button:active{transform:translateY(0)}@media (max-width:767px){.dose-calculator{padding:30px 20px}.dose-calculator h2{font-size:28px}.dose-calc-result-value{font-size:30px}}
</style>
<script>
const DOSE_CONFIG={divisor:9e3,decimals:2};function calculateDose(e,t){return(e/DOSE_CONFIG.divisor*t).toFixed(DOSE_CONFIG.decimals)}function initDoseCalculator(){const e=document.querySelector(".dose-calculator");if(!e)return;const t=e.querySelector("#average-weight"),o=e.querySelector("#num-birds"),n=e.querySelector(".dose-value"),a=e.querySelector(".dose-calc-button");function r(){const e=calculateDose(parseFloat(t.value)||0,parseFloat(o.value)||0);n.textContent=e}t&&o&&n&&a&&(a.addEventListener("click",r),t.addEventListener("input",r),o.addEventListener("input",r),r())}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",initDoseCalculator):initDoseCalculator(),window.addEventListener("mercury:load",initDoseCalculator);
</script>
#2. Customize
All style options here (Line 03 to Line 41)
:root {
--calc-background-color: #4a1a6b;
--calc-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
--calc-round-corners: 10px;
--calc-space: 40px 30px;
--calc-text-color: #fff;
--calc-heading-space: 0 0 30px 0;
--calc-field-bottom-space: 25px;
--calc-field-title: 18px;
--calc-field-title-line-height: 1.4;
--calc-field-title-bottom-space: 10px;
--calc-field-input-padding: 15px 20px;
--calc-field-input-text-size: 16px;
--calc-field-input-background: #fff;
--calc-field-input-text-color: #1f2937;
--calc-input-active-outline-color: #fbbf24;
--calc-result-label-size: 16px;
--calc-result-label-bottom-space: 10px;
--calc-result-label-opacity: 0.9;
--calc-result-value-size: 36px;
--calc-result-value-weight: 700;
--calc-result-value-color: #fbbf24;
--calc-result-unit-size: 20px;
--calc-button-padding: 18px 30px;
--calc-button-text-size: 18px;
--calc-button-text-weight: 700;
--calc-button-background-color: #fbbf24;
--calc-button-text-color: #000;
--calc-button-text-letter-spacing: 0.5px;
--calc-formula-text-size: 14px;
--calc-formula-background-color:rgba(255, 255, 255, 0.05);
}
