i need a index.html page scrip.js page and styles.css page this needs to inclide working BMI caculator, working metabolic rate, working calories burnt, and working macros tracker below are the codes i need basically working on one page

the codes below bsaically are all needed to be pit into one functional and working code and page i also need a working macros portion please. also please the CSS page is a exsample plesse make it look cohesive

calorie

BMR code

calorie css and example for all

BMI code exsmple

pFil1 out the form below. /p >

Male

pgepb p> Height- In Inches (1 Weight (in pourids) cl p id="totalCals" /ppkcal per day p function calsperDay() \{ var age=document.getElementById("age") .value; var height=document.getElementById ("height") , value; var weight=document.getElementById ("weight") value; var female=document. getElementsByName ("female"), value; var male=document.getElementsByName ("male"). value; if (document.getElementsByName ("male").checked) \{ varmaleCals=malet(13.75weight/2.2)+(5.0(height*2.54)(6.75age); document.getElementById("totalCals"). innerHTML = maleCals; \} else (document.getElementsByName ("female").checked) \{ var femaleCals = female +(9.56 * weight/2.2) + (1.84 * (height =2.54) - (4.67 x age) document.getElementById("totalcals"). InnerHTML = femaleCals; j out the form below. d= "age" type="number" oninput="calsPerDay" p Age /pbr d=" height" type="number" oninput" "calsPerDay" p Height- In Inches (12 inches=1 foot) /p > otalCals" /ppkcal per day /p Day () \{ ElementById("age"). value; getElementById("height"), value; getElementById("weight").value; getElementsByName ("female").value; tElementsByName ("male"). value; entsByName ("male"), checked) \{ alet (13.75 weight/2.2) +(5.0 (height * 2.54) - (6.75 age) ; ElementById("totalCals"). innerHTML = maleCals; ElementsByName("female"). checked) \{ female + (9.56 * weight/2.2) + (1.84 * (height * 2.54) - (4.67 x age); ElementById("totalCals"). innerHTML = femaleCals; h1 Fill out the form below. /h1 Female: Male: Age: years Height: in inches (12 inches=1 foot) Weight: in pounds Base metabolic rate: kcal per day label \{ display: block; box-shadow: 0.1em0.1em0.2em#888; margin: 1em; border-radius: 1ex; padding: 1ex 1em; \} input [type=number] \{ text-align: right; border: none; \} input \{ float: right; \} span \{ font-weight: bold; \} And finally clean up the Javascript:- function calsPerDay() \{ function find(id) \{ return document.getElementById(id) \} var age = find ("age").value var height = find ("height").value =2.54 var weight = find ("weight"). value / 2.2 var result =0 if (find("male"). checked) result =66.47+(13.75 weight )+(5.0 height (6.75 age )) else if (find("female"). checked) result =665.09+(9.56 weight )+(1.84 height (4.67 age )) find("totalCals"). innerHTML = Math.round( result) \} calsPerDay () import java.util.scanner; public class BMR2 \{ public static void main(String[] args) t Scanner kybd = new Scanner(5ystem.in); System.out.print("Enter Height: "); double Height = kybd. nextDouble (); System.out.print("Enter Weight: "); Double Weight =kybd nextDouble (); 5ystem.out.print("Enter Age: "); int Age =kybd nextInt () ; double FemaleBMr =655+4.3 Weight +4.7 Height 6.8 Age; double MaleB /R=66+(6.3 Weight )+(12.9 Height )(6.8 Age ); Int choc=230; System.out.println ("Are you Sedentary, Somewhat_Active, Active, or Very_Active?: "); boolean Sedentary = kybd . nextBoolean (); boolean Someuhat Active = kybd.nextBoolean(); boolean Active = kybd.nextBoolean (); boolean Very.Active = kybd. nextBoolean (); if (Sedentary) System.out.print("Enter Weight: "); Double Weight = kybd. nextDouble (); System.out.print("Enter Age: "); int Age =kybd. nextInt () ; double FemaleBMR =655+4.3 Weight +4.7 Height 6.8 Age; double MaleBMR =66+(6.3 Weight )+(12.9 Height )(6.8 Age ); int choc =230; System.out.printin("Are you Sedentary, Somewhat_Active, Active, or Very_Active?: "); boolean Sedentary = kybd. nextBoolean (); boolean Somewhat_Active =kybd. nextBoolean(); boolean Active = kybd . nextBoolean (); boolean Very_Active = kybd. nextBoolean (); if (Sedentary) System.out.println("chocolate bars for female: "+ FemaleBMR"1.2/choc); else if (Somewhat_Active) System.out.println("chocolate bars for female: "+ FemaleBMR"1.3/choc); else if (Active) System.out.println("chocolate bars for female: "+FemaleBMR"1.4/choc); else if (Very_Active) System.out.println("chocolate bars for female: "+FemaleBMR*1.5/choc); \} \} I======== Variables: Background Colors =========/ \$part1-BC: \#96858F; /* Dusty */ \$part2-BC: \#6D7993; /* Lavendor */ \$part3-BC: \#9099A2; /* Overcast */ \$partHeaderFooter-BC: \#D5D5D5; /* Paper */ \$parts-C: \#FFF; /* white */ \$partHeaderFooter-C: \#000; /* black */ \#header, \#footerf hackground-colnr: \$nartHeaderFooter-BC: background-color: \$partHeaderFooter-BC; color: \$partHeaderFooter-C; \} - part1 1 background-color: \$part1-BC; color: \$parts-c; \} - part2 1 background-color: \$part2-BC; color: \$parts-C; \} - part3 \{ background-color: \$part3-BC; color: \$parts-C; color: sparts-c; \} body p\{ margin-left: 20%; margin-right: 20%; \} \} - paddingTopBottom6epx\{ padding-top: 60px; padding-bottom: 60px; \} " *header position: fixed; width: 100%; z-index: 2; \} 51 52+1 =mmo Place the title and the main-menu ======= / 53 , \#title\{ text-align: left; padding-left: 20px; z-index:2; \} - Hmain-menu\{ text-align: right; padding-right: 2epx; padding-top: epx; z-index: 2; ulf list-style-type: none; /* to make the bullets disappear */ \} 11 i float: right; a \{ display: block; color: \$partHeaderFooter-C; text-decoration: none; padding: 15px; \} \} Cmedia (min-width: 87epx) \{ /* this rule apply for screens 870px and bigger */ margin-top: 40px; \} \} , /* hover animation for main-menu*/ (\#targetMainMenu1:hover\{ background-color: \$part1-BC; display:inline; padding-top: 15px; padding-bottom: 15px; \} \#targetMainMenu2:hoverf background-color: \$part2-BC; display:inline; padding-top: 15px; padding-bottom: 15px; displaysinlines padding-top: 15px; padding-bottom: 15px; \} Is making the first part - BMR responsive * so as not to crush in the sticky header */ BNR padding-top: 60px; margin-top: 245px; Cmedia (min-width: 333px) \{ margin-top: 205px; \} Cmedia (min-width: 380px) \{ margin-top: 150px; \} Gedia (nin-width: 530px) f margin-top: 110px; \} Gedia (min-width: 87epx) f margin-top: 78px; \} \} inputf \} \} - paddingTop3columnsForCol-xs-4 \{ padding-top: 30px; Qmedia (min-width: 760px) \{ padding-top: 50px; \} Gmedia (min-width: 930px)\} padding-top: 8epx; \} Cmedia (min-width: 1100px)f padding-top: 90px; \} \} - paddingBotton4epxt padding-bottom: 46px; \} /* entire container, keeps perspective */ .flip-container } perspective: 1000px; \}. 1* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container hover .flipper \{ transform: rotateV(180deg); \} .flip-container, front, .back f CSS (SCSS) .flip-container:hover .flipper, .flip-container hover .flipper \{ transform: rotateY(180deg); \} .flip-container, .front, .back \{ width: auto; /* was 320px */ height: auto; /*was 480px */ \} /* flip speed goes here */ .flipper \{ transition: 0.6s; transform-style: preserve-3d; position: relative; \} ./* hide back of pane during swap */ . front, .back \{ backface-visibility: hidden; position: absolute; top: ; left: ; \} . /* front pane, placed above back */ -. front } z-index: 2; /* for firefox 31 */ transform: rotater(deg); Gedia(min-width: 1000px)\} padding-left: 20%; \} \} z-index: 2; 1* for firefox 31 */ transform: rotateY(Odeg); Comedia(min-width: 1000px)\{ padding-left: 26%; \} /* back, initially hidden pane */ . back \{ transform: rotateY(180deg); \} .backSide30pxDown\{ padding-top: 30px; \} /* hover animation for footer */ \#footer\{ a:link \{ color: \$partHeaderFooter-C; \} a:visited color: \$part1-BC; \} a:hover\{ color: \$part2-BC; \} \} Less than 18.5 Underweight 18.5 to 25 Normal 25-30 Overweight Nore than 38 obese sheads Body Mass Index Calculator Enter your height: metres =" inches" > inches /p Enter your weight: ="kg " selected =" selected ">kilograms pounds Your BMI is