Comment créer un calculateur d’IMC simple en JavaScript – Brilliansolution.com.
Comment créer un calculateur d’IMC simple en JavaScript
Dans ce tutoriel, nous allons créer un Comment créer un calculateur d’IMC simple en JavaScript. Ce tutoriel a pour but de vous aider à créer un simple calculateur d’IMC. Cela couvrira toutes les fonctionnalités importantes qui afficheront votre résultat récapitulatif de l’IMC. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.
Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé avec n’importe quel système ou application si vous souhaitez ajouter un calculateur d’IMC fonctionnel. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Calculateur d’IMC. Faisons donc le codage.
Voici le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.
Création de l’interface
C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que la liste html des boutons de soumission des formulaires. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.
<html lang="en"><head><meta charset="UTF-8" name="viewport" content="width=device-width, iniitial-scale=1"/><link rel="stylesheet" type="text/css" href=" />head><body><nav class="navbar navbar-default"><div class="container-fluid"><a href=" class="navbar-brand">Sourcecodestera>div>nav><div class="col-md-3">div><div class="col-md-6 well"><h3 class="text-primary">How to Create a Simple BMI Calculatorh3><hr style="border-top:1px dotted #ccc;" /><div class="col-md-6" style="border:1px SOLID #000; padding:2rem;"><form><div class="form-inline"><label>Weight(kg):label><input type="text" class="form-control" id="weight" size="10" >div><div class="form-inline"><label>Height(cm):label><input type="text" class="form-control" id="height" size="10">div><br /><button class="btn btn-primary" type="button" onClick="calculateBmi()">Calculatebutton>form>div><div class="col-md-2">div><div class="col-md-4" style="border:1px SOLID #000; padding:2rem;"><div class="form-group"><label>BMI:label><input class="form-control" type="text" id="bmi" size="10" readonly="readonly"/>div><br /><div class="form-group"><label>Result:label><input class="form-control" type="text" id="result" size="25" readonly="readonly"/>div><br /><button class="btn btn-success" type="reset">Resetbutton>div>div><script src="https://brilliansolution.com/how-to-create-a-simple-bmi-calculator-in-javascript/script.js">script>body>html>Création d’une fonction JavaScript
C’est là que se trouve la fonction principale de l’application. Ce code calculera automatiquement et vous donnera le résultat de votre IMC lorsque vous cliquerez sur le bouton Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.
function calculateBmi()var weight = document.getElementById('weight').value;var height = document.getElementById('height').value;if(weight >0&& height >0)var bmi = weight/(height/100*height/100) document.getElementById('bmi').value= bmi;if(bmi <18.5) document.getElementById('result').value="You are too thin.";if(bmi >18.5&& bmi <24.9) document.getElementById('result').value="You are healthy.";if(bmi >25) document.getElementById('result').value="You are overweight.";else alert("Please enter something first!")Dans le code fourni, nous venons de créer une seule méthode appelée calculateBmi (), cette fonction calculera votre résultat bmi après avoir fourni votre mesure physique. Le code utilise une formule simple pour calculer votre IMC en donnant votre taille et votre poids.
Sortir:
Le Comment créer un calculateur d’IMC simple en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.
Voilà, nous avons créé avec succès Comment créer un calculateur d’IMC simple en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !
(Visité 1 fois, 1 visites aujourd’hui)
Cet article a été mis à jour 2023-06-15 16:30:25
