Hi everybody,
I have some trouble with an HTML code. The code is for a calculator and I want it to be displayed on my sidebar and inside posts.
Unfortunately, the result is awful and the calculator deformed.
Here’s the code:
<div>
<link rel="stylesheet" type="text/css" href="css/bmr-main.css">
<link rel="stylesheet" type="text/css" href="css/bmr-light-simplistic-grey.css">
<div id="bmrNoScript">
Please enable JavaScript to run this calculator
</div>
<!-- Begin Calculator Inputs Area -->
<form name="bmrCalculator" class="bmrCalculator">
<div class="bmr-calculator-container js-bmr-calculator">
<div class="bmr-calculator-header">
Basal Metabolic Rate (BMR)
</div>
<div class="bmr-calculator-item-container" id="bmrMeasurement">
<label> Measurement units </label>
<div class="bmr-tip">
? <span class="bmr-tiptext">Metric (kg/cm) or
<br>
Imperial (lb/inch)</span>
</div>
<div class="bmr-calculator-item">
<button class="bmr-split-button bmr-sb-1 bmr-active" id="bmrMeasurement1" onclick="bmrSetUnit('m', event)">
Metric
</button>
<button class="bmr-split-button bmr-sb-2" id="bmrMeasurement2" onclick="bmrSetUnit('i', event)">
Imperial
</button>
</div>
</div>
<div class="bmr-calculator-item-container" id="bmrGenre">
<label> Genre </label>
<div class="bmr-tip">
? <span class="bmr-tiptext">Select your genre</span>
</div>
<div class="bmr-calculator-item">
<button class="bmr-split-button bmr-sb-1 bmr-active" id="bmrGenre1" onclick="bmrSetGenre('m', event)">
Male
</button>
<button class="bmr-split-button bmr-sb-2" id="bmrGenre2" onclick="bmrSetGenre('f', event)">
Female
</button>
</div>
</div>
<br>
<div class="bmr-calculator-item-container" id="bmrAgeContainer">
<label> Age </label>
<div class="bmr-tip">
? <span class="bmr-tiptext">Enter your age</span>
</div>
<div class="bmr-calculator-item">
<input type="text" value="25" class="bmr-calculator-input" id="bmrAge">
<span class="bmr-input-label">years</span>
</div>
</div>
<br>
<div class="bmr-calculator-item-container" id="bmrWeightContainer">
<label> Weight </label>
<div class="bmr-tip">
? <span class="bmr-tiptext">Enter your weight</span>
</div>
<div class="bmr-calculator-item">
<input type="text" value="80" class="bmr-calculator-input bmrUnitConvertKG" id="bmrWeight">
<span class="bmr-input-label bmrUnitKG">kg</span>
</div>
</div>
<div class="bmr-calculator-item-container" id="bmrHeightContainer">
<label> Height </label>
<div class="bmr-tip">
? <span class="bmr-tiptext">Enter your height</span>
</div>
<div class="bmr-calculator-item">
<input type="text" value="180" class="bmr-calculator-input bmrUnitConvertCM" id="bmrHeight">
<span class="bmr-input-label bmrUnitCM">cm</span>
</div>
</div>
<br>
<div class="bmr-calculator-item-container" id="bmrActivityContainer">
<label> Activity level </label>
<div class="bmr-tip">
? <span class="bmr-tiptext">Activity level that best matches your lifestyle</span>
</div>
<div class="bmr-calculator-item">
<!-- Activity level dropdown -->
<select class="bmr-calculator-input" id="bmrActivity">
<option value="1.2">Sedentary Lifestyle (very little exercise)</option>
<option value="1.375">Lightly Active Lifestyle (exercise 1-3 days/week)</option>
<option value="1.550">Moderately Active Lifestyle (exercise 3-5 days/week)</option>
<option value="1.725">Very Active Lifestyle (exercise 6-7 days/week)</option>
<option value="1.900">Extremely Active Lifestyle (very hard exercise)</option>
</select>
</div>
</div>
<div class="bmr-calculator-item-container" id="bmrFormulaContainer">
<label> Calculation formula </label>
<div class="bmr-tip">
? <span class="bmr-tiptext">Choose which formula to use for calculating BMR</span>
</div>
<div class="bmr-calculator-item">
<!-- Calculation formula dropdown -->
<select class="bmr-calculator-input" id="bmrFormula" onchange="bmrSetFormula()">
<option value="jeor">Mifflin St. Jeor</option>
<option value="benedict">Harris-Benedict</option>
</select>
</div>
</div>
<div class="bmr-calculator-item-container bmr-buttons" id="bmrCalculateButtons">
<!-- Calculate button -->
<div class="bmr-calculator-submit" onclick="bmrCalculatorCalculate()">
Calculate
</div>
<!-- Reset button -->
<div class="bmr-calculator-reset" onclick="bmrCalculatorReset()">
Reset
</div>
</div>
<div class="bmr-calculator-results">
<div class="bmr-calculator-item-container bmrResults">
<div class="bmr-calculator-item bmr-calculator-value" id="bmrResult">
-
</div><label> BMR calories/day</label>
<div class="bmr-tip">
? <span class="bmr-tiptext">Basal Metabolic Rate (BMR)</span>
</div>
</div>`Preformatted text`
</div>
</div>
</form>
<!-- End Calculator Inputs Area -->
<script type="text/javascript" src="js/bmr-calculator.js"></script>
</div>
Is something wrong here?
Thank you