Greetings from Coding Sinine Tech! Are you prepared to deive into the world of JavaScript, CSS, and HTML? We will walk you through the steps of creating a fully functional expense tracker app in this tutorial. In addition to gaining useful coding skills, you'll also get a cool tool to use in your daily life. Regardless of your level of programming experience, this project will engage and challenge you. then let's get going!
HTML CODE
HTML Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Body Mass Index Calculator using JavaScript - @alis.code x Sininetech.com</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>Further HTML CODE
<h1 style ="display : none">BMI Calculator with chart : Being Healthy</h1>
<h2 style ="display : none">BMI Calculator with chart : Being Healthy</h2>
<h3 style="color: red;"><b style="color: black;">B</b>ody <b style="color: black;">
M</b>ass <b style="color: black;">I</b>ndex <b style="color: black;">C</b>alculator</h3>
<form class="form" id="form" onsubmit="return validateForm()"
style="height: auto;max-width: min-content;">
<div class="row-one" style="width: max-content;">
<input type="text" class="text-input" id="age" autocomplete="off" required/>
<p class="text">Age</p>
<label class="container">
<input type="radio" name="radio" id="f"><p class="text">Female</p>
<span class="checkmark"></span>
</label>
<label class="container">
<input type="radio" name="radio" id="m"><p class="text">Male</p>
<span class="checkmark"></span>
</label>
</div>
<div class="row-two">
<input type="text" class="text-input" id="height" autocomplete="off" required>
<p class="text">Height (cm)</p> <br/><br/>
<input type="text" class="text-input" id="weight" autocomplete="off" required>
<p class="text">Weight (kg)</p>
</div>
<button type="button" id="submit">Submit</button><br/>
</form>
CSS CODE
Add the Following CSS Code to style.css File
* {
font-family: Quicksand;
font-size: 16px;
color: #333;
}
body {
margin: 0;
height: 100vh;
padding: 0;
border: 0;
background: linear-gradient(to bottom right, #00FFFF, #22FF91);
}
.form {
background-color: #fff;
height: 240px;
width: 450px;
border-radius: 20px;
margin: 20px auto 20px auto;
display: block;
border: solid 1px #289df6;
box-shadow: 0 0 40px 0 #ddd;
}
.form:hover {
box-shadow: 0 0 60px 0 #ccc;
transition: .4s;
transform: scale(1.02);
}
.row-one {
padding: 20px;
}
.row-two {
padding: 20px;
}
.text-input {
width: 60px;
height: 30px;
border-radius: 10px;
background-color: #dbeffe;
border: none;
outline: none;
padding: 5px 10px;
cursor: pointer;
}
.text-input:last-child {
margin-bottom: 35px;
}
.text-input:hover {
background-color: #cbe7fd;
}
#submit {
border: none;
border-radius: 10px;
height: 40px;
width: 140px;
background-color: #289df6;
color: #fff;
margin: auto;
disp lay: block;
outline: none;
cursor: pointer;
}
#submit:hover{
background-color: #0a8ef2;
}
.text {
display: inline-block;
margin: 5px 20px 5px 8px;;
}
.row-one {
padding: 30px 20px 15px 20px;
}
.row-two {
padding: 15px 20px 30px 20px;
}
.container {
display: inline-block;
position: relative;
padding-left: 30px;
cursor: pointer;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #dbeffe;
border-radius: 50%;
}
.container:hover input ~ .checkmark {
background-color: #cbe7fd;
}
.container input:checked ~ .checkmark {
background-color: #289df6;
}
h1 {
font-size: 30px;
font-weight: 300;
text-align: center;
color: red;
padding-top: 15px;
display: block;
}
h2 {
color : black;
font-size: 22px;
font-weight: 300;
text-align: center;
}
h3 {
font-size: 24px;
font-weight: 300;
text-align: center;
padding: 15px;
}
h3 b {
font-size: 32px;
font-weight: 300;
color: #289df6;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
JavaScript Code
Now Add the JavaScript Code to Make it Functional
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-160708950-5');
var age = document.getElementById("age");
var height = document.getElementById("height");
var weight = document.getElementById("weight");
var male = document.getElementById("m");
var female = document.getElementById("f");
var form = document.getElementById("form");
function validateForm(){
if(age.value=='' || height.value=='' || weight.value=='' ||
(male.checked==false && female.checked==false)){
alert("All fields are required!");
document.getElementById("submit").removeEventListener("click", countBmi);
}else{
countBmi();
}
}
document.getElementById("submit").addEventListener("click", validateForm);
function countBmi(){
var p = [age.value, height.value, weight.value];
if(male.checked){
p.push("male");
}else if(female.checked){
p.push("female");
}
form.reset();
var bmi = Number(p[2])/(Number(p[1])/100*Number(p[1])/100);
var result = '';
if(bmi<18.5){
result = 'Underweight';
}else if(18.5<=bmi&&bmi<=24.9){
result = 'Healthy';
}else if(25<=bmi&&bmi<=29.9){
result = 'Overweight';
}else if(30<=bmi&&bmi<=34.9){
result = 'Obese';
}else if(35<=bmi){
result = 'Extremely obese';
}
var h1 = document.createElement("h1");
var h2 = document.createElement("h2");
var t = document.createTextNode(result);
var b = document.createTextNode('BMI: ');
var r = document.createTextNode(parseFloat(bmi).toFixed(2));
h1.appendChild(t);
h2.appendChild(b);
h2.appendChild(r);
document.body.appendChild(h1);
document.body.appendChild(h2);
document.getElementById("submit").removeEventListener("click", countBmi);
document.getElementById("submit").removeEventListener("click", validateForm);
}
document.getElementById("submit").addEventListener("click", countBmi);
Written by: Sinine Tech | Ali Sufian
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖
Tags:
Javascript Project