// Main application logic
document.addEventListener('DOMContentLoaded', () => {
// Component data
const components = {
cpu: [
{ id: 1, name: 'AMD Ryzen 5 5600X', price: 199, cores: 6, threads: 12, speed: '3.7GHz', img: 'http://static.photos/technology/200x200/1' },
{ id: 2, name: 'Intel Core i5-12600K', price: 249, cores: 10, threads: 16, speed: '3.7GHz', img: 'http://static.photos/technology/200x200/2' },
{ id: 3, name: 'AMD Ryzen 7 5800X3D', price: 349, cores: 8, threads: 16, speed: '3.4GHz', img: 'http://static.photos/technology/200x200/3' },
{ id: 4, name: 'Intel Core i9-13900K', price: 599, cores: 24, threads: 32, speed: '3.0GHz', img: 'http://static.photos/technology/200x200/4' }
],
gpu: [
{ id: 1, name: 'NVIDIA GeForce RTX 3060', price: 329, vram: '12GB', img: 'http://static.photos/technology/200x200/5' },
{ id: 2, name: 'AMD Radeon RX 6700 XT', price: 379, vram: '12GB', img: 'http://static.photos/technology/200x200/6' },
{ id: 3, name: 'NVIDIA GeForce RTX 4070', price: 599, vram: '12GB', img: 'http://static.photos/technology/200x200/7' },
{ id: 4, name: 'AMD Radeon RX 7900 XTX', price: 999, vram: '24GB', img: 'http://static.photos/technology/200x200/8' }
],
ram: [
{ id: 1, name: '16GB DDR4 3200MHz', price: 59, type: 'DDR4', speed: '3200MHz', img: 'http://static.photos/technology/200x200/9' },
{ id: 2, name: '32GB DDR4 3600MHz', price: 99, type: 'DDR4', speed: '3600MHz', img: 'http://static.photos/technology/200x200/10' },
{ id: 3, name: '32GB DDR5 5600MHz', price: 149, type: 'DDR5', speed: '5600MHz', img: 'http://static.photos/technology/200x200/11' },
{ id: 4, name: '64GB DDR5 6000MHz', price: 249, type: 'DDR5', speed: '6000MHz', img: 'http://static.photos/technology/200x200/12' }
],
storage: [
{ id: 1, name: '500GB NVMe SSD', price: 49, type: 'NVMe', capacity: '500GB', img: 'http://static.photos/technology/200x200/13' },
{ id: 2, name: '1TB NVMe SSD', price: 79, type: 'NVMe', capacity: '1TB', img: 'http://static.photos/technology/200x200/14' },
{ id: 3, name: '2TB NVMe SSD', price: 149, type: 'NVMe', capacity: '2TB', img: 'http://static.photos/technology/200x200/15' },
{ id: 4, name: '4TB HDD + 1TB SSD', price: 199, type: 'Hybrid', capacity: '5TB', img: 'http://static.photos/technology/200x200/16' }
]
};
// Current build
const currentBuild = {
cpu: null,
gpu: null,
ram: null,
storage: null
};
// Render component options
function renderComponentOptions(type, containerSelector) {
const container = document.querySelector(containerSelector);
container.innerHTML = '';
components[type].forEach(component => {
const card = document.createElement('div');
card.className = 'component-card bg-white p-4 rounded-lg cursor-pointer border border-gray-200';
card.innerHTML = `
${component.name}
${component.cores ? `${component.cores}C/${component.threads}T` : ''} ${component.vram ? `VRAM: ${component.vram}` : ''} ${component.speed ? `Speed: ${component.speed}` : ''} ${component.capacity ? `Capacity: ${component.capacity}` : ''}
$${component.price}
`;
card.addEventListener('click', () => {
// Remove selected class from all cards in this container
document.querySelectorAll(`${containerSelector} .component-card`).forEach(c => {
c.classList.remove('selected');
});
// Add selected class to clicked card
card.classList.add('selected');
// Update current build
currentBuild[type] = component;
updateBuildSummary();
});
container.appendChild(card);
});
}
// Update build summary
function updateBuildSummary() {
const summaryContainer = document.getElementById('build-summary');
const totalPriceElement = document.getElementById('total-price');
const saveButton = document.getElementById('save-build');
let totalPrice = 0;
let summaryHTML = '';
for (const [type, component] of Object.entries(currentBuild)) {
if (component) {
totalPrice += component.price;
summaryHTML += `
${type.toUpperCase()}:
${component.name}
$${component.price}
`;
}
}
if (totalPrice > 0) {
summaryContainer.innerHTML = summaryHTML;
totalPriceElement.textContent = `$${totalPrice}`;
totalPriceElement.classList.add('price-updated');
setTimeout(() => {
totalPriceElement.classList.remove('price-updated');
}, 500);
saveButton.disabled = false;
} else {
summaryContainer.innerHTML = 'Select components to see your build
';
totalPriceElement.textContent = '$0';
saveButton.disabled = true;
}
}
// Save build
document.getElementById('save-build').addEventListener('click', () => {
const buildName = prompt('Give your build a name:');
if (buildName) {
alert(`Build "${buildName}" saved successfully!`);
// In a real app, you would save to localStorage or send to a server
}
});
// Initialize component selectors
renderComponentOptions('cpu', '#builder > div > div > div:nth-child(1) > div');
renderComponentOptions('gpu', '#builder > div > div > div:nth-child(2) > div');
renderComponentOptions('ram', '#builder > div > div > div:nth-child(3) > div');
renderComponentOptions('storage', '#builder > div > div > div:nth-child(4) > div');
// Feather icons replacement
feather.replace();
});