Mobile Projects — Electronics

Electronics Tools
Complete Guide

Electronics section-এর সম্পূর্ণ guide — 4টা interactive engineering tool, প্রতিটার কী কী করে সব বিস্তারিত।

Arduino-র মতো project-viewer নেই — প্রতিটা tool সরাসরি standalone HTML page। Engineering grid background সহ।

4 Standalone Tools No Project Viewer Needed Real-time Calculation Engineering Grid BG
Architecture Note

Electronics is Different

Arduino, SolidWorks, MATLAB সবই listing → project-viewer. Electronics-এ সেটা নেই — প্রতিটা tool-এর নিজস্ব সম্পূর্ণ standalone HTML page।

Flat Architecture — electronics-projects.html তে 4টা tool card আছে। প্রতিটা card সরাসরি সেই tool-এর standalone HTML file-এ link করে (যেমন resistor-calculator.html)। project-viewer.js এখানে use হয় না।

Tool pages গুলো: Projects Code/Electronics/ subfolder-এ থাকে।
Listing Page

Electronics Hub Page

electronics-projects.html — 4 tool card, engineering grid background।

Projects
Electronics Tools
Calculators & Quick Reference Guides
4 Essential Tools
Resistor Color Code Calculator
Decode resistor color bands — calculate resistance
4-6 BandReal-time
LED Resistor Calculator
Current-limiting resistor for LEDs
VoltageCurrentWattage
Capacitor Code Decoder
Decode ceramic capacitor markings
pF / nF / μFCode
Quick Reference
Formulas, tables, constants — expandable cards
FormulasTables
1
Engineering Grid Background
Subtle red grid pattern — repeating-linear-gradient CSS on the page body. Gives engineering schematic feel.
Page-এর background-এ subtle grid pattern — engineering feel।
2
Hero — "4 Essential Tools"
Bolt icon, "Electronics Tools", "Calculators & Quick Reference Guides". Static badge — no dynamic count (tools count doesn't change).
Static hero — project count dynamic নয়, সবসময় "4 Essential Tools"।
3
No Search / No Filter
Unlike Arduino/SolidWorks — there's no search toggle and no filter chips. Only 4 tools, no need for filtering.
Search বা filter নেই — মাত্র 4টা tool তাই দরকার নেই।
4
Tool Cards (→ Standalone Pages)
Each card is an <a> tag linking directly to the standalone HTML tool. Icon left, title+desc+meta, chevron right.
Card-এ tap করলে সরাসরি tool-এর নিজস্ব page-এ যায়।
4 Tools Deep Dive

Each Tool — Every Feature

প্রতিটা tool standalone — নিজের HTML, CSS, JS। Shared CSS: electronics-tools-shared.css।

Resistor Color Code Calculator
resistor-calculator.html · IEC 60062:2016
  • 4-Band, 5-Band, 6-Band mode selector — different button modes switch the number of color band selectors
  • Visual resistor rendering — color bands drawn in real-time as you select
  • Color dropdowns with color-swatch previews (Black, Brown, Red, Orange, Yellow, Green, Blue, Violet, Grey, White, Gold, Silver)
  • Real-time result: resistance value (Ω / kΩ / MΩ), tolerance %, temperature coefficient (6-band)
  • Follows IEC 60062:2016 standard
  • Works offline — no external dependency
Resistor-এর color band select করলে real-time resistance calculate হয় — 4/5/6 band mode।
LED Resistor Calculator
led-calculator.html
  • Input: Supply Voltage (Vs), Forward Voltage (Vf), Forward Current (If) in mA
  • Real-time calculation: R = (Vs − Vf) / If
  • Shows Power Dissipation (P = I²R, Watts) with heat warning if high wattage
  • Nearest standard resistor value from E12 / E24 series
  • LED color presets (Red 2.0V, Green 2.2V, Blue 3.2V, White 3.4V etc.)
  • Multi-LED configuration: Series / Parallel mode
LED-এর জন্য correct limiting resistor calculate করো — wattage, nearest standard value সহ।
Capacitor Code Decoder
capacitor-decoder.html
  • Decode 3-digit ceramic capacitor codes (e.g., 104 → 100 nF)
  • Shows value in pF, nF, and μF simultaneously
  • Tolerance code decoder (J=±5%, K=±10%, M=±20%)
  • Voltage rating code lookup (Z5U, X7R, Y5V dielectric types)
  • Reverse lookup: enter value in pF/nF/μF → get capacitor code
  • Common capacitor values reference table
Capacitor-এর 3-digit code decode করো — pF/nF/μF তিনটা unit-এই দেখায়।
Quick Reference
quick-reference.html · Expandable Cards
  • Expandable formula cards — tap to expand, see formula details, variables, examples
  • Multiple categories: Ohm's Law, Power, Capacitance, Inductance, RC Circuits, etc.
  • Each card shows: formula name, category tag, equation, variable definitions
  • Expand icon rotates on open, smooth CSS transition
  • Active card highlighted with red border glow
  • Search within formulas (if implemented via quick-reference.js)
Electronics formulas, constants, tables — card tap করলে expand হয়, details দেখায়।
Visual Demo

Resistor Calculator UI

Resistor Calculator
Band Mode
3-Band
4-Band
5-Band
6-Band
Br
Bk
Ye
Rd
Au
1.04 MΩ
1,040,000 Ω
±5% (Gold)
Band 1 — Digit 1
1
Band Mode Selector
4 buttons: 3-Band · 4-Band · 5-Band · 6-Band. Active mode highlighted red. Switches number of color band dropdowns.
৩ থেকে ৬ band — mode switch করলে band selector গুলো বদলে যায়।
2
Visual Resistor
Color bands drawn as colored rectangles. Updates in real-time as you change band colors. Visual match to physical resistor.
Real resistor-এর মতো color band দেখায় — selection-এর সাথে সাথে update হয়।
3
Real-time Result
Resistance value (auto-formatted: Ω/kΩ/MΩ), full value in ohms, tolerance %. Updates instantly on any change.
Band select করামাত্র resistance value, tolerance real-time update হয়।
4
Color Swatches
Color picker shows actual color swatches for each band. Selected color gets white border highlight glow.
প্রতিটা color-এর actual swatch দেখায় — select হলে highlight।
File Map

All Files

FileLocationRole
electronics-projects.htmlmobile/projects/Hub page — 4 tool cards, engineering grid background
electronics-tools-shared.cssProjects Code/Electronics/Shared styling across all 4 Electronics tools
resistor-calculator/resistor-calculator.htmlProjects Code/Electronics/Standalone resistor tool — 4/5/6-band, IEC 60062
resistor-calculator/resistor-calculator.jsProjects Code/Electronics/Band mode logic, color data, real-time calculation
led-calculator/led-calculator.htmlProjects Code/Electronics/LED resistor tool — voltage, current, wattage
led-calculator/led-calculator.jsProjects Code/Electronics/LED calculation logic, E12/E24 nearest values
capacitor-decoder/capacitor-decoder.htmlProjects Code/Electronics/Capacitor code decoder — pF/nF/μF conversion
capacitor-decoder/capacitor-decoder.jsProjects Code/Electronics/Ceramic code decode, reverse lookup logic
quick-reference/quick-reference.htmlProjects Code/Electronics/Formula cards — expandable, categorized
quick-reference/quick-reference.jsProjects Code/Electronics/Card expand/collapse logic, search
MATLAB Guide ← Projects Hub Guide