AI Coding Intermediate

Code Review
Scorecard

Work through an AI-assisted review checklist to evaluate code quality. Learn the systematic approach that tools like Copilot, Cursor, and Claude Code use when reviewing code.

Load a Sample

code-review.js
0 lines
1

Quality Score

-- out of 100
0 Pass
0 Fail
0 Skip
Rate items to see your score

Readability Analysis

AI tools parse your code's AST (Abstract Syntax Tree) to check naming conventions, comment density, and formatting consistency. They compare against style guides like Airbnb, Google, or Standard.

Logic Verification

AI models trace execution paths looking for unreachable code, null pointer risks, off-by-one errors, and missing edge cases. They also flag cyclomatic complexity above thresholds.

Security Scanning

Tools like GitHub Copilot use pattern matching to detect hardcoded API keys, SQL injection vectors, XSS vulnerabilities, and insecure dependencies. They reference CVE databases in real-time.

Best Practices Check

AI reviews for DRY violations by comparing code similarity across functions. They check function length, parameter count, and whether error handling follows the fail-fast principle.

"; document.innerHTML = html; var a = r.items; var b = []; for (var i = 0; i <= a.length; i++) { b.push(a[i].val); } var c = 0; for (var i = 0; i < b.length; i++) { c = c + b[i]; } var d = c / b.length; // do more stuff var e = []; for (var i = 0; i < b.length; i++) { e.push(b[i] * 2); } var f = 0; for (var i = 0; i < e.length; i++) { f = f + e[i]; } var g = f / e.length; return {a:d,b:g,c:html}; } }` }; // ===================== STATE ===================== const state = {}; // Initialize state for all 12 items categories.forEach(cat => { cat.items.forEach(item => { state[item.id] = { rating: null, notes: '' }; }); }); // ===================== RENDER CHECKLIST ===================== function renderChecklist() { const panel = document.getElementById('checklist-panel'); panel.innerHTML = ''; categories.forEach(cat => { const cm = colorMap[cat.color]; const section = document.createElement('div'); section.className = 'rounded-2xl border border-white/5 bg-surface-elevated shadow-brand-sm overflow-hidden'; section.innerHTML = `
${cat.icon}

${cat.name}

0/${cat.items.length}
${cat.items.map(item => renderItem(item, cat.color)).join('')}
`; panel.appendChild(section); }); } function renderItem(item, color) { const s = state[item.id]; return `
${item.id}

${item.text}

`; } // ===================== INTERACTIONS ===================== function rate(id, rating) { // Toggle: if same rating, deselect if (state[id].rating === rating) { state[id].rating = null; } else { state[id].rating = rating; } renderChecklist(); // Re-show any open notes Object.keys(state).forEach(key => { if (state[key].notes) { const wrapper = document.getElementById('notes-wrapper-' + key); if (wrapper) wrapper.classList.remove('hidden'); } }); updateScore(); } function toggleNotes(id) { const wrapper = document.getElementById('notes-wrapper-' + id); if (wrapper) { wrapper.classList.toggle('hidden'); if (!wrapper.classList.contains('hidden')) { const ta = document.getElementById('notes-' + id); if (ta) ta.focus(); } } } function updateNotes(id, value) { state[id].notes = value; } // ===================== SCORE CALCULATION ===================== function updateScore() { let passes = 0, fails = 0, skips = 0; Object.values(state).forEach(s => { if (s.rating === 'pass') passes++; else if (s.rating === 'fail') fails++; else if (s.rating === 'skip') skips++; }); document.getElementById('pass-count').textContent = passes; document.getElementById('fail-count').textContent = fails; document.getElementById('skip-count').textContent = skips; // Update category progress categories.forEach(cat => { const rated = cat.items.filter(i => state[i.id].rating !== null).length; const el = document.getElementById('cat-progress-' + cat.name); if (el) el.textContent = `${rated}/${cat.items.length}`; }); const total = passes + fails; const scoreEl = document.getElementById('score-display'); const labelEl = document.getElementById('score-label'); const gaugeRing = document.getElementById('gauge-ring'); const gaugeGlow = document.getElementById('gauge-glow'); if (total === 0) { scoreEl.textContent = '--'; labelEl.textContent = 'Rate items to see your score'; labelEl.className = 'mt-4 text-sm font-semibold text-gray-500'; gaugeRing.style.strokeDashoffset = '534'; gaugeGlow.style.strokeDashoffset = '534'; return; } const score = Math.round((passes / total) * 100); const circumference = 534; const offset = circumference - (circumference * score / 100); scoreEl.textContent = score; scoreEl.classList.remove('score-pulse'); void scoreEl.offsetWidth; // force reflow scoreEl.classList.add('score-pulse'); gaugeRing.style.strokeDashoffset = offset; gaugeGlow.style.strokeDashoffset = offset; let color, label, labelClass; if (score >= 90) { color = '#22c55e'; label = 'Excellent! Production ready.'; labelClass = 'mt-4 text-sm font-semibold text-brand-400'; } else if (score >= 70) { color = '#fbbf24'; label = 'Good, but needs some attention.'; labelClass = 'mt-4 text-sm font-semibold text-accent-amber'; } else { color = '#fb7185'; label = 'Significant issues found.'; labelClass = 'mt-4 text-sm font-semibold text-accent-rose'; } gaugeRing.style.stroke = color; gaugeGlow.style.stroke = color; scoreEl.style.color = color; labelEl.textContent = label; labelEl.className = labelClass; } // ===================== LINE NUMBERS ===================== function updateLineNumbers() { const textarea = document.getElementById('code-input'); const lineNumbersEl = document.getElementById('line-numbers'); const lineCountEl = document.getElementById('line-count'); const lines = textarea.value.split('\n'); const count = lines.length; lineNumbersEl.innerHTML = lines.map((_, i) => `
${i + 1}
`).join(''); lineCountEl.textContent = `${count} line${count !== 1 ? 's' : ''}`; } // Sync scroll between textarea and line numbers document.addEventListener('DOMContentLoaded', () => { const textarea = document.getElementById('code-input'); const gutter = document.getElementById('line-numbers'); textarea.addEventListener('scroll', () => { gutter.style.transform = `translateY(-${textarea.scrollTop}px)`; }); }); // ===================== SAMPLES ===================== function loadSample(type) { const textarea = document.getElementById('code-input'); textarea.value = samples[type]; updateLineNumbers(); const labels = { clean: 'Clean Code', moderate: 'Needs Work', bad: 'Danger Zone' }; showToast(`Loaded "${labels[type]}" sample`, 'info'); } // ===================== RESET ===================== function resetAll() { // Reset all state Object.keys(state).forEach(key => { state[key] = { rating: null, notes: '' }; }); document.getElementById('code-input').value = ''; updateLineNumbers(); renderChecklist(); updateScore(); showToast('Scorecard reset', 'info'); } // ===================== EXPORT ===================== function exportReport() { let passes = 0, fails = 0, skips = 0; Object.values(state).forEach(s => { if (s.rating === 'pass') passes++; else if (s.rating === 'fail') fails++; else if (s.rating === 'skip') skips++; }); const total = passes + fails; const score = total > 0 ? Math.round((passes / total) * 100) : 0; let report = `CODE REVIEW SCORECARD REPORT\n`; report += `Generated: ${new Date().toLocaleString()}\n`; report += `${'='.repeat(50)}\n\n`; report += `OVERALL SCORE: ${total > 0 ? score + '/100' : 'N/A'}\n`; report += `Pass: ${passes} | Fail: ${fails} | Skip: ${skips}\n\n`; categories.forEach(cat => { report += `--- ${cat.name.toUpperCase()} ---\n`; cat.items.forEach(item => { const s = state[item.id]; const status = s.rating ? s.rating.toUpperCase() : 'NOT RATED'; report += ` [${status}] ${item.text}\n`; if (s.notes) { report += ` Notes: ${s.notes}\n`; } }); report += '\n'; }); report += `${'='.repeat(50)}\n`; report += `Report from danbyers.ai Code Review Scorecard\n`; navigator.clipboard.writeText(report).then(() => { showToast('Report copied to clipboard!', 'success'); }).catch(() => { showToast('Failed to copy report', 'error'); }); } // ===================== TIPS TOGGLE ===================== function toggleTips() { const content = document.getElementById('tips-content'); const chevron = document.getElementById('tips-chevron'); const toggle = document.getElementById('tips-toggle'); content.classList.toggle('open'); chevron.style.transform = content.classList.contains('open') ? 'rotate(180deg)' : 'rotate(0)'; toggle.setAttribute('aria-expanded', content.classList.contains('open')); } // ===================== TOAST ===================== function showToast(message, type = 'info') { const container = document.getElementById('toast-container'); const toast = document.createElement('div'); const colors = { success: 'border-brand-500/30 bg-brand-500/10 text-brand-400', error: 'border-accent-rose/30 bg-accent-rose/10 text-accent-rose', info: 'border-accent-cyan/30 bg-accent-cyan/10 text-accent-cyan', }; const icons = { success: '', error: '', info: '', }; toast.className = `toast-in flex items-center gap-2.5 px-4 py-3 rounded-xl border text-sm font-medium shadow-brand-md ${colors[type]}`; toast.innerHTML = `${icons[type]}${message}`; container.appendChild(toast); setTimeout(() => { toast.classList.remove('toast-in'); toast.classList.add('toast-out'); setTimeout(() => toast.remove(), 250); }, 2500); } // ===================== SCROLL REVEAL ===================== function initReveal() { const observer = new IntersectionObserver((entries) => { entries.forEach((entry, index) => { if (entry.isIntersecting) { setTimeout(() => { entry.target.classList.add('visible'); }, index * 80); observer.unobserve(entry.target); } }); }, { threshold: 0.1 }); document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); } // ===================== INIT ===================== document.addEventListener('DOMContentLoaded', () => { renderChecklist(); updateLineNumbers(); updateScore(); initReveal(); });