urbancodetester.tech
Your Choice Configurator
Customize Your Table & Chair
Table Preview
Chair Preview
Step 1: Choose Wood Species
Brown Maple
Rustic White Oak
Step 2: Choose Table Base Style
Avon Leg
Gordon Leg
Tremont Leg
Belmont Trestle
Lindsey Trestle
Madison Trestle
Trenton Trestle
Trenton Single Pedestal
Madison Single Pedestal
Lindsey Single Pedestal
Step 3: Choose Table Size
Step 4: Choose Chair Style
Ashley
Clayton
Kenton
Parma
Eastlake
Your Choice Configurator
Customize Your Table & Chair
Table Preview
Chair Preview
Step 1: Choose Wood Species
Brown Maple
Rustic White Oak
Step 2: Choose Table Base Style
Avon Leg
Gordon Leg
Tremont Leg
Belmont Trestle
Lindsey Trestle
Madison Trestle
Trenton Trestle
Trenton Single Pedestal
Madison Single Pedestal
Lindsey Single Pedestal
Step 3: Choose Table Size
Step 4: Choose Chair Style
Ashley
Clayton
Kenton
Parma
Eastlake
Step 5: Choose Stain
Default
Seashell
Husk
// Function to change species and display stain options function changeSpecies() { let species = document.getElementById("woodSpecies").value; let stainOptions = document.getElementById("stainOptions"); // Clear existing options stainOptions.innerHTML = ""; let stains = species === "Brown Maple" ? ["Seashell", "Light-Brown", "Husk", "Creek-Slate", "Charwood", "Black-Paint", "White-Paint", "Bel-Air"] : ["Smoke-RWO", "Seashell-RWO", "Sea-Drift-RWO", "River-Rock-RWO", "Light-Brown-RWO"]; stains.forEach(stain => { let img = document.createElement("img"); img.src = `https://urbancodetester.tech/wp-content/uploads/2025/02/${stain}.png`; img.alt = stain.replace("-", " "); img.style = "width: 50px; height: 50px; cursor: pointer; margin: 5px;"; img.onclick = function () { changeFinish(stain); }; stainOptions.appendChild(img); }); } // Function to apply the selected stain to the table image function changeFinish(finish) { let tableBase = document.getElementById("tableBase"); tableBase.src = `https://urbancodetester.tech/wp-content/uploads/2025/02/${finish}.png`; } // Function to update table sizes dynamically function updateTableSizes() { let tableStyle = document.getElementById("tableStyle").value; let tableSizeSelect = document.getElementById("tableSize"); tableSizeSelect.innerHTML = ""; let sizes = []; if (tableStyle.includes("Leg")) { sizes = ["42x54", "42x60", "42x72"]; } else if (tableStyle.includes("Trestle")) { sizes = ["42x60", "42x72", "42x84", "42x96"]; ["42x60", "42x72"].forEach(size => { for (let i = 1; i <= 4; i++) { sizes.push(`${size} + ${i} Leaves`); } }); } else if (tableStyle.includes("SP")) { sizes = ["48x48", "54x54", "60x60"]; ["48x48", "54x54"].forEach(size => { for (let i = 1; i <= 2; i++) { sizes.push(`${size} + ${i} Leaves`); } }); } sizes.forEach(size => { tableSizeSelect.innerHTML += `
${size}
`; }); } // Function to change table base image function changeBase() { let base = document.getElementById("tableStyle").value; document.getElementById("tableBase").src = `https://urbancodetester.tech/wp-content/uploads/2025/02/${base}.png`; } // Function to handle fabric selection display function toggleUpholstery() { let upholstery = document.getElementById("upholsteredSeat").value; let fabricOptions = document.getElementById("fabricOptions"); if (upholstery === "Yes") { fabricOptions.style.display = "block"; } else { fabricOptions.style.display = "none"; } } // Function to apply selected fabric to the chair image function changeFabric() { let fabric = document.getElementById("fabricStyle").value; let chair = document.getElementById("chair"); chair.src = `https://urbancodetester.tech/wp-content/uploads/2025/02/${fabric}.png`; }
