{"id":8245,"date":"2025-09-07T14:10:28","date_gmt":"2025-09-07T14:10:28","guid":{"rendered":"https:\/\/ccitonline.com\/wp\/?p=8245"},"modified":"2025-09-09T04:27:49","modified_gmt":"2025-09-09T04:27:49","slug":"epsi-temperature-calculator","status":"publish","type":"post","link":"https:\/\/ccitonline.com\/wp\/2025\/09\/07\/epsi-temperature-calculator\/","title":{"rendered":"Epsi &#8211; Temperature Calculator"},"content":{"rendered":"\n<p>Simple Console Test<\/p>\n\n\n\n<p>HTML Test<\/p>\n<script>\n\/\/ Your JavaScript code goes here\ndocument.addEventListener('DOMContentLoaded', function() {\n    console.log('My custom script is loaded!');\n});\n<\/script>\n\n\n\n<p>Temperature Calculator<\/p>\n\n\n\n<style>\n        \/* Base styles *\/\n\n       #temp-converter-wrapper {\n            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\n            color: #334155;\n            line-height: 1.6;\n            min-height: 100vh;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 20px;\n        }\n        \n        \/* Container styles *\/\n        .container {\n            width: 100%;\n            max-width: 600px;\n            background: #ffffff;\n            border-radius: 16px;\n            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n            border: 1px solid #e2e8f0;\n        }\n        \n        \/* Header styles *\/\n        .header {\n            background: #3b82f6;\n            padding: 24px;\n            text-align: center;\n            border-bottom: 1px solid #e2e8f0;\n            color: white;\n        }\n        \n        .header h1 {\n            font-size: 28px;\n            font-weight: 700;\n            margin-bottom: 8px;\n            color: white;\n        }\n        \n        .header p {\n            color: #dbeafe;\n            font-size: 16px;\n            max-width: 500px;\n            margin: 0 auto;\n        }\n        \n        \/* Form styles *\/\n        .form-container {\n            padding: 24px;\n        }\n        \n        .input-group {\n            margin-bottom: 20px;\n        }\n        \n        .input-group label {\n            display: block;\n            font-size: 14px;\n            font-weight: 500;\n            color: #475569;\n            margin-bottom: 8px;\n        }\n        \n        .input-control {\n            width: 100%;\n            padding: 14px 16px;\n            background: #f8fafc;\n            border: 1px solid #cbd5e1;\n            border-radius: 12px;\n            color: #334155;\n            font-size: 16px;\n            transition: all 0.2s ease;\n        }\n        \n        .input-control:focus {\n            outline: none;\n            border-color: #3b82f6;\n            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);\n        }\n        \n        \/* Slider styles *\/\n        .slider-container {\n            margin-top: 20px;\n            padding: 10px 0;\n        }\n        \n        .slider {\n            -webkit-appearance: none;\n            width: 100%;\n            height: 8px;\n            border-radius: 4px;\n            background: #cbd5e1;\n            outline: none;\n        }\n        \n        .slider::-webkit-slider-thumb {\n            -webkit-appearance: none;\n            appearance: none;\n            width: 22px;\n            height: 22px;\n            border-radius: 50%;\n            background: #3b82f6;\n            cursor: pointer;\n            border: 2px solid white;\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n        }\n        \n        .slider::-moz-range-thumb {\n            width: 22px;\n            height: 22px;\n            border-radius: 50%;\n            background: #3b82f6;\n            cursor: pointer;\n            border: 2px solid white;\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n        }\n        \n        .slider-labels {\n            display: flex;\n            justify-content: space-between;\n            margin-top: 8px;\n            font-size: 12px;\n            color: #64748b;\n        }\n        \n        \/* Button styles *\/\n        .btn-group {\n            display: flex;\n            gap: 12px;\n            margin-top: 24px;\n        }\n        \n        .btn {\n            flex: 1;\n            padding: 14px 20px;\n            border: none;\n            border-radius: 12px;\n            font-size: 16px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n        \n        .btn-primary {\n            background: #3b82f6;\n            color: white;\n        }\n        \n        .btn-primary:hover {\n            background: #2563eb;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);\n        }\n        \n        .btn-secondary {\n            background: #e2e8f0;\n            color: #475569;\n        }\n        \n        .btn-secondary:hover {\n            background: #cbd5e1;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n        }\n        \n        \/* Result styles *\/\n        .result-container {\n            background: #f1f5f9;\n            border-radius: 12px;\n            padding: 20px;\n            margin-top: 20px;\n            border: 1px solid #e2e8f0;\n        }\n        \n        .result-title {\n            font-size: 18px;\n            font-weight: 600;\n            color: #475569;\n            margin-bottom: 12px;\n        }\n        \n        .result-value {\n            font-size: 32px;\n            font-weight: 700;\n            color: #3b82f6;\n            text-align: center;\n            margin: 10px 0;\n        }\n        \n        .result-details {\n            color: #64748b;\n            font-size: 14px;\n            text-align: center;\n        }\n        \n        \/* Formula styles *\/\n        .formula-container {\n            background: #f8fafc;\n            border-radius: 12px;\n            padding: 16px;\n            margin-top: 20px;\n            border: 1px solid #e2e8f0;\n            font-family: 'Monaco', 'Menlo', monospace;\n            font-size: 14px;\n            color: #475569;\n        }\n        \n        \/* Error styles *\/\n        .error-message {\n            background: #fee2e2;\n            color: #b91c1c;\n            padding: 12px 16px;\n            border-radius: 8px;\n            margin-top: 16px;\n            display: none;\n            border: 1px solid #fecaca;\n        }\n        \n        \/* Responsive adjustments *\/\n        @media (max-width: 640px) {\n            .btn-group {\n                flex-direction: column;\n            }\n            \n            .header h1 {\n                font-size: 24px;\n            }\n            \n            .result-value {\n                font-size: 28px;\n            }\n        }\n        \n        \/* Animation *\/\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n        \n        .fade-in {\n            animation: fadeIn 0.5s ease forwards;\n        }\n        \n        .temp-badges {\n            display: flex;\n            gap: 8px;\n            margin-top: 12px;\n            flex-wrap: wrap;\n        }\n        \n        .temp-badge {\n            padding: 6px 12px;\n            background: #e0f2fe;\n            color: #0369a1;\n            border-radius: 20px;\n            font-size: 12px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            border: 1px solid #bae6fd;\n        }\n        \n        .temp-badge:hover {\n            background: #bae6fd;\n            transform: translateY(-2px);\n        }\n    <\/style>\n\n    <div class=\"container\" id=\"temp-converter-wrapper\">\n        <div class=\"header\">\n            <h1>Temperature Unit Converter<\/h1>\n            <p>Convert between Celsius, Fahrenheit, Kelvin, Rankine, and Reamur scales<\/p>\n        <\/div>\n        \n        <div class=\"form-container\">\n            <div class=\"input-group\">\n                <label for=\"tempInput\">Temperature Value<\/label>\n                <input type=\"number\" id=\"tempInput\" class=\"input-control\" placeholder=\"Enter temperature value\" step=\"any\" value=\"100\">\n            <\/div>\n            \n            <div class=\"slider-container\">\n                <label for=\"tempSlider\">Adjust Temperature<\/label>\n                <input type=\"range\" id=\"tempSlider\" class=\"slider\" min=\"-100\" max=\"1000\" step=\"1\" value=\"100\">\n                <div class=\"slider-labels\">\n                    <span>-100<\/span>\n                    <span>175<\/span>\n                    <span>450<\/span>\n                    <span>725<\/span>\n                    <span>1000<\/span>\n                <\/div>\n            <\/div>\n            \n            <div class=\"temp-badges\">\n                <div class=\"temp-badge\" data-temp=\"-273.15\">Absolute Zero<\/div>\n                <div class=\"temp-badge\" data-temp=\"0\">Water Freezes<\/div>\n                <div class=\"temp-badge\" data-temp=\"100\">Water Boils<\/div>\n                <div class=\"temp-badge\" data-temp=\"37\">Body Temp<\/div>\n            <\/div>\n            \n            <div class=\"input-group\">\n                <label for=\"sourceUnit\">Convert From<\/label>\n                <select id=\"sourceUnit\" class=\"input-control\">\n                    <option value=\"C\">Celsius (\u00b0C)<\/option>\n                    <option value=\"F\" selected>Fahrenheit (\u00b0F)<\/option>\n                    <option value=\"K\">Kelvin (K)<\/option>\n                    <option value=\"R\">Reamur (\u00b0R\u00e9)<\/option>\n                    <option value=\"Ra\">Rankine (\u00b0Ra)<\/option>\n                <\/select>\n            <\/div>\n            \n            <div class=\"input-group\">\n                <label for=\"targetUnit\">Convert To<\/label>\n                <select id=\"targetUnit\" class=\"input-control\">\n                    <option value=\"F\">Fahrenheit (\u00b0F)<\/option>\n                    <option value=\"C\">Celsius (\u00b0C)<\/option>\n                    <option value=\"K\">Kelvin (K)<\/option>\n                    <option value=\"R\">Reamur (\u00b0R\u00e9)<\/option>\n                    <option value=\"Ra\" selected>Rankine (\u00b0Ra)<\/option>\n                <\/select>\n            <\/div>\n            \n            <div class=\"btn-group\">\n                <button id=\"convertBtn\" class=\"btn btn-primary\">Convert<\/button>\n                <button id=\"resetBtn\" class=\"btn btn-secondary\">Reset<\/button>\n            <\/div>\n            \n            <div id=\"errorMsg\" class=\"error-message\"><\/div>\n            \n            <div id=\"resultContainer\" class=\"result-container\" style=\"display: none;\">\n                <div class=\"result-title\">Conversion Result<\/div>\n                <div id=\"resultValue\" class=\"result-value\"><\/div>\n                <div id=\"resultDetails\" class=\"result-details\"><\/div>\n            <\/div>\n            \n            <div id=\"formulaContainer\" class=\"formula-container\" style=\"display: none;\">\n                <div style=\"margin-bottom: 8px; font-weight: 600;\">Conversion Steps:<\/div>\n                <div id=\"formulaSteps\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Define variables in the global scope\n        let convertBtn, tempInput, tempSlider, sourceUnit, targetUnit, resultValue, resultDetails, errorMsg, resultContainer, formulaContainer, formulaSteps, resetBtn;\n\n        \/\/ Wait for the DOM to be fully loaded before trying to find the elements\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Get references to the DOM elements\n            convertBtn = document.getElementById('convertBtn');\n            tempInput = document.getElementById('tempInput');\n            tempSlider = document.getElementById('tempSlider');\n            sourceUnit = document.getElementById('sourceUnit');\n            targetUnit = document.getElementById('targetUnit');\n            resultValue = document.getElementById('resultValue');\n            resultDetails = document.getElementById('resultDetails');\n            errorMsg = document.getElementById('errorMsg');\n            resultContainer = document.getElementById('resultContainer');\n            formulaContainer = document.getElementById('formulaContainer');\n            formulaSteps = document.getElementById('formulaSteps');\n            resetBtn = document.getElementById('resetBtn');\n\n            \/\/ Set default values\n            tempInput.value = \"100\";\n            sourceUnit.value = \"F\";\n            targetUnit.value = \"Ra\";\n            tempSlider.value = \"100\";\n\n            \/\/ Attach event listeners\n            convertBtn.addEventListener('click', convertTemperature);\n            resetBtn.addEventListener('click', resetCalculator);\n            \n            \/\/ Sync slider and input field\n            tempSlider.addEventListener('input', function() {\n                tempInput.value = tempSlider.value;\n                convertTemperature();\n            });\n            \n            tempInput.addEventListener('input', function() {\n                tempSlider.value = tempInput.value;\n                convertTemperature();\n            });\n            \n            \/\/ Add event listener to temperature badges\n            document.querySelectorAll('.temp-badge').forEach(badge => {\n                badge.addEventListener('click', function() {\n                    const temp = this.getAttribute('data-temp');\n                    tempInput.value = temp;\n                    tempSlider.value = temp;\n                    convertTemperature();\n                });\n            });\n\n            \/\/ Optional: Add event listener to the input field to convert on 'Enter' key\n            tempInput.addEventListener('keypress', function(event) {\n                if (event.key === 'Enter') {\n                    convertTemperature();\n                }\n            });\n            \n            \/\/ Perform initial conversion\n            convertTemperature();\n        });\n\n        \/\/ Define helper functions in the global scope\n        function showError(message) {\n            errorMsg.textContent = message;\n            errorMsg.style.display = 'block';\n            resultContainer.style.display = 'none';\n            formulaContainer.style.display = 'none';\n        }\n\n        function getUnitName(unitCode) {\n            const unitNames = {\n                'C': '\u00b0C',\n                'F': '\u00b0F',\n                'R': '\u00b0R\u00e9',\n                'K': 'K',\n                'Ra': '\u00b0Ra'\n            };\n            return unitNames[unitCode];\n        }\n\n        function getUnitFullName(unitCode) {\n            const unitNames = {\n                'C': 'Celsius',\n                'F': 'Fahrenheit',\n                'R': 'Reamur',\n                'K': 'Kelvin',\n                'Ra': 'Rankine'\n            };\n            return unitNames[unitCode];\n        }\n\n        function resetCalculator() {\n            tempInput.value = '100';\n            tempSlider.value = '100';\n            sourceUnit.value = 'F';\n            targetUnit.value = 'Ra';\n            errorMsg.style.display = 'none';\n            resultContainer.style.display = 'none';\n            formulaContainer.style.display = 'none';\n        }\n\n        \/\/ Define the main conversion function globally\n        function convertTemperature() {\n            \/\/ Reset error display\n            errorMsg.style.display = 'none';\n            errorMsg.textContent = '';\n\n            \/\/ 1. Get and validate input value\n            const inputValue = parseFloat(tempInput.value);\n            console.log(\"=== STARTING CONVERSION ===\");\n            console.log(`Input Value: ${inputValue}`);\n\n            if (isNaN(inputValue)) {\n                showError(\"Please enter a valid number.\");\n                console.error(\"Conversion aborted: Input is not a number.\");\n                return;\n            }\n\n            \/\/ 2. Get the selected units\n            const fromUnit = sourceUnit.value;\n            const toUnit = targetUnit.value;\n            console.log(`Converting from: ${fromUnit} to: ${toUnit}`);\n\n            \/\/ 3. Perform the conversion using the pivot method\n            let result;\n            let formulaText = \"\";\n            let celsiusValue;\n\n            if (fromUnit === toUnit) {\n                result = inputValue;\n                formulaText = `No conversion needed. ${inputValue} ${getUnitName(fromUnit)} = ${result} ${getUnitName(toUnit)}`;\n                console.log(\"Source and target units are the same. Returning input value.\");\n            } else {\n                \/\/ STAGE 1: Convert the input value to Celsius first (the pivot)\n                console.log(\"\\n--- STAGE 1: Convert to Celsius (Pivot) ---\");\n                switch(fromUnit) {\n                    case 'C':\n                        celsiusValue = inputValue;\n                        formulaText += `Pivot: ${inputValue} \u00b0C`;\n                        console.log(`Source is already Celsius. celsiusValue = ${celsiusValue}`);\n                        break;\n                    case 'F':\n                        console.log(`Formula: (${inputValue} \u00b0F - 32) \u00d7 5\/9`);\n                        celsiusValue = (inputValue - 32) * 5\/9;\n                        console.log(`Calculated: (${inputValue} - 32) = ${inputValue - 32}`);\n                        console.log(`Calculated: ${inputValue - 32} \u00d7 5\/9 = ${celsiusValue}`);\n                        formulaText += `(${inputValue} \u00b0F - 32) \u00d7 5\/9 = ${celsiusValue.toFixed(4)} \u00b0C`;\n                        break;\n                    case 'R':\n                        console.log(`Formula: ${inputValue} \u00b0R\u00e9 \u00d7 5\/4`);\n                        celsiusValue = inputValue * 5\/4;\n                        console.log(`Calculated: ${inputValue} \u00d7 5\/4 = ${celsiusValue}`);\n                        formulaText += `${inputValue} \u00b0R\u00e9 \u00d7 5\/4 = ${celsiusValue.toFixed(4)} \u00b0C`;\n                        break;\n                    case 'K':\n                        console.log(`Formula: ${inputValue} K - 273.15`);\n                        celsiusValue = inputValue - 273.15;\n                        console.log(`Calculated: ${inputValue} - 273.15 = ${celsiusValue}`);\n                        formulaText += `${inputValue} K - 273.15 = ${celsiusValue.toFixed(4)} \u00b0C`;\n                        break;\n                    case 'Ra':\n                        console.log(`Formula: (${inputValue} \u00b0Ra - 491.67) \u00d7 5\/9`);\n                        celsiusValue = (inputValue - 491.67) * 5\/9;\n                        console.log(`Calculated: (${inputValue} - 491.67) = ${inputValue - 491.67}`);\n                        console.log(`Calculated: ${inputValue - 491.67} \u00d7 5\/9 = ${celsiusValue}`);\n                        formulaText += `(${inputValue} \u00b0Ra - 491.67) \u00d7 5\/9 = ${celsiusValue.toFixed(4)} \u00b0C`;\n                        break;\n                }\n                console.log(`Pivot (Celsius) Value: ${celsiusValue} \u00b0C`);\n\n                \/\/ STAGE 2: Convert from Celsius to the target unit\n                console.log(\"\\n--- STAGE 2: Convert from Celsius to Target ---\");\n                switch(toUnit) {\n                    case 'C':\n                        result = celsiusValue;\n                        console.log(`Target is Celsius. result = ${result}`);\n                        formulaText += ` = ${result.toFixed(4)} \u00b0C`;\n                        break;\n                    case 'F':\n                        console.log(`Formula: (${celsiusValue} \u00b0C \u00d7 9\/5) + 32`);\n                        result = (celsiusValue * 9\/5) + 32;\n                        console.log(`Calculated: ${celsiusValue} \u00d7 9\/5 = ${celsiusValue * 9\/5}`);\n                        console.log(`Calculated: ${celsiusValue * 9\/5} + 32 = ${result}`);\n                        formulaText += ` \u2192 (${celsiusValue.toFixed(4)} \u00b0C \u00d7 9\/5) + 32 = ${result.toFixed(4)} \u00b0F`;\n                        break;\n                    case 'R':\n                        console.log(`Formula: ${celsiusValue} \u00b0C \u00d7 4\/5`);\n                        result = celsiusValue * 4\/5;\n                        console.log(`Calculated: ${celsiusValue} \u00d7 4\/5 = ${result}`);\n                        formulaText += ` \u2192 ${celsiusValue.toFixed(4)} \u00b0C \u00d7 4\/5 = ${result.toFixed(4)} \u00b0R\u00e9`;\n                        break;\n                    case 'K':\n                        console.log(`Formula: ${celsiusValue} \u00b0C + 273.15`);\n                        result = celsiusValue + 273.15;\n                        console.log(`Calculated: ${celsiusValue} + 273.15 = ${result}`);\n                        formulaText += ` \u2192 ${celsiusValue.toFixed(4)} \u00b0C + 273.15 = ${result.toFixed(4)} K`;\n                        break;\n                    case 'Ra':\n                        console.log(`Formula: (${celsiusValue} \u00b0C + 273.15) \u00d7 9\/5`);\n                        result = (celsiusValue + 273.15) * 9\/5;\n                        console.log(`Calculated: ${celsiusValue} + 273.15 = ${celsiusValue + 273.15}`);\n                        console.log(`Calculated: ${celsiusValue + 273.15} \u00d7 9\/5 = ${result}`);\n                        formulaText += ` \u2192 (${celsiusValue.toFixed(4)} \u00b0C + 273.15) \u00d7 9\/5 = ${result.toFixed(4)} \u00b0Ra`;\n                        break;\n                }\n                console.log(`Final Result: ${result}`);\n            }\n\n            \/\/ 4. Display the result on the page\n            resultValue.textContent = `${result.toFixed(6)} ${getUnitName(toUnit)}`;\n            resultDetails.textContent = `${inputValue} ${getUnitFullName(fromUnit)} = ${result.toFixed(6)} ${getUnitFullName(toUnit)}`;\n            resultContainer.style.display = 'block';\n            resultContainer.classList.add('fade-in');\n            \n            console.log(`\\n=== FINAL ANSWER: ${inputValue} ${fromUnit} = ${result.toFixed(4)} ${toUnit} ===\\n`);\n\n            \/\/ 5. Display the formula steps on the page\n            formulaSteps.textContent = formulaText;\n            formulaContainer.style.display = 'block';\n            formulaContainer.classList.add('fade-in');\n            console.log(\"Formula Steps:\", formulaText);\n        }\n    <\/script>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"860\" height=\"136\" src=\"https:\/\/ccitonline.com\/wp\/wp-content\/uploads\/2025\/09\/temperature-matrix.png\" alt=\"\" class=\"wp-image-8297\" srcset=\"https:\/\/ccitonline.com\/wp\/wp-content\/uploads\/2025\/09\/temperature-matrix.png 860w, https:\/\/ccitonline.com\/wp\/wp-content\/uploads\/2025\/09\/temperature-matrix-300x47.png 300w, https:\/\/ccitonline.com\/wp\/wp-content\/uploads\/2025\/09\/temperature-matrix-768x121.png 768w, https:\/\/ccitonline.com\/wp\/wp-content\/uploads\/2025\/09\/temperature-matrix-600x95.png 600w\" sizes=\"auto, (max-width: 860px) 100vw, 860px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>From \\ To<\/th><th>Celcius (\u00b0C)<\/th><th>Fahrenheit (\u00b0F)<\/th><th>Reamur (\u00b0R\u00e9)<\/th><th>Kelvin (K)<\/th><th>Rankine (\u00b0Ra)<\/th><\/tr><\/thead><tbody><tr><td><strong>Celcius<\/strong><\/td><td><code>C<\/code><\/td><td><code>(C \u00d7 9\/5) + 32<\/code><\/td><td><code>C \u00d7 4\/5<\/code><\/td><td><code>C + 273.15<\/code><\/td><td><code>(C + 273.15) \u00d7 9\/5<\/code><\/td><\/tr><tr><td><strong>Fahrenheit<\/strong><\/td><td><code>(F - 32) \u00d7 5\/9<\/code><\/td><td><code>F<\/code><\/td><td><code>(F - 32) \u00d7 4\/9<\/code><\/td><td><code>(F + 459.67) \u00d7 5\/9<\/code><\/td><td><code>F + 459.67<\/code><\/td><\/tr><tr><td><strong>Reamur<\/strong><\/td><td><code>R \u00d7 5\/4<\/code><\/td><td><code>(R \u00d7 9\/4) + 32<\/code><\/td><td><code>R<\/code><\/td><td><code>(R \u00d7 5\/4) + 273.15<\/code><\/td><td><code>(R \u00d7 9\/4) + 491.67<\/code><\/td><\/tr><tr><td><strong>Kelvin<\/strong><\/td><td><code>K - 273.15<\/code><\/td><td><code>(K \u00d7 9\/5) - 459.67<\/code><\/td><td><code>(K - 273.15) \u00d7 4\/5<\/code><\/td><td><code>K<\/code><\/td><td><code>K \u00d7 9\/5<\/code><\/td><\/tr><tr><td><strong>Rankine<\/strong><\/td><td><code>(Ra - 491.67) \u00d7 5\/9<\/code><\/td><td><code>Ra - 459.67<\/code><\/td><td><code>(Ra - 491.67) \u00d7 4\/9<\/code><\/td><td><code>Ra \u00d7 5\/9<\/code><\/td><td><code>Ra<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Animation Test<\/p>\n\n\n\n<style>\n#svg_container {\n  top: 0;\n  right: 0;\n  left: 0;\n  width: 100%;\n  height: 300px;\n  overflow: hidden;\n  z-index: -1;\n}\n\n.box {\n  stroke: gray;\n  stroke-width: none;\n  fill  : white;\n  width : 200px;\n  height: 200px;\n}\n\n.area {\n  stroke: none;\n  stroke-width: 0px;\n}\n\n.line {\n  stroke-width: 0.5px;\n  fill  : transparent;\n}\n.line.blue  { stroke: blue; }\n.line.green { stroke: green; }\n.line.red   { stroke: red; }\n\n#sitedesc_image {\n  width: 500px;\n  height:100px;\n  max-width: 100%;\n  background: transparent url(..\/blue-sfme.png) no-repeat left top;\n  background-size: 100% auto;\n  float: none;\n  margin-top: 0;\n  margin-bottom: 10px;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n<\/style>\n\n<script>\nconst blueScale = [     '#E3F2FD',\n  '#BBDEFB', '#90CAF9', '#64B5F6',\n  '#42A5F5', '#2196F3', '#1E88E5',\n  '#1976D2', '#1565C0', '#0D47A1'];\n\nfunction getBezierParams(index) {\n  const i = index + 1;\n\n  \/\/ Initialize base points\n  \/\/ with destructuring style\n  let [mx, my] = [0, 190];\n  let [c1x, c2x, c3x] = [-10, 70, 120];\n  let c1y, c2y, c3y;\n  let [s1x, s1y, s2x, s2y] = [170, 230, 200, 220];\n\n  \/\/ Defining variant points\n  my  -= 20*i;\n  c1x += 10*i;\n  [c1y, c2y, c3y] = [my-10, my-10, my+10]\n  s1y -= 20*i;\n  s2y -= 20*i;\n\n  return [\n    mx, my,\n    c1x, c1y, c2x, c2y, c3x, c3y,\n    s1x, s1y, s2x, s2y];\n}\n\nfunction getDPath(index) {\n  const [\n    mx, my,\n    c1x, c1y, c2x, c2y, c3x, c3y,\n    s1x, s1y, s2x, s2y\n  ] = getBezierParams(index);\n\n  return `M ${mx} ${my}`\n      + ` C ${c1x} ${c1y} ${c2x} ${c2y} ${c3x} ${c3y}`\n      + ` S ${s1x} ${s1y} ${s2x} ${s2y}`\n      + ` L 200 0 L 0 0`\n      + ` z`;\n}\n\nfunction getDPathVariant(index) {\n  let [\n    mx, my,\n    c1x, c1y, c2x, c2y, c3x, c3y,\n    s1x, s1y, s2x, s2y\n  ] = getBezierParams(index+1);\n\n  \/\/ shift\n  c1x -= 20;\n  c2x -= 20;\n  c3x -= 20;\n  s1x -= 20;\n\n  \/\/ get flip baseline\n  let [\n    mx0, my0,\n    c1x0, c1y0, c2x0, c2y0, c3x0, c3y0,\n    s1x0, s1y0, s2x0, s2y0\n  ] = getBezierParams(index);\n\n  \/\/ flip\n  c1y = 2*c1y + c1y0;\n  c2y = 2*c2y + c2y0;\n  c3y = 2*c2y + c3y0;\n\n  \/\/ get the d string property\n  return `M ${mx} ${my}`\n      + ` C ${c1x} ${c1y} ${c2x} ${c2y} ${c3x} ${c3y}`\n      + ` S ${s1x} ${s1y} ${s2x} ${s2y}`\n      + ` L 200 0 L 0 0`\n      + ` z`;\n}\n\nfunction getBezierStyle(index) {\n  const bezier_fromto = getDPath(index);\n  const bezier_middle = getDPathVariant(index);\n  const duration = 5 + index*3\/10;\n\n  const styles_kf = `\n    @keyframes area_${index} {\n      from { d: path(\"${bezier_fromto}\"); }\n      50%  { d: path(\"${bezier_middle}\"); }\n      to   { d: path(\"${bezier_fromto}\"); }\n    }\n`\n  const styles_id = `\n    path#svg_area_${index} {\n      fill: ${blueScale[index]};\n      opacity: 0.5;\n      animation: area_${index} ${duration}s ease infinite normal;\n    }\n`\n  return styles_kf + styles_id;\n}\n\ndocument.addEventListener(\n  \"DOMContentLoaded\", function(event) {\n    const range = [...Array(10)];\n    let styles;\n\n    range.forEach((_, index) => {\n      styles += getBezierStyle(index);\n    });\n\n    \/\/ Create style document\n    const css = document.createElement('style');\n    css.type = 'text\/css';\n    css.appendChild(document.createTextNode(styles));\n    document.getElementsByTagName(\"head\")[0].appendChild(css);\n});\n\n<\/script>\n\n  <div id=\"svg_container\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n         viewbox=\"0 0 200 300\">\n      <path id=\"svg_area_0\" class=\"area\"\/>\n      <path id=\"svg_area_1\" class=\"area\"\/>\n      <path id=\"svg_area_2\" class=\"area\"\/>\n      <path id=\"svg_area_3\" class=\"area\"\/>\n      <path id=\"svg_area_4\" class=\"area\"\/>\n      <path id=\"svg_area_5\" class=\"area\"\/>\n      <path id=\"svg_area_6\" class=\"area\"\/>\n      <path id=\"svg_area_7\" class=\"area\"\/>\n      <path id=\"svg_area_8\" class=\"area\"\/>\n      <path id=\"svg_area_9\" class=\"area\"\/>\n    <\/svg>\n  <\/div>\n\n\n\n<p>Original Script<br><a href=\"https:\/\/epsi-rns.gitlab.io\/frontend\/2022\/01\/11\/bezier-svg-01\/\">https:\/\/epsi-rns.gitlab.io\/frontend\/2022\/01\/11\/bezier-svg-01\/<\/a><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Simple Console Test HTML Test Temperature Calculator Temperature Unit Converter Convert between Celsius, Fahrenheit, Kelvin, Rankine, and Reamur scales Temperature Value Adjust Temperature -100 175 450 725 1000 Absolute Zero Water Freezes Water Boils Body Temp Convert From Celsius (\u00b0C)Fahrenheit (\u00b0F)Kelvin (K)Reamur (\u00b0R\u00e9)Rankine (\u00b0Ra) Convert To Fahrenheit (\u00b0F)Celsius (\u00b0C)Kelvin (K)Reamur (\u00b0R\u00e9)Rankine (\u00b0Ra) Convert Reset Conversion [&hellip;]<\/p>\n","protected":false},"author":195,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-8245","post","type-post","status-publish","format-standard","hentry","category-general"],"_links":{"self":[{"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/posts\/8245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/users\/195"}],"replies":[{"embeddable":true,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/comments?post=8245"}],"version-history":[{"count":31,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/posts\/8245\/revisions"}],"predecessor-version":[{"id":8403,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/posts\/8245\/revisions\/8403"}],"wp:attachment":[{"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/media?parent=8245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/categories?post=8245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/tags?post=8245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}