Scribd
Upload
3 views

Source Code

The document contains the source code for a BMI calculator website created by Yash Prabhu in 2023. It includes HTML for structure, CSS for styling, and JavaScript for functionality, allowing users to input their height and weight to calculate their BMI. The website emphasizes the importance of exercise and provides a user-friendly interface with navigation and responsive design.

Uploaded by

rupalisprabhu443
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Source Code

The document contains the source code for a BMI calculator website created by Yash Prabhu in 2023. It includes HTML for structure, CSS for styling, and JavaScript for functionality, allowing users to input their height and weight to calculate their BMI. The website emphasizes the importance of exercise and provides a user-friendly interface with navigation and responsive design.

Uploaded by

rupalisprabhu443
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Hello Users

Thank you for using my website

© BY YASH PRABHU 2023

Here is the source code -:

(READ ONLY DOCUMENT)

HTML - : (79 lines)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nova
Square&display=swap" rel="stylesheet">

<link rel="stylesheet" href="index.css">


<script src="index.js"></script>

<title>BMI Calculator</title>
</head>
<body>
<nav id="navbar">
<a href="#navbar">
<img src = "Gym.jpg" id="logo">
</a>
<ul>
<li><a href="#navbar">Home</a></li>
<li><a href="#page1">About</a></li>
<li><a href="#page4">BMI Calculator</a></li>
<li><a href="./index.html" id="logout">Logout</a></li>
&nbsp;
&nbsp;
</ul>
</nav>
<h1 id="myHeading"></h1>
<p id="greet"> " Hey ! You are on the right place "</p>
<section id = "page1">
<h1 id="Head2">Introduction</h1>
<img src = "gym2.jpg" id="hero">
<p id="intro">
Exercise should be an integral part of our everyday life
to be fit and healthy.This website is designed and conceptualised
to calculate your progress using BMI calculator.
<br>
<br>
" <b>Ideation by Yash Prabhu</b> "
</p>
</section>
<section id ="page4">
<h4>BMI Calculator</h4>
<p id = "BMI-P">Want to calculate your BMI ? Go Ahead !</p>
<hr id="bmi-hr">
<div id="bmi-div">

<form class="form2">
<p>Height (in feet) : </p>
<hr id="bmi-hr2">
<input type="text" maxlength="5" autocomplete="off" id="text1"
placeholder="Enter Height * " name="text 1" value="" required="">
<br>
<br>
<p>Weight (in kg):</p>
<hr id="bmi-hr2">
<input type="text" maxlength="5" autocomplete="off" id="text2"
placeholder="Enter Weight * " name="text 2" value="" required="">
<br>
<br>
<br>
<br>
<button type="submit" id="form2-button" onclick="Calculate()">
Calculate BMI
</button>
</div>
</section>
<br><br><br><br><br><br><br>
<footer>
<hr id="cp">
<br>
<div class="copyright">
&copy; 2023 By Yash Prabhu. All rights reserved.
</div>
</footer>
</body>
</html>

CSS - : (504 lines)

body{
background-color: rgb(21, 20, 20);
text-align: center;
margin-bottom: 100px;
}

html{
scroll-behavior: smooth;
}

::-webkit-scrollbar {
width: 13px;
}

::-webkit-scrollbar-track {
background: #454545;
border-radius: 5px;
}

::-webkit-scrollbar-thumb {
background: #ff7300;
border-radius: 5px;
}

#myHeading{
margin-top: 100px;
font-family: Nova Square;
font-size: 8pc;
color: yellow;
transition: 0.5s;
}

#myHeading:hover{

color: rgb(255, 0, 0);


}
#greet{
margin-top: 100px;
font-family:Lobster;
font-size: 20px;
color: rgb(255, 255, 255);
transition: 0.5s;
margin-bottom: 10.5pc;
}
#greet:hover{
color: yellow;
}
nav {
background-color: #ffffff;
border-radius: 20px;
color: #000000;
font-family: Nova Square;
text-align: right;
transition: 0.3s;
}

#logo{
width: 80px;
height: 60px;
float: left;
border-radius: 90px;
cursor: pointer;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul li {
display: inline-block;
}

nav ul li a {
display: block;
padding: 20px;
text-decoration: none;
color: #000000;
font-size: 20px;
transition: 0.3s;
border-radius: 5px;
}

nav ul li a:hover {
background-color: #ecec29;
}

#page1 {

width: 100%;
height: 115vh;
border-radius: 50px;
background-color: #ffffff;

#Head2{

font-family: Nova Square;


font-size: 3.5pc;
color: #000000;
padding-top: 50px;
}

#hero{
width: 500px;
height: 500px;
float: left;

#intro{
margin-top: 100px;
margin-right: 100px;
text-align: left;
font-size: 30px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-
serif;
}

#page4{

width: 100%;
height: 120vh;
background-color: rgb(21, 20, 20);
}

h4{
font-size: 50px;
color: yellow;
font-family: Nova Square;
padding-top: 30px;
}
#bmi-hr{
width: 70%;
border-width: 4px;
border-radius: 10px;
border-top:none;
border-bottom-color: #ddff00;
}
#bmi-div{
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}

.form2{
padding-top: 30px;
width: 400px;
height: 550px;
background-color: black;
color: #ffffff;
font-family: Nova Square;
border-radius: 10px;
transition: 0.5s;
}

.form2:hover{
background-color: rgb(12, 12, 12);
border-radius: 25px;
}

.form2 input{
margin-top: 30px;
padding:20px;
border-radius: 5px;
width: 250px;
outline: none;
border: none;
background-color: #e5e3e3;
transition: 0.5s;
}

.form2 input:hover{
border-radius: 10px;
background-color: #ffffff;
}

.form2 input::placeholder{
color: #000000;
font-family: Nova Square;
}

.form2 p{
font-size: 23px;
}

#bmi-hr2{
width: 50%;
border-radius: 5px;
border-top: none;
border-bottom-color:#eaff00 ;
border-width: 2px;
margin-top: 40px;
}

#form2-button{
padding: 20px;
color: #000000;
font-family: Nova Square;
width: 285px;
border: none;
border-radius: 5px;
background-color: #d9ff00;
cursor: pointer;
transition: 0.4s;
}

#form2-button:hover{
border-radius: 10px;
background-color: #ffaa00;
}

#BMI-P{
font-family: Lobster;
color: rgb(255, 179, 0);
font-size: 18px;
}

#cp{
width: 50%;
border-width: 2px;
border-radius: 10px;
border-top:none;
border-bottom-color: rgb(107, 100, 100);
}
.copyright{
font-family: Nova Square;
color: rgb(107, 100, 100);
font-size: 18px;
}
@media only screen and (max-width: 1000px) {

#myHeading{
margin-top: 100px;
margin-left: 0;
display: flex;
justify-content: center;
font-family: Nova Square;
font-size: 6pc;
color: yellow;
transition: 0.5s;
}
nav {
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
color: #000000;
font-family: Nova Square;
text-align: center;
transition: 0.3s;
margin-left: 0;
}

#logo{
display: none;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul li {
display: inline-block;
}

nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #000000;
font-size: 20px;
transition: 0.3s;
border-radius: 5px;
}

nav ul li #logout{
display: none;
}

#greet{
margin-top: 100px;
margin-left: 0;
display: flex;
justify-content: center;
font-family:Lobster;
font-size: 20px;
color: rgb(255, 255, 255);
transition: 0.5s;
margin-bottom: 10.5pc;
}

#page1 {

width: 100%;
height: auto;
background-color: #ffffff;

#Head2{

font-family: Nova Square;


font-size: 3.5pc;
color: #000000;
padding-top: 50px;
}

#hero{
width: 100%;
height: auto;
float: left;
}

#intro{
margin-top: 0;
margin-left: 100px;
padding-bottom: 5%;
text-align: center;
font-size: 25px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#page4{
height: auto;
width: 100%;
}

h4{
font-size: 25px;
color: yellow;
font-family: Nova Square;
padding-top: 30px;
}
.form2{
padding-top: 30px;
width: 500px;
height: 580px;
margin-left:0;
background-color: black;
color: #ffffff;
font-family: Nova Square;
border-radius: 10px;
transition: 0.5s;
}

.form2 input::placeholder{
color: #000000;
font-family: Nova Square;
font-size: 20px;
}

#form2-button{
padding: 20px;
color: #000000;
font-family: Nova Square;
width: 285px;
font-size: 20px;
border: none;
border-radius: 5px;
background-color: #d9ff00;
cursor: pointer;
transition: 0.4s;
}

}
@media only screen and (max-width: 500px) {

#myHeading{
margin-top: 100px;
margin-left: 12%;
display: flex;
justify-content: flex-start;
font-family: Nova Square;
font-size: 5pc;
color: yellow;
transition: 0.5s;
}
nav {
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
color: #000000;
font-family: Nova Square;
text-align: center;
transition: 0.3s;
margin-left: 0;
}

#logo{
display: none;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul li {
display: inline-block;
}

nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #000000;
font-size: 10px;
transition: 0.3s;
border-radius: 5px;
}

nav ul li #logout{
display: none;
}

#greet{
margin-top: 100px;
margin-left: 15%;
display: flex;
justify-content: flex-start;
font-family:Lobster;
font-size: 20px;
color: rgb(255, 255, 255);
transition: 0.5s;
margin-bottom: 10.5pc;
}

#page1 {

width: 100%;
height: auto;
background-color: #ffffff;

#Head2{

font-family: Nova Square;


font-size: 3.5pc;
color: #000000;
padding-top: 50px;
}

#myHeading{
text-align: center;
margin-left: 10%;
}
#hero{
width: 100%;
height: 45%;
float: left;
}

#intro{
margin-top: 0;
margin-left: 100px;
padding-bottom: 20px;
text-align: left;
font-size: 17px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#page4{
height: auto;
width: 100%;
}

h4{
font-size: 25px;
color: yellow;
font-family: Nova Square;
padding-top: 30px;
}
.form2{
padding-top: 30px;
width: 330px;
height: 550px;
margin-left:0;
background-color: black;
color: #ffffff;
font-family: Nova Square;
border-radius: 10px;
transition: 0.5s;
}

JS - : (45 lines)

document.addEventListener('DOMContentLoaded', function() {
const userName = prompt("Enter your name please:");
const h1 = document.getElementById('myHeading');

h1.textContent = `Hi ${userName.toUpperCase()}`;


});

function Calculate(){

// Creating variables height and weight


let heightFeet = document.getElementById("text1").value;
let weight = document.getElementById("text2").value;

if (weight === '' || heightFeet === ''){


alert("Enter Weight and Height");
} else if (weight <= 0 || heightFeet <= 0){
alert("Error occured (Wrong weight or height entered)");
} else {
// Convert height from feet to centimeters
let heightCm = heightFeet * 30.48;
heightCm = Number(heightCm);
weight = Number(weight);

let BMI = (weight / ((heightCm**2) / 10000)).toFixed(2);

alert("Your BMI is " + BMI);

if (BMI < 18.5){


alert("You are Underweight");
}
if (BMI >= 18.5 && BMI < 25){
alert("You are healthy");
}
if (BMI >= 25 && BMI < 30 ){
alert("You are overweighted");
}
if (BMI >= 30 ){
alert("You are obese");
}
}
}

You might also like