{"id":9119,"date":"2024-01-19T17:59:00","date_gmt":"2024-01-19T17:59:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9119"},"modified":"2024-01-22T15:59:36","modified_gmt":"2024-01-22T10:59:36","slug":"calorie-calculator-source-code","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/","title":{"rendered":"Calorie Calculator Source Code"},"content":{"rendered":"

This HTML, CSS, and JavaScript source code helps you to create a Calorie Calculator on your website. It helps determine your daily caloric needs based on your age, gender, height, and weight. Simply input your details and hit “Calculate” to obtain your basal metabolic rate (BMR).<\/p>\n

It enables seamless input and output, making it a valuable tool for those looking to manage their calorie intake and maintain a healthy lifestyle.<\/p>\n

You can use this code on your website or app to offer users a convenient way to calculate their daily calorie needs. It helps users manage their diet and fitness goals.<\/p>\n

How to Integrate Calorie Calculator Source Code to Your Website<\/h2>\n

1. Open your website’s HTML file where you want to add the calorie calculator. Inside the <body><\/code> tag, copy and paste the HTML code from the index.html<\/code> file. Customize the HTML elements, labels, and placeholders to match your website’s design and branding.<\/p>\n

<div class=\"calc-outer-wrap\">\r\n<div id=\"form-error\" style=\"display:none;\"><\/div>\r\n<form class=\"calc-form\" id=\"calc-form\">\r\n  <div class=\"form-fields\">\r\n\r\n    <div class=\"field-outer\">\r\n      <label for=\"distance\" class=\"top-label\">Age:<\/label>\r\n      <div class=\"field-items\">\r\n        <div class=\"field field-large\">         \r\n          <input type=\"text\" name=\"age\" id=\"age\" inputmode=\"numeric\" pattern=\"[0-9]*\">\r\n        <\/div><!--  \/.field-large -->\r\n        \r\n        <div class=\"field field-medium\">\r\n          <select name=\"gender\">\r\n            <option value=\"Female\">Female<\/option>\r\n            <option value=\"Male\">Male<\/option>\r\n                   \r\n          <\/select>\r\n          \r\n        <\/div><!--  \/.field-small -->\r\n      <\/div><!--  \/.field-items -->\r\n    <\/div><!--  \/.field-outer -->\r\n\r\n    <div class=\"field-outer\">\r\n      <label for=\"height\" class=\"top-label\">Height:<\/label>\r\n      <div class=\"field-items\">\r\n        <div class=\"field\">\r\n          <input type=\"text\" name=\"height_ft\" id=\"height-ft\" inputmode=\"numeric\" pattern=\"[0-9]*\">\r\n          <label for=\"height-ft\">feet<\/label>\r\n        <\/div><!--  \/.field -->\r\n        <div class=\"field\">\r\n          <input type=\"text\" name=\"height_in\" id=\"height-in\" inputmode=\"numeric\" pattern=\"[0-9]*\">\r\n          <label for=\"height-in\">inches<\/label>\r\n        <\/div><!--  \/.field -->\r\n       <div class=\"field\">\r\n          <input type=\"text\" name=\"height_cm\" id=\"height-cm\" inputmode=\"numeric\" pattern=\"[0-9]*\">\r\n          <label for=\"height-cm\">or centimeters<\/label>\r\n        <\/div><!--  \/.field -->        \r\n      <\/div><!--  \/.field-items -->\r\n    <\/div><!--  \/.field-outer -->\r\n\r\n    <div class=\"field-outer\">\r\n      <label for=\"weight\" class=\"top-label\">Your weight:<\/label>\r\n      <div class=\"field-items\">\r\n        <div class=\"field field-large\">\r\n          <input type=\"text\" name=\"weight\" id=\"weight\" inputmode=\"numeric\" pattern=\"[0-9]*\">\r\n        <\/div><!--  \/.field-large -->\r\n        <div class=\"field field-small\">\r\n          <select name=\"weight_unit\">\r\n            <option value=\"lb\">lb<\/option>\r\n            <option value=\"kg\">kg<\/option>\r\n          <\/select>\r\n        <\/div><!--  \/.field-small -->\r\n      <\/div><!--  \/.field-items -->\r\n    <\/div><!--  \/.field-outer -->\r\n   <div class=\"btn-wrap field-outer\">\r\n    <button class=\"form-submit\">Calculate<\/button>\r\n  <\/div>\r\n  <\/div><!--  \/.form fields -->\r\n\r\n\r\n<\/form>\r\n<div id=\"results\" style=\"display:none;\"><\/div>\r\n<\/div><!--  \/.calc-outer-wrap --><\/pre>\n
2. Now, copy the following CSS code. In your web page’s <head><\/code> section, paste the copied CSS code within <style><\/code> tags. You can also create a separate CSS file and link it to your website.<\/p>\n
* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nhtml, body {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.calc-outer-wrap {\r\n  margin: 0 auto;\r\n  background: #f3f3f3;\r\n  padding: 0.625rem;\r\n  font-size: 1rem;\r\n  line-height: 1.3;\r\n  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\r\n}\r\n\r\n.form-fields {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: space-between;\r\n  align-items: top;\r\n}\r\n\r\n.field-outer {\r\n  width: 48%;\r\n}\r\n\r\nlabel,\r\ninput,\r\nselect {\r\n  font-size: 1rem;\r\n  line-height: 1.3;\r\n  display: block;\r\n}\r\n\r\ninput,\r\nselect {\r\n  height: 1.75rem;\r\n  border: 1px solid #bbb;\r\n  width: 100%;\r\n  background: #fff;\r\n  padding: 0 0.325rem;\r\n  border-radius: 0.1875rem;\r\n  transition: box-shadow 200ms ease-in-out;\r\n  box-shadow: inset 0 0 0 0 #59e7ed;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n}\r\ninput:focus,\r\nselect:focus {\r\n  outline: 0;\r\n  box-shadow: inset 0 -3px 0 -1px #59e7ed;\r\n  border-radius: 0.1875rem 0.1875rem 1px 1px;\r\n}\r\n\r\nselect {\r\n  background: #fff url(\"data:image\/svg+xml;charset=UTF-8,%3csvg width='8px' height='14px' viewBox='0 0 8 17' xmlns='http:\/\/www.w3.org\/2000\/svg' fill='%238A8A8A'%3e%3cpolygon fill='%238A8A8A' points='4 17 0 10 8 10'%3e%3c\/polygon%3e%3cpolygon fill='%238A8A8A' points='4 0 0 7 8 7'%3e%3c\/polygon%3e%3c\/svg%3e\") 94% center no-repeat;\r\n}\r\nselect:-moz-focusring {\r\n  color: transparent;\r\n  text-shadow: 0 0 0 #000;\r\n}\r\nselect::-ms-expand {\r\n  display: none;\r\n}\r\n\r\n.field-items {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n.field-items label {\r\n  font-size: 0.75rem;\r\n  color: #999;\r\n}\r\n\r\n.field {\r\n  display: inline-block;\r\n  width: 32%;\r\n}\r\n.field + .field {\r\n  margin-left: 3px;\r\n}\r\n\r\n.field-large {\r\n  flex: 1;\r\n  width: 67%;\r\n}\r\n\r\n.field-small {\r\n  width: 3em;\r\n}\r\n\r\n.top-label {\r\n  font-weight: bold;\r\n  font-size: 0.875rem;\r\n  line-height: 1.4;\r\n  display: block;\r\n}\r\n\r\n.btn-wrap {\r\n  align-self: flex-end;\r\n}\r\n\r\n.form-submit {\r\n  background: #59e7ed;\r\n  display: block;\r\n  border: 0;\r\n  width: 100%;\r\n  font-size: 1rem;\r\n  border-radius: 0.1875rem;\r\n  height: 1.75rem;\r\n  font-weight: 600;\r\n  color: #fff;\r\n  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.15);\r\n  cursor: pointer;\r\n}\r\n.form-submit:hover, .form-submit:focus {\r\n  background: #2be0e8;\r\n  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);\r\n  outline: 0;\r\n}\r\n.form-submit:active {\r\n  box-shadow: none;\r\n}\r\n\r\n#form-error {\r\n  color: #fff;\r\n  margin-bottom: 0.5rem;\r\n  text-align: center;\r\n  color: #c1000b;\r\n  background-color: #ffd5d5;\r\n  padding: 3px;\r\n  font-size: 0.875rem;\r\n}\r\n\r\n#results {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 110px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n#results p {\r\n  margin: 0;\r\n}\r\n#results #rs {\r\n  position: absolute;\r\n  bottom: 10px;\r\n  right: 10px;\r\n  font-size: 0.875rem;\r\n  color: #aaa;\r\n}\r\n#results #rs:hover {\r\n  color: #9951FF;\r\n}<\/pre>\n
3. Finally, copy the following JavaScript code. Just before the closing <\/body><\/code> tag of your web page, paste the copied JavaScript code within a <script><\/code> tag.<\/p>\n
(function () {\r\n  const form = document.getElementById('calc-form');\r\n  const results = document.getElementById('results');\r\n  const errors = document.getElementById('form-error');\r\n\r\n  \/**\r\n   * Display a form validation error\r\n   *\r\n   * @param   {String}  msg  The validation message\r\n   * @return  {Boolen}       Returns false\r\n   *\/\r\n  function errorMessage(msg) {\r\n    errors.innerHTML = msg;\r\n    errors.style.display = '';\r\n    return false;\r\n  }\r\n\r\n  \/**\r\n   * Display the calculation results\r\n   *\r\n   * @param   {Integer}  calories   The calories burned\r\n   * @param   {Integer}  distance   The distance run\r\n   * @param   {String}   unit       The distance unit (miles or kilometers)\r\n   * @param   {Integer}  burnRate   The calories per distance burn rate\r\n   * @param   {Integer}  calsPerHr  The calories burned per hour\r\n   *\/\r\n  function showResults(calories) {\r\n    results.innerHTML = `<p>Your basal metabolic rate (BMR) is: <strong>${calories.toFixed(2)} <\/strong> calories a day.<\/p><a href=\"#\" id=\"rs\">revise<\/a>`;\r\n    results.style.display = '';\r\n    form.style.display = 'none';\r\n    errors.style.display = 'none';\r\n  }\r\n\r\n  \/**\r\n   * Hide the results and reset the form\r\n   *\/\r\n  function resetForm(e) {\r\n    if (e.target.id = 'rs') {\r\n      e.preventDefault();\r\n      results.style.display = 'none';\r\n      form.style.display = '';\r\n      form.reset();\r\n    }\r\n  }\r\n\r\n  \/**\r\n   * Handle form submit\r\n   *\/\r\n  function submitHandler(e) {\r\n    e.preventDefault();\r\n\r\n    \/\/ Age\r\n    let age = parseFloat(form.age.value);\r\n    \/\/let unit = form.distance_unit.value;\r\n    if (isNaN(age) || age < 0) {\r\n      return errorMessage('Please enter a valid age');\r\n    }\r\n\r\n    \/\/ Height\r\n    let heightCM = parseFloat(form.height_cm.value);\r\n    if (isNaN(heightCM) || heightCM < 0) {\r\n\r\n      let heightFeet = parseFloat(form.height_ft.value);\r\n      if (isNaN(heightFeet) || heightFeet < 0) {\r\n        return errorMessage('Please enter a valid Height in feet or centimeters');\r\n      }\r\n      let heightInches = parseFloat(form.height_in.value);\r\n      if (isNaN(heightInches) || heightInches < 0) {\r\n        heightInches = 0;\r\n      }\r\n      heightCM = 2.54 * heightInches + 30.4 * heightFeet;\r\n\r\n    }\r\n\r\n    let weight = parseFloat(form.weight.value);\r\n    if (isNaN(weight) || weight < 0) {\r\n      return errorMessage('Please enter a valid weight');\r\n    }\r\n\r\n    if (form.weight_unit.value == 'lb') {\r\n      weight = 0.453592 * weight;\r\n    }\r\n\r\n    let calories = 0;\r\n    if (form.gender.value == 'Female') {\r\n      \/\/females =  655.09 + 9.56 x (Weight in kg) + 1.84 x (Height in cm) - 4.67 x age   \r\n      calories = 655.09 + 9.56 * weight + 1.84 * heightCM - 4.67 * age;\r\n    } else {\r\n      calories = 66.47 + 13.75 * weight + 5 * heightCM - 6.75 * age;\r\n    }\r\n\r\n    \/\/ Display results\r\n    showResults(calories);\r\n  }\r\n\r\n  \/\/ Add Event Listeners\r\n  form.addEventListener('submit', submitHandler);\r\n  results.addEventListener('click', resetForm, true);\r\n\r\n})();<\/pre>\n
By following these steps, you should be able to seamlessly integrate the Calorie Calculator Source Code into your website, providing a useful tool for your visitors to calculate their daily calorie needs. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This HTML, CSS, and JavaScript source code helps you to create a Calorie Calculator on your website. It helps determine…<\/p>\n","protected":false},"author":1,"featured_media":9139,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[216],"class_list":["post-9119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript","tag-calculator"],"acf":[],"yoast_head":"\nCalorie Calculator Source Code — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Calorie Calculator Source Code. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Calorie Calculator Source Code — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Calorie Calculator Source Code. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-19T17:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:59:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Calorie-Calculator-Source-Code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Calorie Calculator Source Code\",\"datePublished\":\"2024-01-19T17:59:00+00:00\",\"dateModified\":\"2024-01-22T10:59:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/\"},\"wordCount\":256,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Calorie-Calculator-Source-Code.png\",\"keywords\":[\"Calculator\"],\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/\",\"name\":\"Calorie Calculator Source Code — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Calorie-Calculator-Source-Code.png\",\"datePublished\":\"2024-01-19T17:59:00+00:00\",\"dateModified\":\"2024-01-22T10:59:36+00:00\",\"description\":\"Here is a free code snippet to create a Calorie Calculator Source Code. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Calorie-Calculator-Source-Code.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Calorie-Calculator-Source-Code.png\",\"width\":1280,\"height\":960,\"caption\":\"Calorie Calculator Source Code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Calorie Calculator Source Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Calorie Calculator Source Code — CodeHim","description":"Here is a free code snippet to create a Calorie Calculator Source Code. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/","og_locale":"en_US","og_type":"article","og_title":"Calorie Calculator Source Code — CodeHim","og_description":"Here is a free code snippet to create a Calorie Calculator Source Code. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-19T17:59:00+00:00","article_modified_time":"2024-01-22T10:59:36+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Calorie-Calculator-Source-Code.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Calorie Calculator Source Code","datePublished":"2024-01-19T17:59:00+00:00","dateModified":"2024-01-22T10:59:36+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/"},"wordCount":256,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Calorie-Calculator-Source-Code.png","keywords":["Calculator"],"articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/","url":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/","name":"Calorie Calculator Source Code — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Calorie-Calculator-Source-Code.png","datePublished":"2024-01-19T17:59:00+00:00","dateModified":"2024-01-22T10:59:36+00:00","description":"Here is a free code snippet to create a Calorie Calculator Source Code. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Calorie-Calculator-Source-Code.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Calorie-Calculator-Source-Code.png","width":1280,"height":960,"caption":"Calorie Calculator Source Code"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/calorie-calculator-source-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"Calorie Calculator Source Code"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":2808,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9119"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9119\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9139"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}