---

CONTROLLERS
const db = require('../db.js');

class CarController{
    async createCar(req, res){
        const {name, description, price, img} = req.body;
        const newCar = await db.query(`INSERT INTO cars (name, description, price, img)
            VALUES ($1, $2, $3, $4) RETURNING *`, [name, description, price, img]);
        res.json(newCar.rows[0]);
    }
    async getCars(req, res){
        const cars = await db.query(`SELECT id, name, description, price, img FROM cars`);
        res.json(cars.rows);
    }
    async getCar(req, res){
        const id = req.params.id;
        const car = await db.query(`SELECT id, name, description, price, img FROM cars 
                                    WHERE id = $1`, [id]);
        res.json(car.rows[0]);
    }
    async updateCar(req, res){
        const {id, name, description, price, img} = req.body;
        const car = await db.query(`UPDATE cars SET name=$1, description=$2, price=$3, img=$4 
                                    WHERE id = $5 RETURNING *`, [name, description, price, img, id]);
        res.json(car.rows[0]);
    }
    async deleteCar(req, res){
        const id = req.params.id;
        await db.query(`DELETE FROM cars WHERE id = $1`, [id]);
    }
}
module.exports = new CarController();

components
car.model
export function createItem(name, description, price, img){
    let item = document.createElement('div');
    let image = document.createElement('img');
    let body = document.createElement('div');
    let h5 = document.createElement('h5');
    let pDescription = document.createElement('p');
    let pPrice = document.createElement('p');

    let btnGroup = document.createElement('div');
    let btnDetail = document.createElement('button');
    let btnDelete = document.createElement('button');

    //зададим стили
    item.classList.add('card', 'm-3');
    item.style.width = '18rem';
    item.style.float = 'left';

    image.classList.add('card-img-top');
    image.src = img;

    body.classList.add('card-body');

    h5.classList.add('card-title');
    h5.innerText = name;

    pDescription.classList.add('card-text');
    pDescription.innerText = description;

    pPrice.innerText = price;

    btnGroup.classList.add('btn-group', 'float-end');

    btnDetail.classList.add('btn', 'btn-primary');
    btnDetail.textContent = 'Подробнее';

    btnDelete.classList.add('btn', 'btn-danger');
    btnDelete.textContent = 'Удалить';

    //вложим элемемнты друг в друга
    btnGroup.append(btnDetail, btnDelete);
    body.append(h5, pDescription, pPrice, btnGroup);
    item.append(image, body);

    //вернем результат
    return {item, btnDetail, btnDelete};
}

main
import { getAllCars, addCar, deleteCar } from "../requests/car.requests.js";
import { createItem } from "./components/item.js";

let list = document.getElementById('car-list');

async function elementsGenerator() {
    const cars = await getAllCars();
    for (let car of cars){
        let listItem = createItem(car.name, car.description, car.price, car.img);
        listItem.btnDetail.addEventListener('click', ()=>{
            window.location.href = '/car/' + car.id;
        });
        listItem.btnDelete.addEventListener('click', ()=>{
            if(confirm('Вы действительно хотите удалить?')){
                deleteCar(car.id);
                listItem.item.remove();
            }
        })
        list.appendChild(listItem.item);
    }
}

document.addEventListener('DOMContentLoaded', async ()=>{
    await elementsGenerator();

    let form = document.getElementById('add-form');
    form.addEventListener('submit', async (e)=>{
        e.preventDefault();

        let carName = document.getElementById('car-name');
        let carDescription = document.getElementById('car-description');
        let carPrice = document.getElementById('car-price');
        let carImg = document.getElementById('car-img');

        let listItem = createItem(carName.value, carDescription.value, carPrice.value, carImg.value);
        await addCar(carName.value, carDescription.value, carPrice.value, carImg.value);
        list.appendChild(listItem.item);
    })
});

singecar
import { getOneCar } from "../requests/car.requests.js";

document.addEventListener('DOMContentLoaded', async ()=>{
    let carId =  window.location.pathname.split('/').pop();
    console.log(carId);

    let car = await getOneCar(carId);

    console.log(car.name);
    document.getElementById('car-img').src = car.img;
    document.getElementById('car-name').innerText = car.name;
    document.getElementById('car-description').innerText = car.description;
    document.getElementById('car-price').innerText = car.price;
})

requests
car.requests
async function getAllCars(){
    const responce = await fetch('/api/car', {
        method: 'GET'
    });
    const result = await responce.json();
    return result;
}
async function getOneCar(id){
    const responce = await fetch('/api/car/' + id, {
        method: 'GET'
    });
    const result = await responce.json();
    return result;
}
async function addCar(name, description, price, img){
    await fetch('/api/car', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({
            name: name,
            description: description,
            price: price,
            img: img
        })
    });
}
async function deleteCar(id){
    await fetch('/api/car/' + id, {
        method: 'DELETE'
    });
}
async function updateCar(id, name, description, price, img){
    await fetch('/api/car', {
        method: 'PUT',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({
            id: id,
            name: name,
            description: description,
            price: price,
            img: img
        })
    });
}
export {getAllCars, getOneCar, deleteCar, updateCar, addCar}

routes
car.routes
const Router = require('express');
const router = Router();
const carController = require('../controllers/car.controller.js');

router.post('/api/car', carController.createCar);
router.get('/api/car', carController.getCars);
router.get('/api/car/:id', carController.getCar);
router.delete('/api/car/:id', carController.deleteCar);
router.put('/api/car', carController.updateCar);

module.exports = router;

static html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Client-server app</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script type="module" src="../frontend/main.js"></script>
</head>
<body>
    <div class="container">
        <form id="add-form" class="row g-3">
            <div class="col-md-6">
              <input type="text" class="form-control" id="car-name" placeholder="Название автомобиля">
            </div>
            <div class="col-md-6">
                <input type="text" class="form-control" id="car-price" placeholder="Цена">
            </div>
            <div class="col-12">
              <input type="text" class="form-control" id="car-description" placeholder="Описание">
            </div>
            <div class="col-12">
                <input type="text" class="form-control" id="car-img" placeholder="Вставьте ссылку на фото">
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">Добавить</button>
            </div>
          </form>

          <div class="row mt-5 mb-2" id="car-list">
                <!--Тут будут генерироваться элементы-->
          </div>
    </div>
</body>
</html>

singlecar
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script type="module" src="../frontend/singecar.js"></script>
</head>
<body>
    <div class="card mb-3" style="max-width: 540px;">
        <div class="row g-0">
          <div class="col-md-4">
            <img class="img-fluid rounded-start" id="car-img">
          </div>
          <div class="col-md-8">
            <div class="card-body">
              <h5 class="card-title" id="car-name"></h5>
              <p class="card-text" id="car-description"></p>
              <p class="card-text" id="car-price"></p>
            </div>
          </div>
        </div>
      </div>
</body>
</html>

database
CREATE TABLE cars (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255),
    description VARCHAR(255),
    price VARCHAR(255),
    img VARCHAR(255)
);

db.js
const Pool = require('pg').Pool;
const pool = new Pool({
    user: "postgres",
    password: "root",
    host: "localhost",
    port: 5432,
    database: "testis31"
});
module.exports = pool;

index.js
const express = require('express');
const PORT = process.env.PORT || 8080;
const carRouter = require('./routes/car.routes.js');
const app = express();

app.use(express.json());
app.use(carRouter);
app.use(express.static(__dirname));

app.get('/', (req, res)=>{
    res.sendFile(__dirname + '/static/index.html');
})
app.get('/car/:id', (req, res)=>{
    res.sendFile(__dirname + '/static/singlecar.html');
})
app.get('/help', (req, res)=>{
    res.send('Hello from help');
})

app.listen(PORT, ()=>console.log(`Сервер запущен на порту ${PORT}...`))