Puppy Growth Chart
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.puppy-growth-container {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.growth-title {
color: #066aab;
text-align: center;
margin-bottom: 30px;
font-size: 28px;
font-weight: 600;
}
.chart-table-wrapper {
display: flex;
gap: 30px;
align-items: flex-start;
}
.chart-section {
flex: 1;
min-width: 0;
}
.table-section {
flex: 1;
min-width: 0;
}
.tab-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 2px solid #e0e0e0;
}
.tab-button {
padding: 12px 24px;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 500;
color: #666;
position: relative;
transition: all 0.3s ease;
}
.tab-button:hover {
color: #066aab;
}
.tab-button.active {
color: #066aab;
}
.tab-button.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: #066aab;
}
.chart-wrapper {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
position: relative;
height: 400px;
}
.data-table {
width: 100%;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
.data-table table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
background: #066aab;
color: white;
padding: 15px;
text-align: left;
font-weight: 600;
font-size: 14px;
}
.data-table td {
padding: 12px 15px;
border-bottom: 1px solid #e0e0e0;
font-size: 14px;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:hover {
background: #f5f5f5;
}
.weight-cell {
color: #333;
font-weight: 500;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.chart-table-wrapper {
flex-direction: column;
}
.growth-title {
font-size: 22px;
margin-bottom: 20px;
}
.chart-wrapper {
height: 300px;
padding: 15px;
}
.tab-button {
padding: 10px 20px;
font-size: 14px;
}
.data-table th,
.data-table td {
padding: 10px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.puppy-growth-container {
padding: 15px;
}
.tab-button {
padding: 8px 16px;
font-size: 13px;
}
.data-table th,
.data-table td {
padding: 8px;
font-size: 12px;
}
}
Puppy Growth Chart
| Age (Weeks) |
Male Weight (lbs) |
Female Weight (lbs) |
// ========================================
// CUSTOMIZE YOUR DATA HERE
// ========================================
const growthData = {
weeks: [8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52],
male: {
min: [10, 15, 22, 28, 35, 42, 48, 52, 55, 58, 60, 62],
max: [15, 22, 30, 38, 46, 54, 60, 65, 68, 70, 72, 75]
},
female: {
min: [8, 12, 18, 24, 30, 36, 42, 46, 48, 50, 52, 54],
max: [12, 18, 26, 32, 38, 44, 50, 54, 56, 58, 60, 62]
}
};
// ========================================
let currentGender = 'male';
let chart = null;
// Initialize chart
function initChart() {
const ctx = document.getElementById('growthChart').getContext('2d');
chart = new Chart(ctx, {
type: 'line',
data: {
labels: growthData.weeks,
datasets: [{
label: 'Minimum Weight',
data: growthData[currentGender].min,
borderColor: '#066aab',
backgroundColor: 'rgba(6, 106, 171, 0.1)',
borderWidth: 3,
fill: false,
tension: 0.4,
pointRadius: 4,
pointHoverRadius: 6
},
{
label: 'Maximum Weight',
data: growthData[currentGender].max,
borderColor: '#0891d1',
backgroundColor: 'rgba(8, 145, 209, 0.1)',
borderWidth: 3,
fill: '-1',
tension: 0.4,
pointRadius: 4,
pointHoverRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 15,
padding: 15,
font: {
size: 12
}
}
},
tooltip: {
mode: 'index',
intersect: false,
callbacks: {
label: function(context) {
return context.dataset.label + ': ' + context.parsed.y + ' lbs';
}
}
}
},
scales: {
x: {
title: {
display: true,
text: 'Age (Weeks)',
font: {
size: 14,
weight: 'bold'
}
},
grid: {
display: false
}
},
y: {
title: {
display: true,
text: 'Weight (lbs)',
font: {
size: 14,
weight: 'bold'
}
},
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.05)'
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
}
});
}
// Update chart when gender changes
function updateChart() {
chart.data.datasets[0].data = growthData[currentGender].min;
chart.data.datasets[1].data = growthData[currentGender].max;
chart.update();
}
// Switch gender tab
function switchGender(gender) {
currentGender = gender;
// Update tab buttons
const buttons = document.querySelectorAll('.tab-button');
buttons.forEach(btn => {
btn.classList.remove('active');
if ((gender === 'male' && btn.textContent === 'Male') ||
(gender === 'female' && btn.textContent === 'Female')) {
btn.classList.add('active');
}
});
updateChart();
}
// Populate data table
function populateTable() {
const tbody = document.getElementById('dataTableBody');
tbody.innerHTML = '';
growthData.weeks.forEach((week, index) => {
const row = document.createElement('tr');
row.innerHTML = `
${week} |
${growthData.male.min[index]} - ${growthData.male.max[index]} lbs |
${growthData.female.min[index]} - ${growthData.female.max[index]} lbs |
`;
tbody.appendChild(row);
});
}
// Initialize everything when page loads
window.addEventListener('load', function() {
initChart();
populateTable();
});
