File size: 6,793 Bytes
bd6ef5e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
// 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 = `
<img src="${component.img}" alt="${component.name}" class="w-full h-32 object-contain mb-4">
<h4 class="font-semibold text-gray-800 mb-1">${component.name}</h4>
<p class="text-gray-600 text-sm mb-2">${component.cores ? `${component.cores}C/${component.threads}T` : ''} ${component.vram ? `VRAM: ${component.vram}` : ''} ${component.speed ? `Speed: ${component.speed}` : ''} ${component.capacity ? `Capacity: ${component.capacity}` : ''}</p>
<p class="text-yellow-600 font-bold">$${component.price}</p>
`;
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 += `
<div class="flex justify-between items-center py-2 border-b border-gray-200">
<span class="text-gray-700">${type.toUpperCase()}:</span>
<div class="flex items-center">
<span class="font-medium">${component.name}</span>
<span class="ml-2 text-yellow-600 font-bold">$${component.price}</span>
</div>
</div>
`;
}
}
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 = '<p class="text-gray-500">Select components to see your build</p>';
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();
}); |