Size Chart

<body>

<div class="size-chart-container">
<div class="header">
<h2 class="title">Emme Halter Top Size Chart</h2>
</div>

<div class="country-nav" id="countryNav">
<div class="country-item active" data-country="usa">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/us.png?v=1746290432" alt="USA" class="flag">
<span class="country-name">USA</span>
</div>
<div class="country-item" data-country="uk">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/uk.png?v=1746290432" alt="UK" class="flag">
<span class="country-name">UK</span>
</div>
<div class="country-item" data-country="australia">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/australia.png?v=1746290407" alt="Australia" class="flag">
<span class="country-name">AU</span>
</div>
<div class="country-item" data-country="france">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/france.png?v=1746290407" alt="France" class="flag">
<span class="country-name">FR</span>
</div>
<div class="country-item" data-country="italy">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/italy.webp?v=1746293548" alt="Italy" class="flag">
<span class="country-name">IT</span>
</div>
<div class="country-item" data-country="japan">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/japan.webp?v=1746290310" alt="Japan" class="flag">
<span class="country-name">JP</span>
</div>
<div class="country-item" data-country="denmark">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/denmark.webp?v=1746290310" alt="Denmark" class="flag">
<span class="country-name">DK</span>
</div>
</div>

<div class="unit-toggle">
<div class="unit-buttons">
<button class="unit-btn active" data-unit="inches">IN</button>
<button class="unit-btn" data-unit="cm">CM</button>
</div>
</div>

<div class="table-container">
<table class="size-table">
<thead>
<tr>
<th>SIZE</th>
<th id="countryCol">USA</th>
<th>BUST</th>
<th>WAIST</th>
<th>HIP</th>
<th>LENGTH</th>
<th>CROP LENGTH</th>
</tr>
</thead>
<tbody id="sizeTableBody">

</tbody>
</table>
</div>

<div class="measure-container">
<div class="measure-image">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/bhanunibyjyoti-1683811952246.png?v=1746290865" alt="How to measure">
</div>
<div class="measure-points">
<h3 class="measure-title">How to Measure</h3>
<div class="point-item">
<div class="point-number">1</div>
<div class="point-title">LENGTH</div>
<div class="point-desc">Measure from the top of the shoulder seam down to the hem</div>
</div>
<div class="point-item">
<div class="point-number">2</div>
<div class="point-title">BUST</div>
<div class="point-desc">Measure around the fullest part, placing the tape close up under the arms</div>
</div>
<div class="point-item">
<div class="point-number">3</div>
<div class="point-title">WAIST</div>
<div class="point-desc">Measure around the narrowest part of your body, under the navel</div>
</div>
<div class="point-item">
<div class="point-number">4</div>
<div class="point-title">HIP</div>
<div class="point-desc">Measure 20cm down from your waist</div>
</div>
</div>
</div>
</div>

// Conversion factor inches to cm
const inchesToCm = 2.54;

// Current state
let currentCountry = 'usa';
let currentUnit = 'inches';

// DOM elements
let countryNav;
let tableBody;
let unitButtons;
let countryItems;
let countryCol;

// Initialize when DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Get DOM elements
countryNav = document.getElementById('countryNav');
tableBody = document.getElementById('sizeTableBody');
unitButtons = document.querySelectorAll('.unit-btn');
countryItems = document.querySelectorAll('.country-item');
countryCol = document.getElementById('countryCol');

// Set up country navigation with event delegation
countryNav.addEventListener('click', function(e) {
const countryItem = e.target.closest('.country-item');
if (countryItem && countryItem.dataset.country) {
switchCountry(countryItem.dataset.country);
}
});

// Set up unit toggle
unitButtons.forEach(btn => {
btn.addEventListener('click', function() {
switchUnits(this.dataset.unit);
});
});

// Initialize table data
updateTableData();
});

// Function to switch country
function switchCountry(country) {
currentCountry = country;

// Update active class on country items
countryItems.forEach(item => {
if (item.dataset.country === country) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});

// Update country column header
countryCol.textContent = country.toUpperCase();

// Update table data
updateTableData();
}

// Function to switch units
function switchUnits(unit) {
currentUnit = unit;

// Update active class on unit buttons
unitButtons.forEach(btn => {
if (btn.dataset.unit === unit) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});

// Update table data
updateTableData();
}

// Function to convert inches to cm
function convertToCm(inchValue) {
if (inchValue.includes('-')) {
const parts = inchValue.split('-').map(p => p.trim());
return parts.map(val => {
const num = parseFloat(val);
return isNaN(num) ? val : (num * inchesToCm).toFixed(1);
}).join(' - ');
} else {
const num = parseFloat(inchValue);
return isNaN(num) ? inchValue : (num * inchesToCm).toFixed(1);
}
}

// Function to update table data
function updateTableData() {
const data = sizeData[currentCountry];

// Clear existing rows
tableBody.innerHTML = '';

// Add new rows
data.forEach(row => {
const tr = document.createElement('tr');

// Add size cell
const sizeCell = document.createElement('td');
sizeCell.textContent = row[0];
tr.appendChild(sizeCell);

// Add country size cell
const countryCell = document.createElement('td');
countryCell.textContent = row[1];
tr.appendChild(countryCell);

// Add measurement cells
for (let i = 2; i < row.length; i++) {
const cell = document.createElement('td');
cell.setAttribute('data-inch', row[i]);

const value = currentUnit === 'inches' ? row[i] : convertToCm(row[i]);
cell.textContent = value;

if (currentUnit === 'cm') {
cell.textContent += ' cm';
}

tr.appendChild(cell);
}

tableBody.appendChild(tr);
});
}
</script>

</body>