.chore-chart-container{max-width:600px;margin:auto;padding:20px;border:1px solid #ccc;background:#f9f9f9;text-align:center;font-family:Arial,sans-serif}table{width:100%;border-collapse:collapse;margin-top:10px}th,td{border:1px solid #ddd;padding:8px;text-align:center}th{background:#007bff;color:white}button{margin-top:10px;padding:8px 15px;border:none;cursor:pointer;font-size:14px}.add-row{background:#007bff;color:white}.save-chart{background:#17a2b8;color:white}.download-btn{background:#28a745;color:white}.email-reminder{background:#dc3545;color:white}input,select{padding:5px}function addRow(child="",chore="",day="",completed=false,points=10){let table=document.getElementById("choreChart").getElementsByTagName("tbody")[0];let row=table.insertRow();row.innerHTML=` <td><input type="text" value="${child}" placeholder="Child's Name"></td><td><input type="text" value="${chore}" placeholder="Chore"></td><td><select><option ${day==="Monday" ? "selected":""}>Monday</option><option ${day==="Tuesday" ? "selected":""}>Tuesday</option><option ${day==="Wednesday" ? "selected":""}>Wednesday</option><option ${day==="Thursday" ? "selected":""}>Thursday</option><option ${day==="Friday" ? "selected":""}>Friday</option><option ${day==="Saturday" ? "selected":""}>Saturday</option><option ${day==="Sunday" ? "selected":""}>Sunday</option></select></td><td><input type="checkbox" ${completed ? "checked":""}onchange="updatePoints()"></td><td><input type="number" value="${points}" min="0" step="5" onchange="updatePoints()"></td><td><button onclick="removeRow(this)">X</button></td>`}function updatePoints(){let total=0;document.querySelectorAll("#choreChart tbody tr").forEach(row=>{let checkbox=row.cells[3].querySelector("input");let points=parseInt(row.cells[4].querySelector("input").value);if (checkbox.checked) total +=points});document.getElementById("totalPoints").textContent=total;saveChores();function saveChores(){let rows=document.querySelectorAll("#choreChart tbody tr");let chores=[];rows.forEach(row=>{let child=row.cells[0].querySelector("input").value;let chore=row.cells[1].querySelector("input").value;let day=row.cells[2].querySelector("select").value;let completed=row.cells[3].querySelector("input").checked;let points=parseInt(row.cells[4].querySelector("input").value);chores.push({child,chore,day,completed,points})});localStorage.setItem("savedChores",JSON.stringify(chores));updatePoints()}function loadChores(){let savedChores=JSON.parse(localStorage.getItem("savedChores")) || [];savedChores.forEach(chore=>addRow(chore.child,chore.chore,chore.day,chore.completed,chore.points));updatePoints()}<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script><script>document.addEventListener("DOMContentLoaded",function (){document.querySelector(".add-row").addEventListener("click",function (){addRow()})});function addRow(){let table=document.getElementById("choreChart").getElementsByTagName("tbody")[0];let row=table.insertRow();row.innerHTML=` <td><input type="text" placeholder="Child's Name"></td><td><input type="text" placeholder="Chore"></td><td><select><option>Monday</option><option>Tuesday</option><option>Wednesday</option><option>Thursday</option><option>Friday</option><option>Saturday</option><option>Sunday</option></select></td><td><input type="checkbox"></td><td><button onclick="removeRow(this)">X</button></td>`}function removeRow(button){button.parentNode.parentNode.remove()}function downloadChart(){const{jsPDF}=window.jspdf;const pdf=new jsPDF();html2canvas(document.querySelector(".chore-chart-container")).then(canvas=>{const imgData=canvas.toDataurl(image/png);const imgWidth=190;const imgHeight=(canvas.height * imgWidth) / canvas.width;pdf.addImage(imgData,"PNG",10,10,imgWidth,imgHeight);pdf.save("chore-chart.pdf")}).catch(error=>console.error("PDF Download Error:",error))}</script>}