Roofers' Shingle Advisor

/* app.js */ const shingleData = { Certainteed: { type1: { name: "Certainteed Type 1", description: "Description for Certainteed Type 1", features: ["Feature 1", "Feature 2"], benefits: ["Benefit 1", "Benefit 2"], }, type2: { name: "Certainteed Type 2", description: "Description for Certainteed Type 2", features: ["Feature 3", "Feature 4"], benefits: ["Benefit 3", "Benefit 4"], }, }, GAF: { type1: { name: "GAF Type 1", description: "Description for GAF Type 1", features: ["Feature 5", "Feature 6"], benefits: ["Benefit 5", "Benefit 6"], }, type2: { name: "GAF Type 2", description: "Description for GAF Type 2", features: ["Feature 7", "Feature 8"], benefits: ["Benefit 7", "Benefit 8"], }, }, OwensCorning: { type1: { name: "Owens Corning Type 1", description: "Description for Owens Corning Type 1", features: ["Feature 9", "Feature 10"], benefits: ["Benefit 9", "Benefit 10"], }, type2: { name: "Owens Corning Type 2", description: "Description for Owens Corning Type 2", features: ["Feature 11", "Feature 12"], benefits: ["Benefit 11", "Benefit 12"], }, }, }; const brandSelect = document.getElementById("brand-select"); const typeSelect = document.getElementById("type-select"); const shingleInfo = document.getElementById("shingle-info"); function updateShingleInfo(brand, type) { try { if (!brand || !type) { shingleInfo.innerHTML = ""; return; } if (!shingleData[brand] || !shingleData[brand][type]) { throw new Error("Selected shingle information not found"); } const shingle = shingleData[brand][type]; shingleInfo.innerHTML = `

${shingle.name}

${shingle.description}

Features:

${feature}

Benefits:

${benefit}

`; } catch (error) { shingleInfo.innerHTML = `

${error.message}

`; } } brandSelect.addEventListener("change", () => { const selectedBrand = brandSelect.value; typeSelect.innerHTML = ''; if (selectedBrand && shingleData[selectedBrand]) { const types = Object.keys(shingleData[selectedBrand]); types.forEach((type) => { const option = document.createElement("option"); option.value = type; option.textContent = shingleData[selectedBrand][type].name; typeSelect.appendChild(option); }); } updateShingleInfo(selectedBrand, typeSelect.value); }); typeSelect.addEventListener("change", () => { updateShingleInfo(brandSelect.value, typeSelect.value); });