Add Ham Radio Technician study guide HTML

D David Veksler · 5 months ago d60555a62f6d437242e8c9f14c8b03d20487bfc0
Parent: a1dd911ea
Introduces a comprehensive HTML cheatsheet for the FCC Technician Class Amateur Radio license (2022-2026 pool). Includes a 4-week curriculum, reference tables, formulas, key resources, and progress tracking with Bootstrap-based styling.

1 file changed +549 −0

Diff

diff --git a/ham-radio-technician.html b/ham-radio-technician.html
new file mode 100644
index 0000000..0870f81
--- /dev/null
+++ b/ham-radio-technician.html
@@ -0,0 +1,549 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ham Radio Technician License Cheatsheet (2022-2026) | Study Guide</title>
+    <meta name="description" content="Comprehensive study guide for the FCC Technician Class Amateur Radio license (2022-2026 pool). Includes a 4-week curriculum, Ohm's law, phonetic alphabet, and key resources."/>
+    <meta name="keywords" content="ham radio, amateur radio, technician license, fcc exam, study guide, question pool 2022-2026, ohm's law, phonetic alphabet, arrl"/>
+    <link rel="canonical" href="https://cheatsheets.davidveksler.com/ham-radio-technician.html"/>
+
+    <!-- Open Graph Tags -->
+    <meta property="og:title" content="Ham Radio Technician License Cheatsheet"/>
+    <meta property="og:description" content="A structured 4-week study plan and reference guide for the FCC Technician Class Ham Radio Exam."/>
+    <meta property="og:type" content="article"/>
+    <meta property="og:url" content="https://cheatsheets.davidveksler.com/ham-radio-technician.html"/>
+    <meta property="og:image" content="images/ham-radio-technician.png"/>
+    <meta property="og:image:alt" content="Ham Radio Technician Study Guide Preview"/>
+
+    <!-- Twitter Card Tags -->
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="twitter:title" content="Ham Radio Technician License Cheatsheet"/>
+    <meta name="twitter:description" content="Detailed study curriculum and reference for the Ham Radio Technician Exam."/>
+    <meta name="twitter:image" content="images/ham-radio-technician.png"/>
+    <meta name="twitter:creator" content="@heroiclife"/>
+
+    <!-- Bootstrap 5.3.3 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+
+    <style>
+        :root {
+            /* Core Theme Colors */
+            --bs-body-bg: #0f172a;
+            --bs-body-color: #f1f5f9;
+            --card-bg: #1e293b;
+            --card-border: #334155;
+            --accent-color: #38bdf8;  /* Light Blue */
+            --success-custom: #4ade80; /* Bright Green */
+        }
+
+        body {
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            background-color: var(--bs-body-bg);
+            color: var(--bs-body-color);
+            line-height: 1.6;
+        }
+
+        /* Typography overrides for better contrast */
+        h1, h2, h3, h4, h5, h6 {
+            color: #ffffff;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+        }
+
+        .text-muted {
+            color: #cbd5e1 !important; /* Lighter grey for dark mode readability */
+        }
+
+        a {
+            color: var(--accent-color);
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+
+        a:hover {
+            color: #7dd3fc;
+            text-decoration: underline;
+        }
+
+        /* Header Styling */
+        .header-section {
+            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
+            border-bottom: 1px solid var(--card-border);
+            padding: 3rem 0;
+            margin-bottom: 2rem;
+        }
+
+        /* Card Styling */
+        .card {
+            background-color: var(--card-bg);
+            border: 1px solid var(--card-border);
+            border-radius: 0.75rem;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+        }
+
+        .card-header {
+            background-color: rgba(15, 23, 42, 0.6);
+            border-bottom: 1px solid var(--card-border);
+            font-weight: 600;
+            color: #fff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        /* Custom Components */
+        .badge-subelement {
+            background-color: rgba(56, 189, 248, 0.15);
+            color: var(--accent-color);
+            border: 1px solid rgba(56, 189, 248, 0.3);
+            margin-right: 0.5rem;
+            padding: 0.25em 0.6em;
+            border-radius: 4px;
+        }
+
+        .formula-box {
+            background-color: #0f172a;
+            border-left: 4px solid var(--accent-color);
+            padding: 1.25rem;
+            margin: 1rem 0;
+            font-family: 'Roboto Mono', monospace;
+            color: #e2e8f0;
+        }
+
+        .phonetic-table td {
+            padding: 0.6rem;
+            border-bottom: 1px solid var(--card-border);
+            color: #e2e8f0;
+        }
+
+        .resource-link {
+            display: block;
+            padding: 1rem;
+            background-color: #0f172a;
+            border-radius: 0.5rem;
+            margin-bottom: 0.75rem;
+            border: 1px solid var(--card-border);
+            transition: all 0.2s;
+        }
+
+        .resource-link:hover {
+            border-color: var(--accent-color);
+            background-color: #1e293b;
+            text-decoration: none;
+            transform: translateX(4px);
+        }
+
+        /* Checkbox Styling */
+        .progress-checkbox {
+            width: 1.3em;
+            height: 1.3em;
+            cursor: pointer;
+            border-color: var(--card-border);
+            background-color: #0f172a;
+        }
+        
+        .progress-checkbox:checked {
+            background-color: var(--success-custom);
+            border-color: var(--success-custom);
+        }
+
+        /* Highlight completed weeks */
+        .card-header.week-completed {
+            background-color: rgba(74, 222, 128, 0.15) !important;
+            border-bottom-color: rgba(74, 222, 128, 0.3);
+        }
+        
+        .card-header.week-completed span {
+            color: var(--success-custom) !important;
+        }
+
+        /* Print Styles */
+        @media print {
+            body {
+                background-color: white !important;
+                color: black !important;
+            }
+            .card {
+                background-color: white !important;
+                border: 1px solid #ccc !important;
+                box-shadow: none !important;
+                break-inside: avoid;
+            }
+            .card-header {
+                background-color: #f8f9fa !important;
+                color: black !important;
+                border-bottom: 1px solid #ccc !important;
+            }
+            .text-muted {
+                color: #666 !important;
+            }
+            .header-section {
+                background: none !important;
+                padding: 1rem 0;
+                color: black !important;
+            }
+            h1, h2, h3, h4, h5 {
+                color: black !important;
+            }
+            .formula-box {
+                background-color: #f8f9fa !important;
+                border: 1px solid #ccc !important;
+                color: black !important;
+            }
+            a {
+                text-decoration: underline;
+                color: black !important;
+            }
+            .no-print {
+                display: none !important;
+            }
+            .badge-subelement {
+                border: 1px solid #000;
+                color: #000;
+            }
+        }
+    </style>
+
+    <!-- JSON-LD Structured Data -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "TechArticle",
+      "headline": "Ham Radio Technician License Cheatsheet (2022-2026)",
+      "description": "A comprehensive study guide and curriculum for passing the FCC Technician Class Amateur Radio exam.",
+      "author": {
+        "@type": "Person",
+        "name": "David Veksler (AI Generated)"
+      },
+      "publisher": {
+        "@type": "Organization",
+        "name": "David Veksler Cheatsheets"
+      },
+      "datePublished": "2023-10-27",
+      "dateModified": "2023-10-27",
+      "keywords": "ham radio, amateur radio, technician license, fcc, study guide"
+    }
+    </script>
+</head>
+<body>
+
+    <header class="header-section">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-8">
+                    <h1 class="display-4 mb-2"><i class="bi bi-broadcast"></i> Ham Radio Technician</h1>
+                    <p class="lead text-muted mb-0">Study curriculum, electrical theory formulas, and operating rules for the 2022-2026 FCC Question Pool.</p>
+                </div>
+                <div class="col-lg-4 text-lg-end mt-3 mt-lg-0 no-print">
+                    <div class="d-flex flex-column gap-2">
+                        <span class="badge bg-success p-2 fs-6">Target: 26/35 Correct (74%)</span>
+                        <span class="badge bg-secondary p-2 fs-6">Pool: ~400 Questions</span>
+                        <a href="#resources" class="btn btn-outline-info btn-sm">Jump to Resources</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <main class="container">
+        
+        <!-- Exam Strategy -->
+        <div class="row mb-4">
+            <div class="col-12">
+                <div class="card border-warning">
+                    <div class="card-body">
+                        <h5 class="card-title text-warning"><i class="bi bi-lightbulb-fill"></i> The Strategy</h5>
+                        <p class="card-text">
+                            Don't memorize answers blindly. Learn the <strong>concepts</strong> for electrical theory, but use rote memorization for specific <strong>FCC rules and band limits</strong>. 
+                            Use the <a href="https://hamstudy.org" target="_blank" rel="noopener" class="fw-bold">HamStudy.org</a> "Study Mode" to focus on your weak points.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <!-- Left Column: Curriculum -->
+            <div class="col-lg-8">
+                <h2 class="mb-4 pb-2 border-bottom border-secondary">4-Week Curriculum</h2>
+
+                <!-- Week 1 -->
+                <div class="card">
+                    <div class="card-header">
+                        <span class="d-flex align-items-center"><i class="bi bi-calendar-check me-2"></i> Week 1: Rules & Operating</span>
+                        <div class="form-check form-switch no-print m-0">
+                            <input class="form-check-input progress-checkbox" type="checkbox" id="week1-check">
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <p class="text-muted fst-italic mb-3">Focus: The "Legal" Stuff. Memorize privileges and procedures.</p>
+                        
+                        <h5 class="mt-4 text-light"><span class="badge badge-subelement">T1</span> FCC Rules</h5>
+                        <ul>
+                            <li class="mb-2"><strong>License Classes:</strong> Technician, General, Amateur Extra.</li>
+                            <li class="mb-2"><strong>Term:</strong> Licenses are valid for <strong>10 years</strong>.</li>
+                            <li class="mb-2"><strong>Identification:</strong> You must transmit your call sign every <strong>10 minutes</strong> and at the end of a conversation.</li>
+                            <li class="mb-2"><strong>ITU Regions:</strong> The US is in <strong>ITU Region 2</strong>.</li>
+                        </ul>
+
+                        <h5 class="mt-4 text-light"><span class="badge badge-subelement">T2</span> Operating Procedures</h5>
+                        <ul>
+                            <li class="mb-2"><strong>CQ:</strong> "Calling any station."</li>
+                            <li class="mb-2"><strong>Repeaters:</strong> Listen for input/output offsets (usually +/- 600kHz for 2m).</li>
+                            <li class="mb-2"><strong>Simplex:</strong> Transmitting and receiving on the same frequency.</li>
+                            <li class="mb-2"><strong>Band Plans:</strong> Voluntary agreements on where to use specific modes (voice vs data).</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Week 2 -->
+                <div class="card">
+                    <div class="card-header">
+                        <span class="d-flex align-items-center"><i class="bi bi-lightning-charge me-2"></i> Week 2: The Science of Radio</span>
+                        <div class="form-check form-switch no-print m-0">
+                            <input class="form-check-input progress-checkbox" type="checkbox" id="week2-check">
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <p class="text-muted fst-italic mb-3">Focus: The "Technical" Stuff. Math and Physics.</p>
+
+                        <h5 class="mt-4 text-light"><span class="badge badge-subelement">T5</span> Electrical Principles</h5>
+                        <div class="formula-box">
+                            <div class="mb-2"><strong>Ohm's Law:</strong> E = I × R <span class="text-muted">(Volts = Amps × Ohms)</span></div>
+                            <div><strong>Power Law:</strong> P = I × E <span class="text-muted">(Watts = Amps × Volts)</span></div>
+                        </div>
+                        <ul>
+                            <li class="mb-2"><strong>Current (I):</strong> Measured in Amperes (A). Flow of electrons.</li>
+                            <li class="mb-2"><strong>Voltage (E):</strong> Measured in Volts (V). Electrical pressure.</li>
+                            <li class="mb-2"><strong>Resistance (R):</strong> Measured in Ohms (Ω). Opposition to flow.</li>
+                            <li class="mb-2"><strong>Power (P):</strong> Measured in Watts (W). Rate of energy use.</li>
+                        </ul>
+
+                        <h5 class="mt-4 text-light"><span class="badge badge-subelement">T3</span> Radio Wave Characteristics</h5>
+                        <ul>
+                            <li class="mb-2"><strong>VHF/UHF:</strong> "Line of sight" propagation. Signals travel in straight lines.</li>
+                            <li class="mb-2"><strong>HF (High Frequency):</strong> Can bounce off the ionosphere (skywave) for long distance.</li>
+                            <li class="mb-2"><strong>Wavelength:</strong> Higher Frequency = Shorter Wavelength.</li>
+                            <li class="mb-2"><strong>Formula:</strong> 300 / Freq (MHz) = Wavelength (meters). <br><span class="text-muted">Ex: 300 / 144 MHz ≈ 2 meters.</span></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Week 3 -->
+                <div class="card">
+                    <div class="card-header">
+                        <span class="d-flex align-items-center"><i class="bi bi-router me-2"></i> Week 3: The Gear</span>
+                        <div class="form-check form-switch no-print m-0">
+                            <input class="form-check-input progress-checkbox" type="checkbox" id="week3-check">
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <p class="text-muted fst-italic mb-3">Focus: Equipment, Modes, and Components.</p>
+
+                        <h5 class="mt-4 text-light"><span class="badge badge-subelement">T6</span> Electronic Components</h5>
+                        <ul>
+                            <li class="mb-2"><strong>Resistor:</strong> Limits current (Zig-zag line symbol).</li>
+                            <li class="mb-2"><strong>Capacitor:</strong> Stores energy in electric field (Two parallel lines symbol).</li>
+                            <li class="mb-2"><strong>Inductor:</strong> Stores energy in magnetic field (Coil symbol).</li>
+                            <li class="mb-2"><strong>Transistor:</strong> Switch or amplifier (Gain).</li>
+                            <li class="mb-2"><strong>LED:</strong> Light Emitting Diode (Visual indicator).</li>
+                        </ul>
+
+                        <h5 class="mt-4 text-light"><span class="badge badge-subelement">T8</span> Modulation Modes</h5>
+                        <ul>
+                            <li class="mb-2"><strong>FM (Frequency Modulation):</strong> Most common for local VHF/UHF voice. Clear audio, but signal drops abruptly (capture effect).</li>
+                            <li class="mb-2"><strong>SSB (Single Sideband):</strong> A form of AM used for long-distance HF voice. Narrow bandwidth.</li>
+                            <li class="mb-2"><strong>CW (Continuous Wave):</strong> Morse code. Narrowest bandwidth.</li>
+                            <li class="mb-2"><strong>Digital:</strong> FT8, DMR, Packet Radio.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Week 4 -->
+                <div class="card">
+                    <div class="card-header">
+                        <span class="d-flex align-items-center"><i class="bi bi-shield-check me-2"></i> Week 4: Antennas & Safety</span>
+                        <div class="form-check form-switch no-print m-0">
+                            <input class="form-check-input progress-checkbox" type="checkbox" id="week4-check">
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <p class="text-muted fst-italic mb-3">Focus: Getting signals out and staying alive.</p>
+
+                        <h5 class="mt-4 text-light"><span class="badge badge-subelement">T9</span> Antennas & Feed Lines</h5>
+                        <ul>
+                            <li class="mb-2"><strong>Dipole:</strong> Total length is approx 1/2 wavelength.</li>
+                            <li class="mb-2"><strong>Vertical (Ground Plane):</strong> Omnidirectional (transmits in all directions equally).</li>
+                            <li class="mb-2"><strong>Beam (Yagi):</strong> Directional antenna. High "Gain".</li>
+                            <li class="mb-2"><strong>Coax Cable:</strong> RG-58, RG-8. Losses increase with frequency and length.</li>
+                            <li class="mb-2"><strong>SWR (Standing Wave Ratio):</strong> Measure of match between radio and antenna. 1:1 is perfect. Above 2:1 is bad.</li>
+                        </ul>
+
+                        <h5 class="mt-4 text-light"><span class="badge badge-subelement">T0</span> Safety (CRITICAL)</h5>
+                        <ul>
+                            <li class="mb-2"><strong>RF Exposure:</strong> RF energy heats body tissue. Do not touch antennas while transmitting.</li>
+                            <li class="mb-2"><strong>Duty Cycle:</strong> Percentage of time you are transmitting.</li>
+                            <li class="mb-2"><strong>Grounding:</strong> Connect all equipment to a common ground point to prevent shock.</li>
+                            <li class="mb-2"><strong>Tower Safety:</strong> Never climb a tower without a safety belt and helper.</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Column: Reference & Resources -->
+            <div class="col-lg-4">
+                
+                <!-- Quick Reference -->
+                <div class="card mb-4">
+                    <div class="card-header bg-primary bg-gradient text-white">
+                        <span><i class="bi bi-table me-2"></i> Quick Reference</span>
+                    </div>
+                    <div class="card-body p-0">
+                        <table class="table table-hover mb-0 phonetic-table" style="background: transparent;">
+                            <thead>
+                                <tr><th colspan="2" class="text-center text-light">Phonetic Alphabet</th></tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>A - Alpha</td><td>N - November</td></tr>
+                                <tr><td>B - Bravo</td><td>O - Oscar</td></tr>
+                                <tr><td>C - Charlie</td><td>P - Papa</td></tr>
+                                <tr><td>D - Delta</td><td>Q - Quebec</td></tr>
+                                <tr><td>E - Echo</td><td>R - Romeo</td></tr>
+                                <tr><td>F - Foxtrot</td><td>S - Sierra</td></tr>
+                                <tr><td>G - Golf</td><td>T - Tango</td></tr>
+                                <tr><td>H - Hotel</td><td>U - Uniform</td></tr>
+                                <tr><td>I - India</td><td>V - Victor</td></tr>
+                                <tr><td>J - Juliet</td><td>W - Whiskey</td></tr>
+                                <tr><td>K - Kilo</td><td>X - X-ray</td></tr>
+                                <tr><td>L - Lima</td><td>Y - Yankee</td></tr>
+                                <tr><td>M - Mike</td><td>Z - Zulu</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <!-- Common Q Signals -->
+                <div class="card mb-4">
+                    <div class="card-header">
+                        <span><i class="bi bi-chat-text me-2"></i> Common Q-Signals</span>
+                    </div>
+                    <div class="card-body">
+                        <ul class="list-unstyled mb-0">
+                            <li class="mb-2"><span class="text-info fw-bold">QTH:</span> Location</li>
+                            <li class="mb-2"><span class="text-info fw-bold">QSL:</span> Acknowledge receipt</li>
+                            <li class="mb-2"><span class="text-info fw-bold">QSO:</span> A conversation</li>
+                            <li class="mb-2"><span class="text-info fw-bold">QSY:</span> Change frequency</li>
+                            <li class="mb-2"><span class="text-info fw-bold">QRM:</span> Interference (man-made)</li>
+                            <li class="mb-2"><span class="text-info fw-bold">QRN:</span> Static (natural/weather)</li>
+                            <li><span class="text-info fw-bold">QRZ:</span> "Who is calling me?"</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Resources Section -->
+                <div class="card" id="resources">
+                    <div class="card-header bg-success bg-gradient text-white">
+                        <span><i class="bi bi-link-45deg me-2"></i> Key Resources</span>
+                    </div>
+                    <div class="card-body">
+                        <p class="small text-muted mb-3">Use one study guide and one test engine.</p>
+                        
+                        <a href="https://hamstudy.org/" target="_blank" class="resource-link">
+                            <div class="d-flex align-items-center mb-1">
+                                <i class="bi bi-pc-display fs-4 me-3 text-white"></i>
+                                <div>
+                                    <div class="fw-bold text-white">HamStudy.org</div>
+                                    <div class="small text-muted">Best free adaptive test engine.</div>
+                                </div>
+                            </div>
+                        </a>
+
+                        <a href="https://www.kb6nu.com/study-guides/" target="_blank" class="resource-link">
+                            <div class="d-flex align-items-center mb-1">
+                                <i class="bi bi-file-earmark-pdf fs-4 me-3 text-white"></i>
+                                <div>
+                                    <div class="fw-bold text-white">KB6NU Study Guide</div>
+                                    <div class="small text-muted">Free "No-Nonsense" PDF guide.</div>
+                                </div>
+                            </div>
+                        </a>
+
+                        <a href="https://www.youtube.com/playlist?list=PL1_85UW7A_6z2cL0bOqGeX201WTCLFq7a" target="_blank" class="resource-link">
+                            <div class="d-flex align-items-center mb-1">
+                                <i class="bi bi-youtube fs-4 me-3 text-white"></i>
+                                <div>
+                                    <div class="fw-bold text-white">Ham Radio Crash Course</div>
+                                    <div class="small text-muted">Video playlist for all topics.</div>
+                                </div>
+                            </div>
+                        </a>
+
+                        <a href="http://www.arrl.org/find-an-amateur-radio-license-exam-session" target="_blank" class="resource-link">
+                            <div class="d-flex align-items-center mb-1">
+                                <i class="bi bi-geo-alt fs-4 me-3 text-white"></i>
+                                <div>
+                                    <div class="fw-bold text-white">Find an Exam Session</div>
+                                    <div class="small text-muted">Locate ARRL/W5YI exams near you.</div>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </main>
+
+    <footer class="text-center py-5 mt-5 border-top border-secondary">
+        <div class="container">
+            <p class="text-muted mb-0">
+                Created for educational purposes. 
+                <a href="index.php" class="text-info">Back to Cheatsheets</a>
+            </p>
+            <p class="small text-muted mt-2">
+                Last Updated: October 2023 | Based on FCC Element 2 Pool (Effective 2022-2026)
+            </p>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Progress Tracking Script -->
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const checkboxes = document.querySelectorAll('.progress-checkbox');
+            
+            // Load saved state
+            checkboxes.forEach(box => {
+                const savedState = localStorage.getItem(box.id);
+                if (savedState === 'true') {
+                    box.checked = true;
+                    updateCardStyle(box);
+                }
+                
+                // Add change listener
+                box.addEventListener('change', (e) => {
+                    localStorage.setItem(e.target.id, e.target.checked);
+                    updateCardStyle(e.target);
+                });
+            });
+
+            function updateCardStyle(checkbox) {
+                const cardHeader = checkbox.closest('.card-header');
+                if (checkbox.checked) {
+                    cardHeader.classList.add('week-completed');
+                } else {
+                    cardHeader.classList.remove('week-completed');
+                }
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file