Calculator de Rezisten\u021b\u0103 dup\u0103 Codul Culorilor<\/title>\n<style>\n.tolerance-part {\n font-size:0.7em; \/* Dimensiune ajustabil\u0103 pentru \u00b1 \u0219i % *\/\n}\n \/* Style for each calculator container *\/\n .calculator-box {\n font-family: Arial, sans-serif;\n max-width: 800px;\n margin: 20px auto; \/* Centers each calculator on the page *\/\n padding: 20px;\n border: 2px solid #ddd; \/* Adds a border around the calculator box *\/\n border-radius: 8px; \/* Rounded corners *\/\n background-color: #f1fffc; \/* Light background color *\/\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); \/* Soft shadow for a 3D effect *\/\n }\n\n .section-title {\n font-size: 1.5em;\n text-align: center;\n margin-bottom: 20px;\n }\n\n .dropdown-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 15px;\n gap: 10px;\n }\n\n .dropdown-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n select {\n font-size: 1.1em;\n padding: 5px;\n width: 110px;\nbox-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);\n }\n\n #multiplier, #tolerance, #multiplier5, #tolerance5 {\n width: 130px;\n }\n\n \/* Style for resistor and its parts *\/\n .resistor {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 60px 0;\n }\n\n .resistor-body {\n width: 235px;\n height: 55px;\n background-color: #91ede7;\n border-radius: 10px;\n position: relative;\n box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);\n }\n\n .resistor-terminal {\n width: 50px;\n height: 10px;\n background-color: #666;\n border-radius: 5px;\n }\n\n .left-terminal { left: 0px; }\n .right-terminal { right: 0px; }\n\n .band {\n width: 20px;\n height: 55px;\n position: absolute;\n top: 0;\n }\n #band1-color { left: 20px; }\n #band2-color { left: 60px; }\n #multiplier-color { left: 100px; }\n #tolerance-color { left: 160px; }\n #band1-color5 { left: 20px; }\n #band2-color5 { left: 60px; }\n #band3-color5 { left: 100px; }\n #multiplier-color5 { left: 140px; }\n #tolerance-color5 { left: 200px; }\n\n \/* Result box styling *\/\n .result-container {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 20px;\n }\n\n .result-box {\n padding: 10px 15px;\n font-size: 1.2em;\n font-weight: bold;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);\n text-align: center; \/* Aliniere orizontal\u0103 *\/\n display: flex; \/* Activeaz\u0103 Flexbox *\/\n align-items: center; \/* Centrare vertical\u0103 *\/\n justify-content: center; \/* Centrare orizontal\u0103 *\/\n}\n\n .result-value-box {\n background-color: #ffecb3;\n color: #795548;\n font-size: 2em; \/* Font mai mare dec\u00e2t cel al etichetei *\/\n }\n\n .result-label-box{\n background-color: #e0f7fa;\n color: #00796b;\n text-align: center;\n }\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"calculator-box\">\n <h2 class=\"section-title\">Rezistor cu 4 benzi<\/h2>\n\n \n <div class=\"dropdown-container\">\n <div class=\"dropdown-group\">\n <label for=\"band1\">Banda 1<\/label>\n <select id=\"band1\">\n <option value=\"0\">Negru<\/option>\n <option value=\"1\">Maro<\/option>\n <option value=\"2\">Ro\u0219u<\/option>\n <option value=\"3\">Portocaliu<\/option>\n <option value=\"4\">Galben<\/option>\n <option value=\"5\">Verde<\/option>\n <option value=\"6\">Albastru<\/option>\n <option value=\"7\">Violet<\/option>\n <option value=\"8\">Gri<\/option>\n <option value=\"9\">Alb<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"band2\">Banda 2<\/label>\n <select id=\"band2\">\n <option value=\"0\">Negru<\/option>\n <option value=\"1\">Maro<\/option>\n <option value=\"2\">Ro\u0219u<\/option>\n <option value=\"3\">Portocaliu<\/option>\n <option value=\"4\">Galben<\/option>\n <option value=\"5\">Verde<\/option>\n <option value=\"6\">Albastru<\/option>\n <option value=\"7\">Violet<\/option>\n <option value=\"8\">Gri<\/option>\n <option value=\"9\">Alb<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"multiplier\">Multiplicator<\/label>\n <select id=\"multiplier\">\n <option value=\"1\">Negru (x1)<\/option>\n <option value=\"10\">Maro (x10)<\/option>\n <option value=\"100\">Ro\u0219u (x100)<\/option>\n <option value=\"1000\">Portocaliu (x1K)<\/option>\n <option value=\"10000\">Galben (x10K)<\/option>\n <option value=\"100000\">Verde (x100K)<\/option>\n <option value=\"1000000\">Albastru (x1M)<\/option>\n <option value=\"10000000\">Violet (x10M)<\/option>\n <option value=\"0.1\">Gri (x0.1)<\/option>\n <option value=\"0.01\">Alb (x0.01)<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"tolerance\">Toleran\u021b\u0103<\/label>\n <select id=\"tolerance\">\n <option value=\"1\">Maro (\u00b11%)<\/option>\n <option value=\"2\">Ro\u0219u (\u00b12%)<\/option>\n <option value=\"0.5\">Verde (\u00b10.5%)<\/option>\n <option value=\"0.25\">Albastru (\u00b10.25%)<\/option>\n <option value=\"0.1\">Violet (\u00b10.1%)<\/option>\n <option value=\"5\">Auriu (\u00b15%)<\/option>\n <option value=\"10\">Argintiu (\u00b110%)<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"resistor\">\n <div class=\"resistor-terminal left-terminal\"><\/div>\n <div class=\"resistor-body\">\n <div class=\"band\" id=\"band1-color\"><\/div>\n <div class=\"band\" id=\"band2-color\"><\/div>\n <div class=\"band\" id=\"multiplier-color\"><\/div>\n <div class=\"band\" id=\"tolerance-color\"><\/div>\n <\/div>\n <div class=\"resistor-terminal right-terminal\"><\/div>\n <\/div>\n\n \n <div class=\"result-container\">\n <div class=\"result-box result-label-box\">Valoare rezisten\u021b\u0103<\/div>\n <div class=\"result-box result-value-box\" id=\"result\">0 \u03a9<\/div>\n <\/div>\n<\/div>\n<div><\/div>\n\n<div class=\"calculator-box\">\n <h2 class=\"section-title\">Rezistor cu 5 benzi<\/h2>\n\n \n <div class=\"dropdown-container\">\n <div class=\"dropdown-group\">\n <label for=\"band1-5\">Banda 1<\/label>\n <select id=\"band1-5\">\n <option value=\"0\">Negru<\/option>\n <option value=\"1\">Maro<\/option>\n <option value=\"2\">Ro\u0219u<\/option>\n <option value=\"3\">Portocaliu<\/option>\n <option value=\"4\">Galben<\/option>\n <option value=\"5\">Verde<\/option>\n <option value=\"6\">Albastru<\/option>\n <option value=\"7\">Violet<\/option>\n <option value=\"8\">Gri<\/option>\n <option value=\"9\">Alb<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"band2-5\">Banda 2<\/label>\n <select id=\"band2-5\">\n <option value=\"0\">Negru<\/option>\n <option value=\"1\">Maro<\/option>\n <option value=\"2\">Ro\u0219u<\/option>\n <option value=\"3\">Portocaliu<\/option>\n <option value=\"4\">Galben<\/option>\n <option value=\"5\">Verde<\/option>\n <option value=\"6\">Albastru<\/option>\n <option value=\"7\">Violet<\/option>\n <option value=\"8\">Gri<\/option>\n <option value=\"9\">Alb<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"band3-5\">Banda 3<\/label>\n <select id=\"band3-5\">\n <option value=\"0\">Negru<\/option>\n <option value=\"1\">Maro<\/option>\n <option value=\"2\">Ro\u0219u<\/option>\n <option value=\"3\">Portocaliu<\/option>\n <option value=\"4\">Galben<\/option>\n <option value=\"5\">Verde<\/option>\n <option value=\"6\">Albastru<\/option>\n <option value=\"7\">Violet<\/option>\n <option value=\"8\">Gri<\/option>\n <option value=\"9\">Alb<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"multiplier5\">Multiplicator<\/label>\n <select id=\"multiplier5\">\n <option value=\"1\">Negru (x1)<\/option>\n <option value=\"10\">Maro (x10)<\/option>\n <option value=\"100\">Ro\u0219u (x100)<\/option>\n <option value=\"1000\">Portocaliu (x1K)<\/option>\n <option value=\"10000\">Galben (x10K)<\/option>\n <option value=\"100000\">Verde (x100K)<\/option>\n <option value=\"1000000\">Albastru (x1M)<\/option>\n <option value=\"10000000\">Violet (x10M)<\/option>\n <option value=\"0.1\">Gri (x0.1)<\/option>\n <option value=\"0.01\">Alb (x0.01)<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"tolerance5\">Toleran\u021b\u0103<\/label>\n <select id=\"tolerance5\">\n <option value=\"1\">Maro (\u00b11%)<\/option>\n <option value=\"2\">Ro\u0219u (\u00b12%)<\/option>\n <option value=\"0.5\">Verde (\u00b10.5%)<\/option>\n <option value=\"0.25\">Albastru (\u00b10.25%)<\/option>\n <option value=\"0.1\">Violet (\u00b10.1%)<\/option>\n <option value=\"5\">Auriu (\u00b15%)<\/option>\n <option value=\"10\">Argintiu (\u00b110%)<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"resistor\">\n <div class=\"resistor-terminal left-terminal\"><\/div>\n <div class=\"resistor-body\">\n <div class=\"band\" id=\"band1-color5\"><\/div>\n <div class=\"band\" id=\"band2-color5\"><\/div>\n <div class=\"band\" id=\"band3-color5\"><\/div>\n <div class=\"band\" id=\"multiplier-color5\"><\/div>\n <div class=\"band\" id=\"tolerance-color5\"><\/div>\n <\/div>\n <div class=\"resistor-terminal right-terminal\"><\/div>\n <\/div>\n\n \n <div class=\"result-container\">\n <div class=\"result-box result-label-box\">Valoare rezisten\u021b\u0103<\/div>\n <div class=\"result-box result-value-box\" id=\"result5\">0 \u03a9<\/div>\n <\/div>\n<\/div>\n\n\n<script>\n(function() {\n const colorCodes = {\n \"0\": \"black\",\n \"1\": \"brown\",\n \"2\": \"red\",\n \"3\": \"orange\",\n \"4\": \"yellow\",\n \"5\": \"green\",\n \"6\": \"blue\",\n \"7\": \"violet\",\n \"8\": \"gray\",\n \"9\": \"white\",\n \"10\": \"gold\",\n \"11\": \"silver\"\n };\n\n const multiplierColorIndex = {\n \"1\": \"black\", \"10\": \"brown\", \"100\": \"red\", \"1000\": \"orange\", \"10000\": \"yellow\", \n \"100000\": \"green\", \"1000000\": \"blue\", \"10000000\": \"violet\", \"0.1\": \"gold\", \"0.01\": \"silver\"\n };\n const toleranceColorIndex = {\n \"1\": \"brown\", \"2\": \"red\", \"0.5\": \"green\", \"0.25\": \"blue\", \"0.1\": \"violet\", \"5\": \"gold\", \"10\": \"silver\"\n };\n\n \/\/ Functie pentru a formata rezistenta in format scurt (K si M)\n function formatResistance(value) {\n if (value >= 1e6) {\n return (value \/ 1e6).toFixed(2) + \" M\u03a9\";\n } else if (value >= 1e3) {\n return (value \/ 1e3).toFixed(2) + \" K\u03a9\";\n }\n return value + \" \u03a9\";\n }\n\n const elements = {\n fourBand: {\n bands: [\"band1\", \"band2\", \"multiplier\", \"tolerance\"],\n colors: [\"band1-color\", \"band2-color\", \"multiplier-color\", \"tolerance-color\"],\n result: \"result\",\n calculate: function() {\n const band1 = parseInt(document.getElementById(\"band1\").value);\n const band2 = parseInt(document.getElementById(\"band2\").value);\n const multiplier = parseFloat(document.getElementById(\"multiplier\").value);\n const tolerance = parseFloat(document.getElementById(\"tolerance\").value);\n const resistanceValue = ((band1 * 10) + band2) * multiplier;\n\n \/\/ Return\u0103m rezultatul cu formatarea HTML\n return formatResistance(resistanceValue) + \n ' <span class=\"tolerance-part\">\\u00A0\\u00A0 \u00b1 ' + tolerance + '%<\/span>';\n}\n },\n fiveBand: {\n bands: [\"band1-5\", \"band2-5\", \"band3-5\", \"multiplier5\", \"tolerance5\"],\n colors: [\"band1-color5\", \"band2-color5\", \"band3-color5\", \"multiplier-color5\", \"tolerance-color5\"],\n result: \"result5\",\n calculate: function() {\n const band1 = parseInt(document.getElementById(\"band1-5\").value);\n const band2 = parseInt(document.getElementById(\"band2-5\").value);\n const band3 = parseInt(document.getElementById(\"band3-5\").value);\n const multiplier = parseFloat(document.getElementById(\"multiplier5\").value);\n const tolerance = parseFloat(document.getElementById(\"tolerance5\").value);\n const resistanceValue = ((band1 * 100) + (band2 * 10) + band3) * multiplier;\n\n \/\/ Return\u0103m rezultatul cu formatarea HTML\n return formatResistance(resistanceValue) + \n ' <span class=\"tolerance-part\"> \\u00A0\\u00A0 \u00b1 ' + tolerance + '%<\/span>';\n }\n }\n };\n\n function colorOptions(selectElement, colorIndex) {\n Array.from(selectElement.options).forEach(option => {\n const colorValue = option.value;\n option.style.backgroundColor = colorIndex[colorValue] || \"white\";\n option.style.color = (colorValue === \"4\" || colorValue === \"9\" || colorValue === \"10\" || colorValue === \"11\") ? \"black\" : \"white\";\n });\n const selectedValue = selectElement.value;\n selectElement.style.backgroundColor = colorIndex[selectedValue] || \"white\";\n selectElement.style.color = (selectedValue === \"4\" || selectedValue === \"9\" || selectedValue === \"10\" || selectedValue === \"11\") ? \"black\" : \"white\";\n }\n\n function updateDropdownColors(calculator) {\n calculator.bands.forEach((band, index) => {\n const select = document.getElementById(band);\n const colorIndex = index < (calculator.bands.length - 2) ? colorCodes\n : index === (calculator.bands.length - 2) ? multiplierColorIndex : toleranceColorIndex;\n colorOptions(select, colorIndex);\n });\n }\n\n function updateCalculator(calculator) {\n calculator.bands.forEach((band, index) => {\n const value = document.getElementById(band).value;\n const color = index < (calculator.bands.length - 2)\n ? colorCodes[value] \n : index === (calculator.bands.length - 2) ? multiplierColorIndex[value] : toleranceColorIndex[value];\n document.getElementById(calculator.colors[index]).style.backgroundColor = color;\n });\n\n \/\/ Set\u0103m rezultatul folosind innerHTML\n document.getElementById(calculator.result).innerHTML = calculator.calculate();\n updateDropdownColors(calculator);\n}\n\n function addEventListeners() {\n Object.keys(elements).forEach(calc => {\n elements[calc].bands.forEach(band => {\n document.getElementById(band).addEventListener(\"change\", () => updateCalculator(elements[calc]));\n });\n });\n }\n\n window.onload = function() {\n updateCalculator(elements.fourBand);\n updateCalculator(elements.fiveBand);\n addEventListeners();\n };\n})();\n<\/script>\n\n\n<\/body>\n<\/html>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"820\" src=\"https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/4band-Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c.png\" alt=\"\" class=\"wp-image-12960\" srcset=\"https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/4band-Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c.png 900w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/4band-Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-300x273.png 300w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/4band-Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-768x700.png 768w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/4band-Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-13x12.png 13w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"820\" src=\"https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-2.png\" alt=\"\" class=\"wp-image-12961\" srcset=\"https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-2.png 900w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-2-300x273.png 300w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-2-768x700.png 768w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-2-13x12.png 13w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Calculator de Rezisten\u021b\u0103 dup\u0103 Codul Culorilor Rezistor cu 4 benzi Banda 1 NegruMaroRo\u0219uPortocaliuGalbenVerdeAlbastruVioletGriAlb Banda 2 NegruMaroRo\u0219uPortocaliuGalbenVerdeAlbastruVioletGriAlb Multiplicator Negru (x1)Maro (x10)Ro\u0219u<\/p>\n","protected":false},"author":2,"featured_media":12953,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"no_sidebar_content_centered","footnotes":""},"categories":[32,1],"tags":[],"class_list":["post-12692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-calculator","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/posts\/12692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/comments?post=12692"}],"version-history":[{"count":254,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/posts\/12692\/revisions"}],"predecessor-version":[{"id":12962,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/posts\/12692\/revisions\/12962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/media\/12953"}],"wp:attachment":[{"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/media?parent=12692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/categories?post=12692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/tags?post=12692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":12692,"date":"2024-11-01T15:45:48","date_gmt":"2024-11-01T13:45:48","guid":{"rendered":"https:\/\/learn.groundstudio.eu\/?p=12692"},"modified":"2024-11-01T16:20:22","modified_gmt":"2024-11-01T14:20:22","slug":"calculator-rezistenta-cod-culori","status":"publish","type":"post","link":"https:\/\/learn.groundstudio.eu\/en\/calculator-rezistenta-cod-culori\/","title":{"rendered":"Calculator rezisten\u021b\u0103 – Cod culori"},"content":{"rendered":"\n\n\n\n\n\nCalculator de Rezisten\u021b\u0103 dup\u0103 Codul Culorilor<\/title>\n<style>\n.tolerance-part {\n font-size:0.7em; \/* Dimensiune ajustabil\u0103 pentru \u00b1 \u0219i % *\/\n}\n \/* Style for each calculator container *\/\n .calculator-box {\n font-family: Arial, sans-serif;\n max-width: 800px;\n margin: 20px auto; \/* Centers each calculator on the page *\/\n padding: 20px;\n border: 2px solid #ddd; \/* Adds a border around the calculator box *\/\n border-radius: 8px; \/* Rounded corners *\/\n background-color: #f1fffc; \/* Light background color *\/\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); \/* Soft shadow for a 3D effect *\/\n }\n\n .section-title {\n font-size: 1.5em;\n text-align: center;\n margin-bottom: 20px;\n }\n\n .dropdown-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 15px;\n gap: 10px;\n }\n\n .dropdown-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n select {\n font-size: 1.1em;\n padding: 5px;\n width: 110px;\nbox-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);\n }\n\n #multiplier, #tolerance, #multiplier5, #tolerance5 {\n width: 130px;\n }\n\n \/* Style for resistor and its parts *\/\n .resistor {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 60px 0;\n }\n\n .resistor-body {\n width: 235px;\n height: 55px;\n background-color: #91ede7;\n border-radius: 10px;\n position: relative;\n box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);\n }\n\n .resistor-terminal {\n width: 50px;\n height: 10px;\n background-color: #666;\n border-radius: 5px;\n }\n\n .left-terminal { left: 0px; }\n .right-terminal { right: 0px; }\n\n .band {\n width: 20px;\n height: 55px;\n position: absolute;\n top: 0;\n }\n #band1-color { left: 20px; }\n #band2-color { left: 60px; }\n #multiplier-color { left: 100px; }\n #tolerance-color { left: 160px; }\n #band1-color5 { left: 20px; }\n #band2-color5 { left: 60px; }\n #band3-color5 { left: 100px; }\n #multiplier-color5 { left: 140px; }\n #tolerance-color5 { left: 200px; }\n\n \/* Result box styling *\/\n .result-container {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 20px;\n }\n\n .result-box {\n padding: 10px 15px;\n font-size: 1.2em;\n font-weight: bold;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);\n text-align: center; \/* Aliniere orizontal\u0103 *\/\n display: flex; \/* Activeaz\u0103 Flexbox *\/\n align-items: center; \/* Centrare vertical\u0103 *\/\n justify-content: center; \/* Centrare orizontal\u0103 *\/\n}\n\n .result-value-box {\n background-color: #ffecb3;\n color: #795548;\n font-size: 2em; \/* Font mai mare dec\u00e2t cel al etichetei *\/\n }\n\n .result-label-box{\n background-color: #e0f7fa;\n color: #00796b;\n text-align: center;\n }\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"calculator-box\">\n <h2 class=\"section-title\">Rezistor cu 4 benzi<\/h2>\n\n \n <div class=\"dropdown-container\">\n <div class=\"dropdown-group\">\n <label for=\"band1\">Banda 1<\/label>\n <select id=\"band1\">\n <option value=\"0\">Negru<\/option>\n <option value=\"1\">Maro<\/option>\n <option value=\"2\">Ro\u0219u<\/option>\n <option value=\"3\">Portocaliu<\/option>\n <option value=\"4\">Galben<\/option>\n <option value=\"5\">Verde<\/option>\n <option value=\"6\">Albastru<\/option>\n <option value=\"7\">Violet<\/option>\n <option value=\"8\">Gri<\/option>\n <option value=\"9\">Alb<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"band2\">Banda 2<\/label>\n <select id=\"band2\">\n <option value=\"0\">Negru<\/option>\n <option value=\"1\">Maro<\/option>\n <option value=\"2\">Ro\u0219u<\/option>\n <option value=\"3\">Portocaliu<\/option>\n <option value=\"4\">Galben<\/option>\n <option value=\"5\">Verde<\/option>\n <option value=\"6\">Albastru<\/option>\n <option value=\"7\">Violet<\/option>\n <option value=\"8\">Gri<\/option>\n <option value=\"9\">Alb<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"multiplier\">Multiplicator<\/label>\n <select id=\"multiplier\">\n <option value=\"1\">Negru (x1)<\/option>\n <option value=\"10\">Maro (x10)<\/option>\n <option value=\"100\">Ro\u0219u (x100)<\/option>\n <option value=\"1000\">Portocaliu (x1K)<\/option>\n <option value=\"10000\">Galben (x10K)<\/option>\n <option value=\"100000\">Verde (x100K)<\/option>\n <option value=\"1000000\">Albastru (x1M)<\/option>\n <option value=\"10000000\">Violet (x10M)<\/option>\n <option value=\"0.1\">Gri (x0.1)<\/option>\n <option value=\"0.01\">Alb (x0.01)<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"tolerance\">Toleran\u021b\u0103<\/label>\n <select id=\"tolerance\">\n <option value=\"1\">Maro (\u00b11%)<\/option>\n <option value=\"2\">Ro\u0219u (\u00b12%)<\/option>\n <option value=\"0.5\">Verde (\u00b10.5%)<\/option>\n <option value=\"0.25\">Albastru (\u00b10.25%)<\/option>\n <option value=\"0.1\">Violet (\u00b10.1%)<\/option>\n <option value=\"5\">Auriu (\u00b15%)<\/option>\n <option value=\"10\">Argintiu (\u00b110%)<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"resistor\">\n <div class=\"resistor-terminal left-terminal\"><\/div>\n <div class=\"resistor-body\">\n <div class=\"band\" id=\"band1-color\"><\/div>\n <div class=\"band\" id=\"band2-color\"><\/div>\n <div class=\"band\" id=\"multiplier-color\"><\/div>\n <div class=\"band\" id=\"tolerance-color\"><\/div>\n <\/div>\n <div class=\"resistor-terminal right-terminal\"><\/div>\n <\/div>\n\n \n <div class=\"result-container\">\n <div class=\"result-box result-label-box\">Valoare rezisten\u021b\u0103<\/div>\n <div class=\"result-box result-value-box\" id=\"result\">0 \u03a9<\/div>\n <\/div>\n<\/div>\n<div><\/div>\n\n<div class=\"calculator-box\">\n <h2 class=\"section-title\">Rezistor cu 5 benzi<\/h2>\n\n \n <div class=\"dropdown-container\">\n <div class=\"dropdown-group\">\n <label for=\"band1-5\">Banda 1<\/label>\n <select id=\"band1-5\">\n <option value=\"0\">Negru<\/option>\n <option value=\"1\">Maro<\/option>\n <option value=\"2\">Ro\u0219u<\/option>\n <option value=\"3\">Portocaliu<\/option>\n <option value=\"4\">Galben<\/option>\n <option value=\"5\">Verde<\/option>\n <option value=\"6\">Albastru<\/option>\n <option value=\"7\">Violet<\/option>\n <option value=\"8\">Gri<\/option>\n <option value=\"9\">Alb<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"band2-5\">Banda 2<\/label>\n <select id=\"band2-5\">\n <option value=\"0\">Negru<\/option>\n <option value=\"1\">Maro<\/option>\n <option value=\"2\">Ro\u0219u<\/option>\n <option value=\"3\">Portocaliu<\/option>\n <option value=\"4\">Galben<\/option>\n <option value=\"5\">Verde<\/option>\n <option value=\"6\">Albastru<\/option>\n <option value=\"7\">Violet<\/option>\n <option value=\"8\">Gri<\/option>\n <option value=\"9\">Alb<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"band3-5\">Banda 3<\/label>\n <select id=\"band3-5\">\n <option value=\"0\">Negru<\/option>\n <option value=\"1\">Maro<\/option>\n <option value=\"2\">Ro\u0219u<\/option>\n <option value=\"3\">Portocaliu<\/option>\n <option value=\"4\">Galben<\/option>\n <option value=\"5\">Verde<\/option>\n <option value=\"6\">Albastru<\/option>\n <option value=\"7\">Violet<\/option>\n <option value=\"8\">Gri<\/option>\n <option value=\"9\">Alb<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"multiplier5\">Multiplicator<\/label>\n <select id=\"multiplier5\">\n <option value=\"1\">Negru (x1)<\/option>\n <option value=\"10\">Maro (x10)<\/option>\n <option value=\"100\">Ro\u0219u (x100)<\/option>\n <option value=\"1000\">Portocaliu (x1K)<\/option>\n <option value=\"10000\">Galben (x10K)<\/option>\n <option value=\"100000\">Verde (x100K)<\/option>\n <option value=\"1000000\">Albastru (x1M)<\/option>\n <option value=\"10000000\">Violet (x10M)<\/option>\n <option value=\"0.1\">Gri (x0.1)<\/option>\n <option value=\"0.01\">Alb (x0.01)<\/option>\n <\/select>\n <\/div>\n <div class=\"dropdown-group\">\n <label for=\"tolerance5\">Toleran\u021b\u0103<\/label>\n <select id=\"tolerance5\">\n <option value=\"1\">Maro (\u00b11%)<\/option>\n <option value=\"2\">Ro\u0219u (\u00b12%)<\/option>\n <option value=\"0.5\">Verde (\u00b10.5%)<\/option>\n <option value=\"0.25\">Albastru (\u00b10.25%)<\/option>\n <option value=\"0.1\">Violet (\u00b10.1%)<\/option>\n <option value=\"5\">Auriu (\u00b15%)<\/option>\n <option value=\"10\">Argintiu (\u00b110%)<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"resistor\">\n <div class=\"resistor-terminal left-terminal\"><\/div>\n <div class=\"resistor-body\">\n <div class=\"band\" id=\"band1-color5\"><\/div>\n <div class=\"band\" id=\"band2-color5\"><\/div>\n <div class=\"band\" id=\"band3-color5\"><\/div>\n <div class=\"band\" id=\"multiplier-color5\"><\/div>\n <div class=\"band\" id=\"tolerance-color5\"><\/div>\n <\/div>\n <div class=\"resistor-terminal right-terminal\"><\/div>\n <\/div>\n\n \n <div class=\"result-container\">\n <div class=\"result-box result-label-box\">Valoare rezisten\u021b\u0103<\/div>\n <div class=\"result-box result-value-box\" id=\"result5\">0 \u03a9<\/div>\n <\/div>\n<\/div>\n\n\n<script>\n(function() {\n const colorCodes = {\n \"0\": \"black\",\n \"1\": \"brown\",\n \"2\": \"red\",\n \"3\": \"orange\",\n \"4\": \"yellow\",\n \"5\": \"green\",\n \"6\": \"blue\",\n \"7\": \"violet\",\n \"8\": \"gray\",\n \"9\": \"white\",\n \"10\": \"gold\",\n \"11\": \"silver\"\n };\n\n const multiplierColorIndex = {\n \"1\": \"black\", \"10\": \"brown\", \"100\": \"red\", \"1000\": \"orange\", \"10000\": \"yellow\", \n \"100000\": \"green\", \"1000000\": \"blue\", \"10000000\": \"violet\", \"0.1\": \"gold\", \"0.01\": \"silver\"\n };\n const toleranceColorIndex = {\n \"1\": \"brown\", \"2\": \"red\", \"0.5\": \"green\", \"0.25\": \"blue\", \"0.1\": \"violet\", \"5\": \"gold\", \"10\": \"silver\"\n };\n\n \/\/ Functie pentru a formata rezistenta in format scurt (K si M)\n function formatResistance(value) {\n if (value >= 1e6) {\n return (value \/ 1e6).toFixed(2) + \" M\u03a9\";\n } else if (value >= 1e3) {\n return (value \/ 1e3).toFixed(2) + \" K\u03a9\";\n }\n return value + \" \u03a9\";\n }\n\n const elements = {\n fourBand: {\n bands: [\"band1\", \"band2\", \"multiplier\", \"tolerance\"],\n colors: [\"band1-color\", \"band2-color\", \"multiplier-color\", \"tolerance-color\"],\n result: \"result\",\n calculate: function() {\n const band1 = parseInt(document.getElementById(\"band1\").value);\n const band2 = parseInt(document.getElementById(\"band2\").value);\n const multiplier = parseFloat(document.getElementById(\"multiplier\").value);\n const tolerance = parseFloat(document.getElementById(\"tolerance\").value);\n const resistanceValue = ((band1 * 10) + band2) * multiplier;\n\n \/\/ Return\u0103m rezultatul cu formatarea HTML\n return formatResistance(resistanceValue) + \n ' <span class=\"tolerance-part\">\\u00A0\\u00A0 \u00b1 ' + tolerance + '%<\/span>';\n}\n },\n fiveBand: {\n bands: [\"band1-5\", \"band2-5\", \"band3-5\", \"multiplier5\", \"tolerance5\"],\n colors: [\"band1-color5\", \"band2-color5\", \"band3-color5\", \"multiplier-color5\", \"tolerance-color5\"],\n result: \"result5\",\n calculate: function() {\n const band1 = parseInt(document.getElementById(\"band1-5\").value);\n const band2 = parseInt(document.getElementById(\"band2-5\").value);\n const band3 = parseInt(document.getElementById(\"band3-5\").value);\n const multiplier = parseFloat(document.getElementById(\"multiplier5\").value);\n const tolerance = parseFloat(document.getElementById(\"tolerance5\").value);\n const resistanceValue = ((band1 * 100) + (band2 * 10) + band3) * multiplier;\n\n \/\/ Return\u0103m rezultatul cu formatarea HTML\n return formatResistance(resistanceValue) + \n ' <span class=\"tolerance-part\"> \\u00A0\\u00A0 \u00b1 ' + tolerance + '%<\/span>';\n }\n }\n };\n\n function colorOptions(selectElement, colorIndex) {\n Array.from(selectElement.options).forEach(option => {\n const colorValue = option.value;\n option.style.backgroundColor = colorIndex[colorValue] || \"white\";\n option.style.color = (colorValue === \"4\" || colorValue === \"9\" || colorValue === \"10\" || colorValue === \"11\") ? \"black\" : \"white\";\n });\n const selectedValue = selectElement.value;\n selectElement.style.backgroundColor = colorIndex[selectedValue] || \"white\";\n selectElement.style.color = (selectedValue === \"4\" || selectedValue === \"9\" || selectedValue === \"10\" || selectedValue === \"11\") ? \"black\" : \"white\";\n }\n\n function updateDropdownColors(calculator) {\n calculator.bands.forEach((band, index) => {\n const select = document.getElementById(band);\n const colorIndex = index < (calculator.bands.length - 2) ? colorCodes\n : index === (calculator.bands.length - 2) ? multiplierColorIndex : toleranceColorIndex;\n colorOptions(select, colorIndex);\n });\n }\n\n function updateCalculator(calculator) {\n calculator.bands.forEach((band, index) => {\n const value = document.getElementById(band).value;\n const color = index < (calculator.bands.length - 2)\n ? colorCodes[value] \n : index === (calculator.bands.length - 2) ? multiplierColorIndex[value] : toleranceColorIndex[value];\n document.getElementById(calculator.colors[index]).style.backgroundColor = color;\n });\n\n \/\/ Set\u0103m rezultatul folosind innerHTML\n document.getElementById(calculator.result).innerHTML = calculator.calculate();\n updateDropdownColors(calculator);\n}\n\n function addEventListeners() {\n Object.keys(elements).forEach(calc => {\n elements[calc].bands.forEach(band => {\n document.getElementById(band).addEventListener(\"change\", () => updateCalculator(elements[calc]));\n });\n });\n }\n\n window.onload = function() {\n updateCalculator(elements.fourBand);\n updateCalculator(elements.fiveBand);\n addEventListeners();\n };\n})();\n<\/script>\n\n\n<\/body>\n<\/html>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"820\" src=\"https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/4band-Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c.png\" alt=\"\" class=\"wp-image-12960\" srcset=\"https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/4band-Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c.png 900w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/4band-Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-300x273.png 300w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/4band-Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-768x700.png 768w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/4band-Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-13x12.png 13w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"820\" src=\"https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-2.png\" alt=\"\" class=\"wp-image-12961\" srcset=\"https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-2.png 900w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-2-300x273.png 300w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-2-768x700.png 768w, https:\/\/learn.groundstudio.eu\/wp-content\/uploads\/2024\/11\/Reading_Axial_Resistors-6f9dd59da55257290f1282a26e97e98c-2-13x12.png 13w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Calculator de Rezisten\u021b\u0103 dup\u0103 Codul Culorilor Rezistor cu 4 benzi Banda 1 NegruMaroRo\u0219uPortocaliuGalbenVerdeAlbastruVioletGriAlb Banda 2 NegruMaroRo\u0219uPortocaliuGalbenVerdeAlbastruVioletGriAlb Multiplicator Negru (x1)Maro (x10)Ro\u0219u<\/p>\n","protected":false},"author":2,"featured_media":12953,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"no_sidebar_content_centered","footnotes":""},"categories":[32,1],"tags":[],"class_list":["post-12692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-calculator","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/posts\/12692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/comments?post=12692"}],"version-history":[{"count":254,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/posts\/12692\/revisions"}],"predecessor-version":[{"id":12962,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/posts\/12692\/revisions\/12962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/media\/12953"}],"wp:attachment":[{"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/media?parent=12692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/categories?post=12692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learn.groundstudio.eu\/en\/wp-json\/wp\/v2\/tags?post=12692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}