add spread data from db to table in main view

This commit is contained in:
baiobelfer 2025-09-10 11:35:22 +00:00
parent 53d00bc5ae
commit e30d313d98
2 changed files with 44 additions and 35 deletions

View File

@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Kursy komputerowe</title> <title>Kursy komputerowe</title>
<link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/layout.css">
<script src="js/script.js" defer> </script>
</head> </head>
<body> <body>
<header> <header>
@ -17,7 +19,7 @@
</nav> </nav>
<main> <main>
<h3>Kursy komputerowe - programowanie</h3> <h3>Kursy komputerowe - programowanie</h3>
<table> <table id="tab">
<tr> <tr>
<th>Kurs</th> <th>Kurs</th>
<th>Czas trwania</th> <th>Czas trwania</th>

View File

@ -1,37 +1,44 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
document.getElementById('oblicz').addEventListener('click', function() { console.log("ok");
// Pobieranie wybranych kursów
const wybraneKursy = document.querySelectorAll('input[name="kurs"]:checked'); const fetchData = () => {
// Ceny kursów return fetch('./php/get.php')
const cenaReact = 1500; .then(response => {
const cenaJavaScript = 1200; if (!response.ok) {
throw new Error('Błąd pobierania danych');
// Obliczanie całkowitej kwoty }
let calkowitaKwota = 0; return response.json();
wybraneKursy.forEach(kurs => { })
if (kurs.value === 'React.js') { .then(data => {
calkowitaKwota += cenaReact; console.log("Dane załadowane:", data);
} else if (kurs.value === 'JavaScript') { renderTable(data); // Wywołaj funkcję renderującą tabelę
calkowitaKwota += cenaJavaScript; })
} .catch(error => {
}); console.error("Błąd:", error);
});
// Pobieranie liczby rat };
const iloscRat = parseInt(document.getElementById('raty').value);
// Pobieranie miasta // Funkcja do renderowania danych w tabeli
const miasto = document.getElementById('miasto').value; const renderTable = (data) => {
const table = document.getElementById('tab');
// Sprawdzanie poprawności danych
if (wybraneKursy.length === 0 || isNaN(iloscRat) || iloscRat <= 0) { // Usuń wszystkie rzędy po nagłówku (czyli od drugiego)
document.getElementById('wynik').textContent = 'Proszę wybrać przynajmniej jeden kurs i podać poprawną liczbę rat.'; while (table.rows.length > 1) {
return; table.deleteRow(1);
} }
// Obliczanie miesięcznej raty // Dodaj nowe wiersze dla każdego kursu
const rata = calkowitaKwota / iloscRat; data.forEach(row => {
const tr = document.createElement('tr');
// Wyświetlanie wyniku tr.innerHTML = `
document.getElementById('wynik').textContent = <td>${row.kurs}</td>
`Kurs odbędzie się w ${miasto}. Koszt całkowity: ${calkowitaKwota} zł. Płacisz ${iloscRat} rat po ${rata.toFixed(2)}`; <td>${row.czas_trwania}</td>
}); <td>${row.cena}</td>
`;
table.appendChild(tr);
});
};
// Uruchom pobieranie danych
fetchData();
}); });