electronics-potentiometer-decoder.html

<html lang="en">
<!-- InstanceBegin template="/Templates/interactive.dwt" codeOutsideHTMLIsLocked="true" -->
<head>
<link rel="stylesheet" href="https://isocialpractice.github.io/interactive-html/css/style.css">
<link rel="icon" type="image/svg+xml" href="https://isocialpractice.github.io/interactive-html/img/favicon.svg">
<!-- InstanceBeginEditable name="head" -->
  <title>Interactive Potentiometer Value Decoder</title>
  <style>
   * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
  body {
   font-family: 'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif;
   background: linear-gradient(135deg, #E6F2FF 0%, #F5F7FA 100%);
   color: #1A1A1A;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   margin: 0;
   padding: 24px;
  }
  .container {
   background: #FFFFFF;
   border-radius: 16px;
   padding: 32px;
   max-width: 700px;
   width: 100%;
   box-shadow: 0 8px 24px rgba(0,0,0,0.12);
   border: 1px solid #E1E4E8;
  }
  h1 {
   text-align: center;
   color: #004080;
   margin-bottom: 8px;
   font-weight: 700;
   font-size: 28px;
  }
  .subtitle {
   text-align: center;
   color: #6C757D;
   margin-bottom: 32px;
   font-size: 15px;
   font-weight: 500;
  }
  .input-section {
   background: #F5F7FA;
   border-radius: 12px;
   padding: 28px;
   margin: 24px 0;
   border: 1px solid #E1E4E8;
  }
  .code-input {
   display: flex;
   gap: 15px;
   justify-content: center;
   align-items: center;
   margin: 20px 0;
  }
   .code-input input {
   width: 60px;
   height: 60px;
   text-align: center;
   font-size: 28px;
   font-weight: 700;
   border: 3px solid #0066CC;
   border-radius: 12px;
   background: #FFFFFF;
   color: #1A1A1A;
   outline: none;
   transition: all 0.2s ease;
  }
   .code-input input:focus {
   border-color: #004080;
   box-shadow: 0 0 0 4px rgba(0,102,204,0.15);
  }
  .code-type {
   text-align: center;
   color: #0066CC;
   font-size: 20px;
   font-weight: 700;
   margin: 12px 0;
  }
  .result {
   background: #F5F7FA;
   border-radius: 12px;
   padding: 28px;
   text-align: center;
   margin: 24px 0;
   border: 1px solid #E1E4E8;
  }
   .result h2 {
   color: #004080;
   margin: 0 0 16px 0;
   font-weight: 600;
   font-size: 18px;
  }
  .value {
   font-size: 48px;
   font-weight: 700;
   color: #0066CC;
   margin: 20px 0;
  }
  .breakdown {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   margin: 15px 0;
   font-size: 18px;
   color: #ccc;
  }
  .formula {
   background: #3a3a3a;
   padding: 10px 20px;
   border-radius: 5px;
   margin: 10px 0;
   font-family: monospace;
  }
  .info-box {
   background: #E6F2FF;
   border-left: 4px solid #0066CC;
   padding: 16px 20px;
   margin: 24px 0;
   border-radius: 8px;
   line-height: 1.6;
  }
   .info-box h3 {
   margin: 0 0 12px 0;
   color: #004080;
   font-weight: 600;
   font-size: 16px;
  }
  .examples {
   display: grid;
   gap: 12px;
   margin-top: 16px;
  }
  .example-item {
   background: #FFFFFF;
   padding: 12px 16px;
   border-radius: 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   transition: all 0.2s ease;
   border: 1px solid #E1E4E8;
  }
  .example-item:hover {
   background: #E6F2FF;
   border-color: #0066CC;
   transform: translateX(4px);
  }
  .example-code {
   font-weight: 700;
   color: #0066CC;
   font-size: 16px;
  }
  .example-value {
   color: #6C757D;
   font-size: 14px;
  }
  .type-badge {
   display: inline-block;
   padding: 4px 12px;
   border-radius: 6px;
   font-size: 12px;
   background: #0066CC;
   color: #FFFFFF;
   font-weight: 600;
   margin-left: 8px;
   font-weight: bold;
   margin-left: 10px;
  }
   ul li {
   color: darkslateblue;
  }
  </style>

<!-- InstanceEndEditable -->
</head>

<body>
 <nav class="site-nav">
  <div class="nav-container">
   <a href="https://isocialpractice.github.io/interactive-html/index.html" class="nav-brand">
    <img src="https://isocialpractice.github.io/interactive-html/img/favicon.svg" alt="Electronics Tools" class="nav-logo">
    <span>Interactive Tools</span>
   </a>
   <button class="nav-toggle" aria-label="Toggle menu" onclick="document.querySelector('.nav-menu').classList.toggle('active')">☰</button>
   <ul class="nav-menu">
    <li class="nav-item">
     <a href="https://isocialpractice.github.io/interactive-html/index.html" class="nav-link"><span>🏠</span> <span>Home</span></a>
    </li>
    <li class="nav-item nav-dropdown">
     <a href="https://isocialpractice.github.io/interactive-html/555/index.html" class="nav-link dropdown-toggle"><span>⏱️</span> <span>555 Timer</span></a>
     <div class="dropdown-menu">
      <a href="https://isocialpractice.github.io/interactive-html/555/555-timer-simulator.html" class="nav-link">Interactive Simulator</a>
      <a href="https://isocialpractice.github.io/interactive-html/555/555-astable-calculator.html" class="nav-link">Astable Calculator</a>
      <a href="https://isocialpractice.github.io/interactive-html/555/555-monostable-simulator.html" class="nav-link">Monostable Simulator</a>
      <a href="https://isocialpractice.github.io/interactive-html/555/555-logic-simulator.html" class="nav-link">Clock Logic Simulator</a>
     </div>
    </li>
    <li class="nav-item nav-dropdown">
     <a href="https://isocialpractice.github.io/interactive-html/electronics/index.html#resistorTools" class="nav-link dropdown-toggle"><span>🔌</span> <span>Resistors</span></a>
     <div class="dropdown-menu">
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-resistor-calculator.html" class="nav-link">Color Code Calculator</a>
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-parallel-resistor-calculator.html" class="nav-link">Parallel Calculator</a>
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-fusible-resistor-calculator.html" class="nav-link">Fusible Calculator</a>
     </div>
    </li>
    <li class="nav-item nav-dropdown">
     <a href="https://isocialpractice.github.io/interactive-html/electronics/index.html#ledAndPowerTools" class="nav-link dropdown-toggle"><span>💡</span> <span>LED & Power</span></a>
     <div class="dropdown-menu">
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-ohms-law-calculator.html" class="nav-link">Ohm's Law</a>
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-led-current-calculator.html" class="nav-link">LED Calculator</a>
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-voltage-divider-calculator.html" class="nav-link">Voltage Divider</a>
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-varistor-simulator.html" class="nav-link">Varistor Simulator</a>
     </div>
    </li>
    <li class="nav-item nav-dropdown">
     <a href="https://isocialpractice.github.io/interactive-html/electronics/index.html#components" class="nav-link dropdown-toggle"><span>🔧</span> <span>Components</span></a>
     <div class="dropdown-menu">
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-potentiometer-simulator.html" class="nav-link">Potentiometer Simulator</a>
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-potentiometer-decoder.html" class="nav-link">Potentiometer Decoder</a>
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-surface-mount-decoder.html" class="nav-link">SMD Decoder</a>
      <a href="https://isocialpractice.github.io/interactive-html/electronics/electronics-breadboard-simulator.html" class="nav-link">Breadboard Simulator</a>
     </div>
    </li>
    <li class="nav-item nav-dropdown">
     <a href="https://isocialpractice.github.io/interactive-html/general/index.html" class="nav-link dropdown-toggle"><span>📐</span> <span>General</span></a>
     <div class="dropdown-menu">
      <a href="https://isocialpractice.github.io/interactive-html/general/general-volume-measurement.html" class="nav-link">Volume Measurement</a>
      <a href="https://isocialpractice.github.io/interactive-html/general/general-area-and-perimeter-calculator.html" class="nav-link">Area & Perimeter</a>
     </div>
    </li>
    <li class="nav-item nav-dropdown">
     <a href="https://isocialpractice.github.io/interactive-html/computerScience/index.html" class="nav-link dropdown-toggle"><span>💻</span> <span>Computer Science</span></a>
     <div class="dropdown-menu">
      <a href="https://isocialpractice.github.io/interactive-html/computerScience/computerScience-number-converter.html" class="nav-link">Number Converter</a>
      <a href="https://isocialpractice.github.io/interactive-html/computerScience/computerScience-logic-gates.html" class="nav-link">Logic Gates</a>
      <a href="https://isocialpractice.github.io/interactive-html/computerScience/computerScience-stackPointer.html" class="nav-link">Stack Pointer Visualizer</a>
      <a href="https://isocialpractice.github.io/interactive-html/computerScience/computerScience-binaryHexMemoryMapConverter.html" class="nav-link">Binary/Hex Memory Map</a>
      <a href="https://isocialpractice.github.io/interactive-html/computerScience/computerScience-chipTimingWaveform.html" class="nav-link">Chip Timing Waveform</a>
     </div>
    </li>
   </ul>
  </div>
 </nav>

<!-- InstanceBeginEditable name="page" -->
  <div class="container">
   <h1>🔢 Potentiometer Value Decoder</h1>
   <p class="subtitle">Enter the 3-digit code printed on your potentiometer</p>

   <div class="input-section">
    <h3 style="text-align: center; color: #4CAF50; margin-bottom: 20px;">Enter Code:</h3>
    <div class="code-input">
     <input type="text" id="digit1" maxlength="1" value="1" oninput="moveNext(this, 'digit2')">
     <input type="text" id="digit2" maxlength="1" value="0" oninput="moveNext(this, 'digit3')">
     <input type="text" id="digit3" maxlength="1" value="4" oninput="calculate()">
    </div>
    <div class="code-type">Type: <span id="potType">Linear</span></div>
   </div>

   <div class="result">
    <h2>Resistance Value</h2>
    <div class="value" id="resultValue">100kΩ</div>
    <div class="breakdown">
     <span id="breakdownText">10 × 10⁴ = 100,000Ω</span>
    </div>
    <div class="formula" id="formulaText">
     Significant Figures: 10, Multiplier: 10^4
    </div>
   </div>

   <div class="info-box">
    <h3>How to Read Potentiometer Codes:</h3>
    <ul style="color: #ccc; line-height: 1.8;">
     <li><strong>3-Digit Code:</strong> [First][Second][Multiplier]</li>
     <li><strong>First Two Digits:</strong> Significant figures of resistance</li>
     <li><strong>Third Digit:</strong> Multiplier (power of 10)</li>
     <li><strong>Example 104:</strong> 10 × 10⁴ = 100,000Ω = 100kΩ</li>
     <li><strong>Example 503:</strong> 50 × 10³ = 50,000Ω = 50kΩ</li>
    </ul>
   </div>

   <div class="info-box">
    <h3>Common Potentiometer Values</h3>
    <p style="color: #aaa; font-size: 14px; margin-bottom: 10px;">Click to load:</p>
    <div class="examples">
     <div class="example-item" onclick="loadExample('1', '0', '3')">
      <span class="example-code">103</span>
      <span class="example-value">10kΩ</span>
     </div>
     <div class="example-item" onclick="loadExample('2', '0', '3')">
      <span class="example-code">203</span>
      <span class="example-value">20kΩ</span>
     </div>
     <div class="example-item" onclick="loadExample('5', '0', '3')">
      <span class="example-code">503</span>
      <span class="example-value">50kΩ</span>
     </div>
     <div class="example-item" onclick="loadExample('1', '0', '4')">
      <span class="example-code">104</span>
      <span class="example-value">100kΩ</span>
     </div>
     <div class="example-item" onclick="loadExample('2', '0', '4')">
      <span class="example-code">204</span>
      <span class="example-value">200kΩ</span>
     </div>
     <div class="example-item" onclick="loadExample('5', '0', '4')">
      <span class="example-code">504</span>
      <span class="example-value">500kΩ</span>
     </div>
     <div class="example-item" onclick="loadExample('1', '0', '5')">
      <span class="example-code">105</span>
      <span class="example-value">1MΩ</span>
     </div>
    </div>
   </div>

   <div class="info-box">
    <h3>Potentiometer Types:</h3>
    <ul style="color: #ccc; line-height: 1.8;">
     <li><strong>Linear (B):</strong> Resistance changes proportionally with rotation</li>
     <li><strong>Logarithmic (A):</strong> Used for audio applications (volume control)</li>
     <li><strong>Reverse Log (C):</strong> Opposite of logarithmic taper</li>
    </ul>
   </div>
  </div>

  <script>
  function moveNext(current, nextId) {
   if (current.value.length === current.maxLength) {
    const next = document.getElementById(nextId);
    if (next) next.focus();
    else calculate();
   }
   calculate();
  }

  function calculate() {
   const d1 = document.getElementById('digit1').value || '0';
   const d2 = document.getElementById('digit2').value || '0';
   const d3 = document.getElementById('digit3').value || '0';

   // Validate inputs
   if (!d1.match(/[0-9]/) || !d2.match(/[0-9]/) || !d3.match(/[0-9]/)) {
    return;
   }

   const significantFigures = parseInt(d1 + d2);
   const multiplier = parseInt(d3);
   const resistance = significantFigures * Math.pow(10, multiplier);

   // Format the result
   let formattedValue;
   if (resistance >= 1000000) {
    formattedValue = (resistance / 1000000).toFixed(1) + 'MΩ';
   } else if (resistance >= 1000) {
   formattedValue = (resistance / 1000).toFixed(1) + 'kΩ';
  } else {
  formattedValue = resistance + 'Ω';
  }

  // Update displays
  document.getElementById('resultValue').textContent = formattedValue;
  document.getElementById('breakdownText').textContent =
  `${significantFigures} × 10${multiplier > 1 ? '⁰¹²³⁴⁵⁶⁷⁸⁹'[multiplier] : '¹'} = ${resistance.toLocaleString()}Ω`;
  document.getElementById('formulaText').textContent =
  `Significant Figures: ${significantFigures}, Multiplier: 10^${multiplier}`;

  // Determine likely type based on value
  let type = 'Linear';
  if (resistance >= 10000 && resistance <= 100000) {
   type = 'Linear (common)';
  } else if (resistance >= 1000000) {
  type = 'High Resistance';
  }
  document.getElementById('potType').textContent = type;
  }

  function loadExample(d1, d2, d3) {
   document.getElementById('digit1').value = d1;
   document.getElementById('digit2').value = d2;
   document.getElementById('digit3').value = d3;
   calculate();
  }

  // Initial calculation
  calculate();

  // Add keyboard navigation
  document.querySelectorAll('.code-input input').forEach(input => {
   input.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && input.value === '') {
     const prev = input.previousElementSibling;
     if (prev && prev.tagName === 'INPUT') {
      prev.focus();
     }
    }
   });
  });
  </script>

<!-- InstanceEndEditable -->
<script>
  // embeddedScript
  // Debugging tool to adjust root link per localhost test, and github pages.

  var href = location.href;
  var pgHref = document.querySelectorAll("[href], [src]");
  if (href.indexOf("localhost") > -1) {
   let pgHrefLen = pgHref.length;
   for (i = 0; i < pgHrefLen; i++) {
    let curVal;
    if (pgHref[i].hasAttribute("href")) {
     curVal = pgHref[i].getAttribute("href");
     pgHref[i].setAttribute("href", curVal.replace("https://isocialpractice.github.io/interactive-html", ""));
    }
    if (pgHref[i].hasAttribute("src")) {
     curVal = pgHref[i].getAttribute("src");
     pgHref[i].setAttribute("src", curVal.replace("https://isocialpractice.github.io/interactive-html", ""));
    }
   }
  }
</script>
</body>
<!-- InstanceEnd --></html>