add spread data from db to table in main view
This commit is contained in:
parent
53d00bc5ae
commit
e30d313d98
4
i1.html
4
i1.html
@ -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>
|
||||||
|
|||||||
75
js/script.js
75
js/script.js
@ -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)} zł`;
|
<td>${row.czas_trwania}</td>
|
||||||
});
|
<td>${row.cena}</td>
|
||||||
|
`;
|
||||||
|
table.appendChild(tr);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Uruchom pobieranie danych
|
||||||
|
fetchData();
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user