Cześć,
Tworzę swój pierwszy projekt: kalkulator kcal. Inspiruję się kodem, który znalazłam w Internecie. Wstawiam go poniżej jak i plik .js. Wybrałam taki sposób bo myślałam, że podstawię swoje dane i będzie wszystko śmigać - niestety nie śmiga. Więc przeanalizowałam cały kod i rozumiem to i jak ma wyglądać, jednak mam problem z JS bo tam już nie wszystkie funkcję pojmuję.
Problem jest taki, że nie wyświetla mi się wynik, po kliknięciu przycisku "Oblicz".
Jestem osobą początkującą w JavaScript, jednak jest to mój ambitny projekt i chciałabym go dobrze zrealizować. Jeżeli ktoś jest mi w stanie wytłumaczyć co jest tutaj nie tak, będę BARDZO wdzięczna :)
Dodatkowo jeżeli podałam za mało informacji to dajcie znać
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title> Licznik kalorii Z kości na krągłości</title>
<meta name="description" content="Strona na której możesz obliczyć swoje dzienne zapotrzebowanie kaloryczne. Sprawdź ile kalorii potrzebujesz aby schudnąć, zobacz ile kalorii jest Ci potrzebne do przytycia. Oblicz ile kalorii dziennie potrzebujesz aby Twój organizm dobrze funkcjonował."/>
<meta name="keywords" content="waga, siłownia, trening, kalorie, kcal, kilokalorie, energia, białko, białka, protein, węglowodany, carb, carbs, tłuszcz, tłuszcze, fat, fats, weight, check, see, how, calculator, kalkulator, sprawdź, zobacz, ile, oblicz, use, użyj"/>
<meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="funkcje.js"></script>
</head>
<body >
<div class="calc-outer-wrap">
<div id="form-error" style="display:none;"></div>
<form class="calc-form" id="calc-form">
<div class="form-fields">
<div class="field-outer">
<label for="distance" class="top-label">Podaj wiek:</label>
<div class="field-items">
<div class="field field-large">
<input type="text" name="age" id="age" inputmode="numeric" pattern="[0-9]*">
</div><!--/.field-large-->
<div class="field field-medium">
<select name="gender">
<option value="Female">Female</option>
<option value="Male">Male</option>
</select>
</div><!--/field-medium-->
</div><!-- /.field-items-->
</div><!--field-outer1-->
<div class="field-outer">
<label for="height" class="top-label">Height:</label>
<div class="field-items">
<div class="field">
<input type="text" name="height_ft" id="height-ft" inputmode="numeric" pattern="[0-9]*">
<label for="height-ft">feet</label>
</div><!--/.field-->
<div class="field">
<input type="text" name="height_in" id="height-in" inputmode="numeric" pattern="[0-9]*">
<label for="height-in">inches</label>
</div><!--/.field-->
<div class="field">
<input type="text" name="height_cm" id="height-cm" inputmode="numeric" pattern="[0-9]*">
<label for="height-cm">or centimeters</label>
</div><!--/.field-->
</div><!--/.field-items-->
</div><!--/.field-outer2-->
<div class="field-outer">
<label for="weight" class="top-label">Your weight:</label>
<div class="field-items">
<div class="field field-large">
<input type="text" name="weight" id="weight" inputmode="numeric" pattern="[0-9]*">
</div><!--/.field-large-->
<div class="field field-small">
<select name="weight-unit">
<option value="lb">lb</option>
<option value="kg">kg</option>
</select>
</div><!--/.field-small-->
</div><!--/.field-items-->
</div><!--/.field-outer3-->
<div class="btn-wrap field-outer">
<button class="form-submit">Calculate</button>
</div>
</div><!--/.form-fields-->
</form>
<div id="results" style="display:none;"></div>
</div><!--/.calc-outer-wrap-->
</body>
</html>
JAVASCRIPT:
(function() {
const form = document.getElementById('calc-form');
const results = document.getElementById('results');
const errors = document.getElementById('form-error');
/**
* Display a form validation error
*
* @param {String} msg The validation message
* @return {Boolen} Returns false
*/
function errorMessage(msg) {
errors.innerHTML = msg;
errors.style.display = '';
return false;
}
/**
* Display the calculation results
*
* @param {Integer} calories The calories burned
* @param {Integer} distance The distance run
* @param {String} unit The distance unit (miles or kilometers)
* @param {Integer} burnRate The calories per distance burn rate
* @param {Integer} calsPerHr The calories burned per hour
*/
function showResults(calories) {
results.innerHTML = `<p>Your basal metabolic rate (BMR) is: <strong>${(calories).toFixed(2)} </strong> calories a day.</p><a href="#" id="rs">revise</a>`;
results.style.display = ''
form.style.display = 'none'
errors.style.display = 'none'
}
/**
* Hide the results and reset the form
*/
function resetForm(e) {
if(e.target.id = 'rs') {
e.preventDefault();
results.style.display = 'none';
form.style.display = '';
form.reset()
}
}
/**
* Handle form submit
*/
function submitHandler(e)
{
e.preventDefault();
// Age
let age = parseFloat(form.age.value);
//let unit = form.distance_unit.value;
if(isNaN(age) || age < 0) {
return errorMessage('Please enter a valid age');
}
// Height
let heightCM = parseFloat(form.height_cm.value);
if(isNaN(heightCM) || heightCM < 0) {
let heightFeet = parseFloat(form.height_ft.value);
if(isNaN(heightFeet) || heightFeet < 0) {
return errorMessage('Please enter a valid Height in feet or centimeters');
}
let heightInches = parseFloat(form.height_in.value);
if(isNaN(heightInches) || heightInches < 0) {
heightInches=0;
}
heightCM = (2.54 * heightInches) + (30.4 * heightFeet)
}
let weight = parseFloat(form.weight.value);
if(isNaN(weight) || weight < 0) {
return errorMessage('Please enter a valid weight');
}
if(form.weight_unit.value == 'lb') {
weight = 0.453592 * weight;
}
let calories = 0;
if(form.gender.value == 'Female') {
//females = 655.09 + 9.56 x (Weight in kg) + 1.84 x (Height in cm) - 4.67 x age
calories = 655.09 + (9.56 * weight) + (1.84 * heightCM) - (4.67 * age);
} else {
calories = 66.47 + (13.75 * weight) + (5 * heightCM) - (6.75 * age);
}
// Display results
showResults(calories);
}
// Add Event Listeners
form.addEventListener('submit', submitHandler);
results.addEventListener('click', resetForm, true);
})();
