{"id":1474,"date":"2024-11-26T15:59:44","date_gmt":"2024-11-26T15:59:44","guid":{"rendered":"https:\/\/donhit.com\/en\/?p=1474"},"modified":"2025-02-07T08:58:16","modified_gmt":"2025-02-07T08:58:16","slug":"portion","status":"publish","type":"post","link":"https:\/\/donhit.com\/en\/calculator\/portion\/","title":{"rendered":"Portion Calculator"},"content":{"rendered":"<p><center><div class=\"calculator-container bg-white rounded-xl p-6 w-full max-w-md shadow-lg\">\r\n        <h2 class=\"text-2xl font-bold text-center mb-4 text-blue-600\">Portion Calculator<\/h2>\r\n        \r\n        <div class=\"grid grid-cols-2 gap-4 mb-4\">\r\n            <div>\r\n                <label class=\"block text-sm font-medium text-gray-700 mb-1\">Total Amount<\/label>\r\n                <input \r\n                    type=\"number\" \r\n                    id=\"totalAmount\" \r\n                    placeholder=\"Enter total amount\" \r\n                    class=\"w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n                >\r\n            <\/div>\r\n            <div>\r\n                <label class=\"block text-sm font-medium text-gray-700 mb-1\">Number of Portions<\/label>\r\n                <input \r\n                    type=\"number\" \r\n                    id=\"numPortions\" \r\n                    placeholder=\"Enter portions\" \r\n                    class=\"w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n                >\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"grid grid-cols-2 gap-4 mb-4\">\r\n            <div>\r\n                <label class=\"block text-sm font-medium text-gray-700 mb-1\">Portion Type<\/label>\r\n                <select \r\n                    id=\"portionType\" \r\n                    class=\"w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n                >\r\n                    <option value=\"equal\">Equal Portions<\/option>\r\n                    <option value=\"weight\">Weight-Based<\/option>\r\n                    <option value=\"percentage\">Percentage-Based<\/option>\r\n                <\/select>\r\n            <\/div>\r\n            <div id=\"additionalInputContainer\" class=\"hidden\">\r\n                <label class=\"block text-sm font-medium text-gray-700 mb-1\">Additional Details<\/label>\r\n                <input \r\n                    type=\"number\" \r\n                    id=\"additionalInput\" \r\n                    placeholder=\"Weight\/Percentage\" \r\n                    class=\"w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n                >\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <button \r\n            id=\"calculateBtn\" \r\n            class=\"w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition duration-300 mb-4\"\r\n        >\r\n            Calculate Portions\r\n        <\/button>\r\n\r\n        <div \r\n            id=\"resultContainer\" \r\n            class=\"bg-blue-50 p-4 rounded hidden\"\r\n        >\r\n            <h2 class=\"text-lg font-semibold text-blue-800 mb-2\">Results<\/h2>\r\n            <div id=\"portionResults\" class=\"space-y-2\"><\/div>\r\n        <\/div>\r\n\r\n        <div \r\n            id=\"errorContainer\" \r\n            class=\"bg-red-50 p-4 rounded hidden text-red-800\"\r\n        ><\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ DOM Elements\r\n        const totalAmountInput = document.getElementById('totalAmount');\r\n        const numPortionsInput = document.getElementById('numPortions');\r\n        const portionTypeSelect = document.getElementById('portionType');\r\n        const additionalInputContainer = document.getElementById('additionalInputContainer');\r\n        const additionalInput = document.getElementById('additionalInput');\r\n        const calculateBtn = document.getElementById('calculateBtn');\r\n        const resultContainer = document.getElementById('resultContainer');\r\n        const portionResults = document.getElementById('portionResults');\r\n        const errorContainer = document.getElementById('errorContainer');\r\n\r\n        \/\/ Event Listeners\r\n        portionTypeSelect.addEventListener('change', handlePortionTypeChange);\r\n        calculateBtn.addEventListener('click', calculatePortions);\r\n\r\n        \/\/ Handle Portion Type Change\r\n        function handlePortionTypeChange() {\r\n            const selectedType = portionTypeSelect.value;\r\n            \r\n            switch(selectedType) {\r\n                case 'weight':\r\n                case 'percentage':\r\n                    additionalInputContainer.classList.remove('hidden');\r\n                    additionalInput.placeholder = selectedType === 'weight' \r\n                        ? 'Enter weight distribution' \r\n                        : 'Enter percentage distribution';\r\n                    break;\r\n                default:\r\n                    additionalInputContainer.classList.add('hidden');\r\n            }\r\n        }\r\n\r\n        \/\/ Validate Inputs\r\n        function validateInputs() {\r\n            const totalAmount = parseFloat(totalAmountInput.value);\r\n            const numPortions = parseInt(numPortionsInput.value);\r\n            \r\n            if (isNaN(totalAmount) || totalAmount <= 0) {\r\n                showError('Please enter a valid total amount.');\r\n                return false;\r\n            }\r\n            \r\n            if (isNaN(numPortions) || numPortions <= 0) {\r\n                showError('Please enter a valid number of portions.');\r\n                return false;\r\n            }\r\n            \r\n            return true;\r\n        }\r\n\r\n        \/\/ Show Error\r\n        function showError(message) {\r\n            errorContainer.textContent = message;\r\n            errorContainer.classList.remove('hidden');\r\n            resultContainer.classList.add('hidden');\r\n        }\r\n\r\n        \/\/ Calculate Portions\r\n        function calculatePortions() {\r\n            \/\/ Reset previous results and errors\r\n            errorContainer.classList.add('hidden');\r\n            resultContainer.classList.add('hidden');\r\n            portionResults.innerHTML = '';\r\n\r\n            if (!validateInputs()) return;\r\n\r\n            const totalAmount = parseFloat(totalAmountInput.value);\r\n            const numPortions = parseInt(numPortionsInput.value);\r\n            const portionType = portionTypeSelect.value;\r\n\r\n            try {\r\n                let portions = [];\r\n\r\n                switch(portionType) {\r\n                    case 'equal':\r\n                        portions = calculateEqualPortions(totalAmount, numPortions);\r\n                        break;\r\n                    case 'weight':\r\n                        portions = calculateWeightBasedPortions(totalAmount, numPortions);\r\n                        break;\r\n                    case 'percentage':\r\n                        portions = calculatePercentageBasedPortions(totalAmount, numPortions);\r\n                        break;\r\n                }\r\n\r\n                displayPortions(portions);\r\n            } catch (error) {\r\n                showError(error.message);\r\n            }\r\n        }\r\n\r\n        \/\/ Equal Portions Calculation\r\n        function calculateEqualPortions(total, count) {\r\n            const portionAmount = +(total \/ count).toFixed(2);\r\n            return Array(count).fill(portionAmount);\r\n        }\r\n\r\n        \/\/ Weight-Based Portions\r\n        function calculateWeightBasedPortions(total, count) {\r\n            const weightInput = parseFloat(additionalInput.value);\r\n            if (isNaN(weightInput) || weightInput <= 0) {\r\n                throw new Error('Please enter valid weight distribution.');\r\n            }\r\n\r\n            \/\/ Example: Simple weight distribution logic\r\n            const baseWeight = weightInput \/ count;\r\n            return Array(count).fill(baseWeight).map(w => +((total * w \/ weightInput).toFixed(2)));\r\n        }\r\n\r\n        \/\/ Percentage-Based Portions\r\n        function calculatePercentageBasedPortions(total, count) {\r\n            const percentageInput = parseFloat(additionalInput.value);\r\n            if (isNaN(percentageInput) || percentageInput <= 0 || percentageInput > 100) {\r\n                throw new Error('Please enter a valid percentage (1-100).');\r\n            }\r\n\r\n            \/\/ Example: Simple percentage-based distribution\r\n            const basePercentage = percentageInput \/ count;\r\n            return Array(count).fill(basePercentage).map(p => +((total * p \/ 100).toFixed(2)));\r\n        }\r\n\r\n        \/\/ Display Portions\r\n        function displayPortions(portions) {\r\n            resultContainer.classList.remove('hidden');\r\n            \r\n            portions.forEach((portion, index) => {\r\n                const portionElement = document.createElement('div');\r\n                portionElement.classList.add('bg-white', 'p-2', 'rounded', 'flex', 'justify-between');\r\n                \r\n                portionElement.innerHTML = `\r\n                    <span class=\"font-medium\">Portion ${index + 1}<\/span>\r\n                    <span class=\"text-blue-600 font-semibold\">$${portion.toFixed(2)}<\/span>\r\n                `;\r\n                \r\n                portionResults.appendChild(portionElement);\r\n            });\r\n        }\r\n    <\/script><\/center>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[184],"tags":[],"class_list":["post-1474","post","type-post","status-publish","format-standard","hentry","category-calculator"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Portion Calculator - DonHit<\/title>\n<meta name=\"description\" content=\"Portion calculators are essential tools for anyone looking to manage their food intake, whether for weight management, dietary goals, or general health\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/donhit.com\/en\/calculator\/portion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Portion Calculator - DonHit\" \/>\n<meta property=\"og:description\" content=\"Portion calculators are essential tools for anyone looking to manage their food intake, whether for weight management, dietary goals, or general health\" \/>\n<meta property=\"og:url\" content=\"https:\/\/donhit.com\/en\/calculator\/portion\/\" \/>\n<meta property=\"og:site_name\" content=\"DonHit - World of Tools\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-26T15:59:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-07T08:58:16+00:00\" \/>\n<meta name=\"author\" content=\"DonHit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DonHit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Portion Calculator - DonHit","description":"Portion calculators are essential tools for anyone looking to manage their food intake, whether for weight management, dietary goals, or general health","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:\/\/donhit.com\/en\/calculator\/portion\/","og_locale":"en_US","og_type":"article","og_title":"Portion Calculator - DonHit","og_description":"Portion calculators are essential tools for anyone looking to manage their food intake, whether for weight management, dietary goals, or general health","og_url":"https:\/\/donhit.com\/en\/calculator\/portion\/","og_site_name":"DonHit - World of Tools","article_published_time":"2024-11-26T15:59:44+00:00","article_modified_time":"2025-02-07T08:58:16+00:00","author":"DonHit","twitter_card":"summary_large_image","twitter_misc":{"Written by":"DonHit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/donhit.com\/en\/calculator\/portion\/#article","isPartOf":{"@id":"https:\/\/donhit.com\/en\/calculator\/portion\/"},"author":{"name":"DonHit","@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"headline":"Portion Calculator","datePublished":"2024-11-26T15:59:44+00:00","dateModified":"2025-02-07T08:58:16+00:00","mainEntityOfPage":{"@id":"https:\/\/donhit.com\/en\/calculator\/portion\/"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"articleSection":["Calculator"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/donhit.com\/en\/calculator\/portion\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/donhit.com\/en\/calculator\/portion\/","url":"https:\/\/donhit.com\/en\/calculator\/portion\/","name":"Portion Calculator - DonHit","isPartOf":{"@id":"https:\/\/donhit.com\/en\/#website"},"datePublished":"2024-11-26T15:59:44+00:00","dateModified":"2025-02-07T08:58:16+00:00","description":"Portion calculators are essential tools for anyone looking to manage their food intake, whether for weight management, dietary goals, or general health","breadcrumb":{"@id":"https:\/\/donhit.com\/en\/calculator\/portion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/donhit.com\/en\/calculator\/portion\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/donhit.com\/en\/calculator\/portion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Trang ch\u1ee7","item":"https:\/\/donhit.com\/en\/"},{"@type":"ListItem","position":2,"name":"Calculator","item":"https:\/\/donhit.com\/en\/category\/calculator\/"},{"@type":"ListItem","position":3,"name":"Portion Calculator"}]},{"@type":"WebSite","@id":"https:\/\/donhit.com\/en\/#website","url":"https:\/\/donhit.com\/en\/","name":"DonHit - World of tools","description":"","publisher":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/donhit.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148","name":"DonHit","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/donhit.com\/en\/wp-content\/uploads\/2024\/11\/logo-donhit.webp","contentUrl":"https:\/\/donhit.com\/en\/wp-content\/uploads\/2024\/11\/logo-donhit.webp","width":400,"height":267,"caption":"DonHit"},"logo":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/image\/"},"description":"DonHit is a website designed to provide useful tools for everyone. Its primary goal is to support and empower the community. All the tools available on the site are completely free to use.","sameAs":["https:\/\/donhit.com\/en"],"url":"https:\/\/donhit.com\/en\/author\/admin_don\/"}]}},"_links":{"self":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/comments?post=1474"}],"version-history":[{"count":5,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1474\/revisions"}],"predecessor-version":[{"id":2133,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1474\/revisions\/2133"}],"wp:attachment":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/media?parent=1474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/categories?post=1474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/tags?post=1474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}