Acne Severity Tracker & Treatment Guide

Log your daily symptoms, track progress, and learn about effective treatments.

Date

Calculated Severity Score

Lesion Count

Blackheads

Whiteheads

Papules (Red Bumps)

Pustules (Pus Bumps)

Notes (e.g., potential triggers, treatments used, stress level)

General Acne Treatment & Lifestyle Guide

This guide provides general advice. The best approach is personalized and should be discussed with a dermatologist.

For Mild Acne (Mainly blackheads/whiteheads):

Topical Treatments: Look for over-the-counter (OTC) products containing Salicylic Acid (unclogs pores) or Benzoyl Peroxide (kills bacteria).
Skincare Routine: Use a gentle, non-comedogenic cleanser twice a day. Avoid harsh scrubbing. Use a light, oil-free moisturizer.

For Moderate Acne (Inflamed papules/pustules):

Topical Treatments: Prescription-strength Benzoyl Peroxide or topical retinoids (like Tretinoin or Adapalene) are often recommended. These increase cell turnover and reduce inflammation.
Oral Medications: A dermatologist may prescribe oral antibiotics (like Doxycycline) for a limited time to reduce bacteria and inflammation.

For Severe Acne (Painful nodules/cysts):

Systemic Treatments: This level of acne requires a dermatologist's care. Treatment often involves oral medications like Isotretinoin (Accutane), which is very effective but has significant side effects and requires close monitoring.
Procedures: Corticosteroid injections can be used to quickly shrink large, painful cysts.

Key Lifestyle Factors:

Diet: Some studies link high-glycemic foods (sugar, refined carbs) and dairy to acne. Consider a balanced diet rich in whole foods.
Stress: Stress increases cortisol, which can trigger acne. Practice stress-management techniques.
Don't Pick: Picking or squeezing blemishes can worsen inflammation and lead to scarring.
Consistency is Key: It can take 2-3 months to see results from a new treatment routine. Be patient.

Disclaimer: This guide is for informational purposes only and is not a substitute for professional medical advice. Always consult a dermatologist for an accurate diagnosis and treatment plan.

No entries yet. Log your first entry on the "Daily Tracker" tab.

'; return; } let tableHTML = ` `; [...data].reverse().forEach(entry => { const lesionSummary = `B:${entry.lesions.blackheads} W:${entry.lesions.whiteheads} P:${entry.lesions.papules} Pu:${entry.lesions.pustules}`; tableHTML += ` `; }); tableHTML += `

Date	Severity	Lesions	Notes
${new Date(entry.date).toLocaleDateString()}	${entry.severityScore}	${lesionSummary}	${entry.notes \|\| '-'}

`; wrapper.innerHTML = tableHTML; } function renderProgressChart(data) { const ctx = document.getElementById('progressChart'); if (progressChart) progressChart.destroy(); progressChart = new Chart(ctx, { type: 'line', data: { labels: data.map(e => new Date(e.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })), datasets: [{ label: 'Severity Score', data: data.map(e => e.severityScore), borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.1, fill: true, }] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } }); } // --- TAB LOGIC --- window.changeTab = function(tabName) { const tabs = ['tracker', 'progress', 'guide']; tabs.forEach(tab => { document.getElementById(`${tab}-tab`).style.display = 'none'; document.getElementById(`tab-btn-${tab}`).classList.remove('active', 'border-blue-500', 'text-blue-600'); document.getElementById(`tab-btn-${tab}`).classList.add('text-slate-600'); }); document.getElementById(`${tabName}-tab`).style.display = 'block'; const activeBtn = document.getElementById(`tab-btn-${tabName}`); activeBtn.classList.add('active', 'border-blue-500', 'text-blue-600'); activeBtn.classList.remove('text-slate-600'); if (tabName === 'progress') { renderProgress(); } }; // --- PDF DOWNLOAD --- window.downloadPDF = function() { const data = getAcneData().sort((a, b) => new Date(a.date) - new Date(b.date)); if (data.length === 0) { alert("No data to generate a report. Please log some entries first."); return; } const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'mm', 'a4'); let yPos = 20; // Title doc.setFontSize(16); doc.setFont('helvetica', 'bold'); doc.text('Acne Progress Report', 105, 15, { align: 'center' }); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); doc.text(`Report Generated: ${new Date().toLocaleDateString()}`, 105, 20, { align: 'center' }); yPos = 30; // Chart try { const chartImg = progressChart.toDataURL('image/png', 1.0); doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Severity Trend', 15, yPos); yPos += 5; doc.addImage(chartImg, 'PNG', 15, yPos, 180, 90); yPos += 100; } catch (e) { console.error("Could not add chart to PDF:", e); } // History Table doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Detailed History', 15, yPos); yPos += 7; const tableHead = [['Date', 'Severity Score', 'Blackheads', 'Whiteheads', 'Papules', 'Pustules', 'Notes']]; const tableBody = data.map(entry => [ new Date(entry.date).toLocaleDateString(), entry.severityScore, entry.lesions.blackheads, entry.lesions.whiteheads, entry.lesions.papules, entry.lesions.pustules, entry.notes ]); doc.autoTable({ head: tableHead, body: tableBody, startY: yPos, theme: 'grid', headStyles: { fillColor: [41, 128, 185] }, styles: { fontSize: 8 }, columnStyles: { 6: { cellWidth: 50 } } // Notes column }); doc.save(`Acne-Progress-Report-${new Date().toISOString().slice(0,10)}.pdf`); }; // --- INITIAL LOAD --- changeTab('tracker'); calculateSeverity(); });