---

запуск сервера node index.js   остановка ctrl+c
npm init все энтер 
npm install express pg
npm install nodemon

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.listen(PORT, ()=>console.log(`Сервер запущен на порту ${PORT}...`))



db js 

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

database sql

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



заходим в sql shell и пишем create database carsdb;
\connect carsdb
и пишем это 

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



создаем папку controllers в ней car.controller.js

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();



создаем папку routes в ней car.routes.js
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;



папку requests в ней car.requests.js

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}



в корне создаем index.html
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}...`))




создаем папку frontend внутри папку components внутри файл item.js

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};
}




в папке frontend файл main.js

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', ()=>{
        });
        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);
    })
});