Initial commit

src/App.jsx

@@ -11,7 +11,40 @@ import UjAutoForm from './components/UjAutoForm'
 function App() {
   const [autok, setAutok] = useState([])
 
-  
+  useEffect(() => {
+    fetch('http://localhost:3000/api/autok')
+    .then(res => res.json())
+    .then(data => setAutok(data))
+    .catch(error => console.error('Hiba', error));
+  }, [])
+
+  const hozzaAdas = (auto) => {
+    const requestOptions = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(auto)
+    };
+    fetch('http://localhost:3000/api/autok', requestOptions)
+        .then(response => response.json())
+        .then(() => {
+          fetch('http://localhost:3000/api/autok')
+            .then(res => res.json())
+            .then(data => setAutok(data));
+        });
+   }
+
+   const elemTorles = (id) => {
+    const requestOptions = {
+        method: 'DELETE',
+    };
+    fetch(`http://localhost:3000/api/autok/${id}`, requestOptions)
+        .then(response => response.json())
+        .then(() => {
+          fetch('http://localhost:3000/api/autok')
+            .then(res => res.json())
+            .then(data => setAutok(data));
+        });
+   }
 
 
   return (
@@ -27,6 +60,10 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<FoOldal />}>
+          <Route index element={<Navigate to='osszefoglalas' replace />}/>
+          <Route path="osszefoglalas" element={<Osszefoglalas autok={autok}/>}/>
+          <Route path="autolista" element={<AutoLista autok={autok} torles={elemTorles}/>}/>
+          <Route path="ujautoform" element={<UjAutoForm hozzaad={hozzaAdas}/>}/>
             {/* 3 alútvonal létrehozása: 
             -összefoglalás (alapértelmezett legyen) <Osszefoglalas autok={autok} />
             -autók listája <AutoLista autok={autok} torles={elemTorles} />

src/components/AutoKartya.jsx

@@ -6,11 +6,11 @@ const AutoKartya = ({ auto, torles }) => {
     return (
         <div className='card col-md-4'>
             <div className="card-body">
-                <h5 className="card-title">Márka</h5>
-                <h6 className="card-subtitle mb-2 text-muted">Típus</h6>
-                <p className="card-text">Évjárat - Szín - Uzemanyag</p>
-                <h5 className="card-title">Ár: xxxxxxxxxxxx Ft.</h5>
-                {/* Törlés gomb */}
+                <h5 className="card-title">{auto.marka}</h5>
+                <h6 className="card-subtitle mb-2 text-muted">{auto.tipus}</h6>
+                <p className="card-text">{auto.evjarat} - {auto.szin} - {auto.uzemanyag}</p>
+                <h5 className="card-title">Ár: {auto.ar} Ft.</h5>
+                <button onClick={() => torles(auto.id)}>Törlés</button>
             </div>
         </div>
     )

src/components/AutoLista.jsx

@@ -4,7 +4,8 @@ import AutoKartya from './AutoKartya'
 const AutoLista = ({autok, torles}) => {
   return (
     <div className='row mt-5'>
-      {/* Az autókat megjelenítő <AutoKartya /> komponensek */}
+      {autok.map(auto => (<AutoKartya key={auto.id} auto={auto} torles={torles} />))}
+      
     </div>
   )
 }

src/components/FoMenu.jsx

@@ -5,9 +5,9 @@ const FoMenu = () => {
     return (
         <nav className='nav d-flex gap-3'>
             {/* 3 alútvonalra navigáló főmenü */}
-            <a className='btn btn-outline-dark flex-fill' href="#">Összefoglalás</a>
-            <a className='btn btn-outline-dark flex-fill' href="#">Autók listája</a>
-            <a className='btn btn-outline-dark flex-fill' href="#">Új autó hozzáadása</a>
+            <a className='btn btn-outline-dark flex-fill' href="/osszefoglalas">Összefoglalás</a>
+            <a className='btn btn-outline-dark flex-fill' href="/autolista">Autók listája</a>
+            <a className='btn btn-outline-dark flex-fill' href="/ujautoform">Új autó hozzáadása</a>
 
         </nav>
     )

src/components/Osszefoglalas.jsx

@@ -2,8 +2,9 @@ import React from 'react'
 
 const Osszefoglalas = () => {
   return (
-    <div>Összefoglalas - egy rövid statisztika tetszőleges formátumban az autók számáról, azok összértékéröl,
-      a legrégebbi és a legújabb évjáratról.
+    <div>
+      Autók száma:
+      
     </div>
   )
 }

src/components/UjAutoForm.jsx

@@ -1,17 +1,40 @@
 import React from 'react'
+import { use } from 'react';
 import { useState } from 'react'
 
 const UjAutoForm = ({hozzaad}) => {
 
+    const [marka, setMarka] = useState("");
+    const [tipus, setTipus] = useState("");
+    const [evjarat, setEvjarat] = useState("");
+    const [szin, setSzin] = useState("");
+    const [ar, setAr] = useState("");
+    const [uzemanyag, setUzemanyag] = useState("");
+
+    const formSubmit = (sub) => {
+        sub.preventDefault();
+    
+        const hozzaadAuto = { marka, tipus, evjarat, szin, ar, uzemanyag };
+        hozzaad(hozzaadAuto);
+    
+        setMarka("");
+        setTipus("");
+        setEvjarat("");
+        setSzin("");
+        setAr("");
+        setUzemanyag("");
+    };
+    
+
     
 
 
     return (
         <div className='py-4 text-start'>
-            <form className="row g-3" >
+            <form className="row g-3" onSubmit={formSubmit} >
                 <div className="col-md-6">
                     <label htmlFor="marka" className="form-label">Márka</label>
-                    <select id="marka" className="form-select" name='marka' required  >
+                    <select id="marka" className="form-select" name='marka' value={marka} onChange={(sub) => setMarka(sub.target.value)} required  >
                         <option value={"Audi"}>Audi</option>
                         <option value={"BMW"}>BMW</option>
                         <option value={"Citroen"}>Citroen</option>
@@ -24,23 +47,23 @@ const UjAutoForm = ({hozzaad}) => {
                 </div>
                 <div className="col-md-6">
                     <label htmlFor="tipus" className="form-label">Típus</label>
-                    <input type="text" className="form-control" id="tipus" name="tipus" required   />
+                    <input type="text" className="form-control" id="tipus" name="tipus" value={tipus} onChange={(sub) => setTipus(sub.target.value)} required   />
                 </div>
                 <div className="col-md-6">
                     <label htmlFor="evjarat" className="form-label">Évjárat</label>
-                    <input type="number" className="form-control" id="evjarat" name="evjarat" required   />
+                    <input type="number" className="form-control" id="evjarat" name="evjarat" value={evjarat} onChange={(sub) => setEvjarat(sub.target.value)} required   />
                 </div>
                 <div className="col-md-6">
                     <label htmlFor="szin" className="form-label">Szín</label>
-                    <input type="text" className="form-control" id="szin" name="szin"    />
+                    <input type="text" className="form-control" id="szin" name="szin" value={szin} onChange={(sub) => setSzin(sub.target.value)}  />
                 </div>
                 <div className="col-md-6">
                     <label htmlFor="ar" className="form-label">Ár</label>
-                    <input type="number" className="form-control" id="ar" name="ar"   required />
+                    <input type="number" className="form-control" id="ar" name="ar" value={ar} onChange={(sub) => setAr(sub.target.value)}   required />
                 </div>
                 <div className="col-md-6">
                     <label htmlFor="uzemanyagform-label">Üzemanyag</label>
-                    <input type="text" className="form-control" id="uzemanyag" name="uzemanyag"   placeholder="benzin, dízel, elektromos stb." />
+                    <input type="text" className="form-control" id="uzemanyag" name="uzemanyag" value={uzemanyag} onChange={(sub) => setUzemanyag(sub.target.value)}  placeholder="benzin, dízel, elektromos stb." />
                 </div>
 
                 <div className="col-12">