Upload files to "/"

get.php

@@ -0,0 +1,27 @@
+<?php
+$host = "localhost";
+$user = "root"; 
+$password = "";       
+$database = "samochody";
+
+$conn = new mysqli($host, $user, $password, $database);
+
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+
+$sql = "SELECT * FROM paliwa";
+$result = $conn->query($sql);
+
+$data = [];
+if ($result->num_rows > 0) {
+    while ($row = $result->fetch_assoc()) {
+        $data[] = $row;
+    }
+}
+
+header('Content-Type: application/json');
+echo json_encode($data);
+
+$conn->close();
+?>

main.js

@@ -0,0 +1,35 @@
+
+async function oblicz() {
+    const rodzaj = document.getElementById("rodzaj").value;
+    const ilosc = document.getElementById("ilosc").value;
+
+    if (!rodzaj || !ilosc) {
+        document.getElementById("wynik").textContent = "Proszę podać rodzaj paliwa i ilość.";
+        return;
+    }
+
+    try {
+     
+        const response = await fetch("get.php");
+        const data = await response.json();
+
+      
+        let cena = 0;
+        if (rodzaj == 1) {
+            cena = data.find(item => item.rodzaj.trim() === "benzyna")?.cena || 0;
+        } else if (rodzaj == 2) {
+            cena = data.find(item => item.rodzaj.trim() === "olej_napędowy")?.cena || 0;
+        }
+
+        
+        if (cena > 0) {
+            const koszt = ilosc * cena;
+            document.getElementById("wynik").textContent = `Koszt paliwa: ${koszt.toFixed(2)} ZŁ`;
+        } else {
+            document.getElementById("wynik").textContent = "Nie znaleziono wybranego rodzaju paliwa.";
+        }
+    } catch (error) {
+        document.getElementById("wynik").textContent = "Błąd pobierania danych.";
+        console.error("Error:", error);
+    }
+}

style.css

@@ -0,0 +1,54 @@
+* {
+    font-family: Cambria;
+    text-align: center;
+}
+
+header, footer {
+    background-color: rgb(120, 0, 46);
+    color: white;
+    padding: 5px;
+    font-size: 150%;
+    clear: both;
+}
+
+nav {
+    background-color: rgb(173, 20, 87);
+    text-align: center;
+}
+
+#lewy {
+    background-color: snow;
+    color: olivedrab;
+    width: 60%;
+    height: 322px;
+    text-align: center;
+    float: left;
+}
+
+#prawy {
+    background-color: rgb(173, 20, 87);
+    width: 40%;
+    height: 322px;
+    float: left;
+}
+
+#samochod {
+    margin: 40px;
+    padding: 10px;
+}
+
+#samochod:hover {
+    border: 1px dotted yellowgreen;
+}
+
+a {
+    padding: 0 50px;
+    color: yellowgreen;
+}
+
+table, td {
+    border: solid 1px olivedrab;
+}
+table {
+    width: 90%;
+}