Working on a school project where I have to create a Mach e-commerce platform. I have a csv file created For the products that need to be listed. Buttons have been created and linked in the html file and there is an included Css file that has all of the formatting for theme. I am having issue with getting the csv file to be included for some of the buttons in each of the category pages. also with the cart function how can i have items be selected to be added to cart with the total price being calculated
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repsher's Custom PCs</title>
<link rel="stylesheet" href="design.css">
</head>
<body>
<button class="cart-button" onclick="showPage('cart')">Go to Cart</button>
<div id="home" class="page">
<h1>Repsher's Custom PCs</h1>
<div class="grid-container">
<button onclick="showPage('cpu')">CPUs</button>
<button onclick="showPage('gpu')">GPUs</button>
<button onclick="showPage('motherboards')">Motherboards</button>
<button onclick="showPage('memory')">Memory</button>
<button onclick="showPage('storage')">Storage</button>
<button onclick="showPage('cases')">Cases</button>
<button onclick="showPage('psus')">Power Supplies</button>
<button onclick="showPage('cc')">CPU Coolers</button>
</div>
</div>
<div id="cpu" class="page">
<h1>Central Processing Units</h1>
<h2>Choose a Computer Processor</h2>
<div class="grid-container">
<button onclick="showPage('page1')">Ryzen 7 7700x</button>
<button onclick="showPage('page1')">Ryzen 9 7950X3D</button>
<button onclick="showPage('page1')">Intel Core I5-12600KF</button>
<button onclick="showPage('page1')">Intel Core I7-14700K</button>
<button onclick="showPage('page1')">Intel Core I9-14900K</button>
</div>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
</div>
<div id="gpu" class="page">
<h1>Graphics Processing Units</h1>
<h2>Choose a Graphics Card</h2>
<div class="grid-container">
<button onclick="showPage('page2')">MSI Ventus 2x Black OC RTX 4060</button>
<button onclick="showPage('page2')">Sapphire Pulse RX 7800xt</button>
<button onclick="showPage('page2')">PNY XLR8 Verto RGB RTX 4090</button>
<button onclick="showPage('page2')">Asrock Challenger Arc A750</button>
</div>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
</div>
<div id="motherboards" class="page">
<h1>Choose a Motherboard</h1>
<div class="grid-container">
<button onclick="showPage('page3')">B760 Gaming ATX LGA1700</button>
<button onclick="showPage('page3')">ROG STRIX B650-A AM5</button>
</div>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
</div>
<div id="memory" class="page">
<h1>System Memory (RAM)</h1>
<h2>Choose a RAM Kit</h2>
<div class="grid-container">
<button onclick="showPage('page4')">Corsair Vengeance 32GB</button>
<button onclick="showPage('page4')">G.Skill Trident Z5 RGB 64GB</button>
<button onclick="showPage('page4')">TEAMGROUP T-Create Expert 64GB</button>
</div>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
</div>
<div id="storage" class="page">
<h1>Hard Drives and Solid State Drives</h1>
<h2>Choose Mass Storage Drive</h2>
<div class="grid-container">
<button onclick="showPage('page5')">Samsung 980 Pro m.2 NVME 2TB</button>
<button onclick="showPage('page5')">Seagate BarraCuda 3.5 inch HDD 4TB</button>
<button onclick="showPage('page5')">Crucial MX500 2.5 inch Sata SSD 1TB</button>
</div>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
</div>
<div id="cases" class="page">
<h1>Choose a Case</h1>
<div class="grid-container">
<button onclick="showPage('page6')">Corsair 4000D Airflow</button>
<button onclick="showPage('page6')">NZXT H5 Flow</button>
<button onclick="showPage('page6')">Montech Air 903 Max</button>
<button onclick="showPage('page6')">CoolerMaster Masterbox Q300L</button>
</div>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
</div>
<div id="psus" class="page">
<h1>Choose a Power Supply Unit</h1>
<div class="grid-container">
<button onclick="showPage('page7')">Corsair RM750e</button>
<button onclick="showPage('page7')">CoolerMaster MWE Gold 850</button>
<button onclick="showPage('page7')">SeaSonic Focus GX-ATX</button>
</div>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
</div>
<div id="cc" class="page">
<h1>Choose a CPU Cooler</h1>
<div class="grid-container">
<button onclick="showPage('page8')">Stock CPU Cooler</button>
<button onclick="showPage('page8')">Corsair H150I Elite Capellix</button>
<button onclick="showPage('page8')">Noctua NH-D15 Chromax Black</button>
</div>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
</div>
<div id="cart" class="page">
<h2>Cart Page</h2>
<div class="cart-total">
Total Cost: $<span id="total-cost">0.00</span>
</div>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
</div>
<div id="page1" class="page">
<h2>Test for CPU redirect</h2>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
<button class="back-button" onclick="showPage('cpu')">Go back to CPU Selection</button>
</div>
<div id="page2" class="page">
<h2>Test for GPU redirect</h2>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
<button class="back-button" onclick="showPage('gpu')">Go back to GPU selection</button>
</div>
<div id="page3" class="page">
<h2>Test for Motherboards redirect</h2>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
<button class="back-button" onclick="showPage('motherboards')">Go back to Motherboard Selection</button>
</div>
<div id="page4" class="page">
<h2>Test for Memory redirect</h2>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
<button class="back-button" onclick="showPage('memory')">Go back to RAM Selection</button>
</div>
<div id="page5" class="page">
<h2>Test for Storage redirect</h2>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
<button class="back-button" onclick="showPage('storage')">Go back to Storage Selection</button>
</div>
<div id="page6" class="page">
<h2>Test for Cases redirect</h2>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
<button class="back-button" onclick="showPage('cases')">Go back to Case Selection</button>
</div>
<div id="page7" class="page">
<h2>Test for PSUs redirect</h2>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
<button class="back-button" onclick="showPage('psus')">Go back to Power Supply Selection</button>
</div>
<div id="page8" class="page">
<h2>Test for CPU Coolers redirect</h2>
<button class="home-button" onclick="showPage('home')">Go to Home</button>
<button class="back-button" onclick="showPage('cc')">Go back to CPU Coolers Selection</button>
</div>
<script src="script.js"></script>
<script>
function showPage(pageId) {
const pages = document.querySelectorAll('.page');
pages.forEach(page => page.style.display = 'none');
document.getElementById(pageId).style.display = 'block';
}
showPage('home');
</script>
</body>
</html>
CSS file
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
height: 100%;
background-color: #121212;
color: #ffffff;
position: relative;
}
.page {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
}
#home, #cpu, #gpu, #motherboards, #memory, #storage, #cases, #psus, #cc, #cart {
display: none;
justify-content: center;
align-items: center;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-content: center;
align-items: center;
width: 50%;
margin: auto;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #1f1f1f;
color: #ffffff;
border: none;
padding: 15px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #333333;
}
.home-button, .back-button {
background-color: #007bff;
margin-top: 20px;
font-size: 18px;
}
.back-button:hover {
background-color: #0056b3;
}
.home-button:hover {
background-color: #0056b3;
}
.cart-button {
background-color: #28a745;
font-size: 18px;
position: absolute;
top: 20px;
right: 20px;
}
.cart-button:hover {
background-color: #218838;
}
JS file
// Initialize total cost
let totalCost = 0;
// Function to add to the total cost
function addToTotalCost(amount) {
totalCost += amount;
updateTotalCost();
}
// Function to update the total cost display
function updateTotalCost() {
document.getElementById('total-cost').innerText = totalCost.toFixed(2);
}
// Example usage: add $10 to the total cost
// This can be triggered by various events in your application
addToTotalCost(10);
addToTotalCost(20);
// Function to fetch and parse CSV data
async function fetchCsvData(url) {
const response = await fetch(url);
const data = await response.text();
return parseCsvData(data);
}
// Function to parse CSV data
function parseCsvData(data) {
const rows = data.split('n');
return rows.map(row => row.split(','));
}
// Function to create buttons for Page 1
function createPage1Buttons(buttonData) {
const container = document.getElementById('page1-buttons');
container.innerHTML = ''; // Clear any existing buttons
buttonData.forEach(data => {
const button = document.createElement('button');
button.textContent = data[0]; // Assuming the button text is in the first column
button.onclick = () => alert(data[1]); // Assuming the button action is in the second column
container.appendChild(button);
});
}
// Load CSV data and create buttons when the document is ready
document.addEventListener('DOMContentLoaded', () => {
fetchCsvData('products.csv').then(createPage1Buttons);
});
CSV file
cpu-1,Ryzen 7 7700x,311.63,cpu
cpu-2,intel core i7-14700k,369.99,cpu
cpu-3,Ryzen 9 7950X3D,596.99,cpu
cpu-4,intel core i5 12600KF,139.99,cpu
cpu-5,intel core i9-14900K,581,cpu
ram-1,Vengance 32GB,114.99,ram
ram-2,Trident Z5 RGB 64GB,210.99,ram
ram-3,T-create Expert 64GB,159.99,ram
psu-1,RM750e,99.99,psu
psu-2,MWE gold 850,94.99,psu
psu-3,Focus GX-ATX,119.99,psu
storage-1,980 pro 2tb,177.95,storage
storage-2,BarraCuda 4tb,79.99,storage
storage-3,MX500 1tb,87.7,storage
gpu-1,Ventus 2x black oc rtx 4060,283,gpu
gpu-2,pulse rx 7800xt,509.99,gpu
gpu-3,XLR8 Verto RGB rtx 4090,1749.99,gpu
gpu-4,Challenger arc A750,179.99,gpu
case-1,4000d airflow,104.99,case
case-2,h5 flow,94.99,case
case-3,air 903 max,69,case
case-4,masterbox q300l,39.99,case
motherboard-1,B760 gaming atx lga1700,155,motherboard
motherboard-2,ROG STRIX b650-a ,219.99,motherboard
cpu-cooler-1,stock cpu cooler,0,cpu-cooler
cpu-cooler-2,h150i elite capellix,211.81,cpu-cooler
cpu-cooler-3,nh-d15 black,119.95,cpu-cooler
I have tried implementing the csv within the javascript portion with no avail