Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const componentCards = document.querySelectorAll('.component-card');
+ const modal = document.getElementById('component-modal');
+ const closeModal = document.querySelector('.close-modal');
+ const componentOptions = document.querySelector('.component-options');
+ let selectedComponent = null;
+
+ const components = {
+ cpu: [
+ { name: 'AMD Ryzen 5 5600X', price: 299 },
+ { name: 'Intel Core i5-12600K', price: 319 },
+ { name: 'AMD Ryzen 7 5800X', price: 449 },
+ ],
+ motherboard: [
+ { name: 'MSI B550 Gaming Plus', price: 149 },
+ { name: 'ASUS ROG Strix B550-F', price: 189 },
+ { name: 'Gigabyte B550 AORUS Elite', price: 159 },
+ ],
+ ram: [
+ { name: 'Corsair Vengeance 16GB', price: 89 },
+ { name: 'G.Skill Ripjaws 32GB', price: 149 },
+ { name: 'Crucial Ballistix 16GB', price: 79 },
+ ],
+ gpu: [
+ { name: 'NVIDIA RTX 3060 Ti', price: 399 },
+ { name: 'AMD RX 6700 XT', price: 479 },
+ { name: 'NVIDIA RTX 3070', price: 499 },
+ ],
+ };
+
+ function updateBuildSummary() {
+ const selectedComponents = document.querySelectorAll('.component-card[data-selected]');
+ const totalComponents = selectedComponents.length;
+ let totalPrice = 0;
+
+ selectedComponents.forEach(card => {
+ const price = parseInt(card.dataset.price);
+ if (!isNaN(price)) {
+ totalPrice += price;
+ }
+ });
+
+ document.getElementById('total-components').textContent = totalComponents;
+ document.getElementById('total-price').textContent = `$${totalPrice}`;
+ }
+
+ function showModal(componentType) {
+ selectedComponent = componentType;
+ componentOptions.innerHTML = '';
+
+ components[componentType].forEach(component => {
+ const option = document.createElement('div');
+ option.className = 'component-option';
+ option.innerHTML = `
+
+
${component.name}
+
Price: $${component.price}
+
+ `;
+
+ option.addEventListener('click', () => {
+ const card = document.querySelector(`.component-card[data-type="${componentType}"]`);
+ card.querySelector('.selection-status').textContent = component.name;
+ card.dataset.selected = 'true';
+ card.dataset.price = component.price;
+ updateBuildSummary();
+ modal.style.display = 'none';
+ });
+
+ componentOptions.appendChild(option);
+ });
+
+ modal.style.display = 'block';
+ }
+
+ componentCards.forEach(card => {
+ const btn = card.querySelector('.select-btn');
+ btn.addEventListener('click', () => {
+ showModal(card.dataset.type);
+ });
+ });
+
+ closeModal.addEventListener('click', () => {
+ modal.style.display = 'none';
+ });
+
+ window.addEventListener('click', (e) => {
+ if (e.target === modal) {
+ modal.style.display = 'none';
+ }
+ });
+
+ document.getElementById('save-build').addEventListener('click', () => {
+ alert('Build saved successfully!');
+ });
+ });
