HTML and Javascript Advice

Hi Guys,

I am an absolute beginner with coding and need some help for a calulator I am trying to build.

It is a calorie calulator.

I can get it to work, however I need to add code that changes the function if the bmr calculation is under 1200Calories. I can’t be recommending people be eating less that that without a consultation. If the calculation does equate to be <1200Calories, I need to create a pop-up or message that says “It is not recommended to consumed less than 1200Calories with professional advice. Please contact your local dietitian for more personalised advice”

Can soomeone please guide me?
Thanks in advance.

THIS IS THE HTML

“`
<div class=”wrapper”>
<h2 class=”heading”>Weight Loss Calorie Calculator</h2>

<form>
<div class=”input-group”>
<label for=”gender-input” class=”label”>Gender</label>
<select id=”gender-input” class=”input” value=”female”>
<option value=”female”>Female</option>
<option value=”male”>Male</option>
</select>
<span class=”info”></span>
</div>

<div class=”input-group”>
<label for=”weight-input” class=”label”>Weight</label>
<input id=”weight-input” type=”number” class=”input” min=”0″ placeholder=”kg”>
<span class=”info”></span>
</div>

<div class=”input-group”>
<label for=”height-input” class=”label”>Height</label>
<input id=”height-input” type=”number” class=”input” placeholder=”cm”>
<span class=”info”></span>
</div>

<div class=”input-group”>
<label for=”age-input” class=”label”>Age</label>
<input id=”age-input” type=”number” class=”input” min=”0″ placeholder=”years”>
<span class=”info”></span>
</div>

<div class=”input-group”>
<label for=”ratio-input” class=”label”>Activity ratio</label>
<select id=”ratio-input” class=”input” value=”1.2″>
<option value=”1.2″>Small or no activity</option>
<option value=”1.375″>Moderate activity (1 – 3 trainings per week)</option>
<option value=”1.55″>Average activity (3 – 5 trainings per week)</option>
<option value=”1.725″>High activity (7 trainings per week)</option>
<option value=”1.9″>High activity and manual labour</option>
</select>
<span class=”info”></span>
</div>

<button id=”submit” class=”button”>Submit</button>
</form>

<div id=”output” class=”output hidden”>
<span class=”d-block”>BMR: <span id=”bmr-output”>0</span>kcal</span>

<span class=”formula-info”>Uses Mifflin-St Jeor formula</span>
</div>
“`

THIS IS THE JAVASCRIPT

“`
(() => {
const bmrFormula = (gender, kg, cm, age, ratio) => ~~((((10 * kg) + (6.25 * cm) – (5 * age) + 5) * ratio) + ((gender === ‘female’) ? -161 : 5)) * 0.7 ;

const DOM = {
input: {
gender: document.getElementById(‘gender-input’),
weight: document.getElementById(‘weight-input’),
height: document.getElementById(‘height-input’),
age: document.getElementById(‘age-input’),
ratio: document.getElementById(‘ratio-input’),
},
outputValue: {
bmr: document.getElementById(‘bmr-output’),

},
output: document.getElementById(‘output’),
submit: document.getElementById(‘submit’),
info: document.querySelectorAll(‘.info’)
};

function validateForm () {
const rules = {
gender: {
required: true
},
weight: {
required: true,
minValue: 0
},
height: {
required: true,
minValue: 0
},
age: {
required: true,
minValue: 0
},
ratio: {
required: true,
minValue: 1.2,
maxValue: 1.9
}
};

let isFormValid = true;
let index = 0;
let value;
let valid;
let info;
for (const key in rules) {
valid = true;
info = ”;
value = DOM.input[key].value;

for (const rule in rules[key]) {
if (!valid) {
break;
}

if (rule === ‘required’) {
valid = value.length !== 0 && valid;
if (!valid) {
info = ‘This field is required.’;
}
}

if (rule === ‘minValue’) {
if (!value.length) {
value = 0;
}

valid = parseFloat(value) >= parseFloat(rules[key][rule]) && valid;
if (!valid) {
info = `This value should be greater/equal ${rules[key][rule]}.`;
}
}

if (rule === ‘maxValue’) {
if (!value.length) {
value = 0;
}

valid = parseFloat(value) <= parseFloat(rules[key][rule]) && valid;
if (!valid) {
info = `This value should be less/equal ${rules[key][rule]}.`;
}
}
}

isFormValid = valid && isFormValid;
(!valid) ? DOM.input[key].classList.add(‘invalid’) : DOM.input[key].classList.remove(‘invalid’);
DOM.info[index].textContent = info;

index++;
}

return isFormValid;
}

function getFormData () {
const data = {};
let floatValue;

for (const key in DOM.input) {
floatValue = parseFloat(DOM.input[key].value);
data[key] = (!isNaN(floatValue)) ? floatValue : DOM.input[key].value;
}

return data;
}

function outputData (data) {
for (const key in data) {
DOM.outputValue[key].textContent = data[key];
}
}

function handleSubmit (event) {
event.preventDefault();
const isFormValid = validateForm();
if (isFormValid) {
const formData = getFormData();
console.log(formData);
const bmr = bmrFormula(
formData.gender,
formData.weight,
formData.height,
formData.age,
formData.ratio
)
const output = { bmr }
function setOneNumberDecimal(el) {
el.value = parseFloat(el.value).toFixed(1);
};
;

outputData(output);
DOM.output.classList.remove(‘hidden’);
}
}

DOM.submit.addEventListener(‘click’, handleSubmit);
})();
“`

Also in #HTML _↴