index.js

const phoneRegex = /^(8|\+7)(\s|\(|-)?(\d{3})(\s|\)|-)?(\d{3})(\s|-)?(\d{2})(\s|-)?(\d{2})$/;

// Проверяет, является ли файл изображением формата JPEG или PNG
function checkFileValid(file) {
    const validTypes = ['image/jpeg', 'image/png'];
    return validTypes.includes(file.type);
}

// Создаёт элемент для отображения выбранного файла с кнопкой удаления
function createFileBox(filename) {
    const box = document.createElement('div');
    box.classList.add('file-box');
    const name = document.createElement('p')
    name.textContent = filename;
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'X';
    deleteButton.onclick = () => box.remove();
    box.appendChild(name);
    box.appendChild(deleteButton);
    return box;
}

// Добавляет визуальный элемент выбранного файла в форму
function appendFile(file){
    const newNode = createFileBox(file.name);
    document.getElementById('form').insertBefore(newNode, document.getElementById('submitButton'))
}

// Проверяет корректность номера телефона и выводит сообщение об ошибке
function checkPhoneValid() {
    if (!phoneRegex.test(phone.value)){
        phone.setCustomValidity('Указан некорректный номер телефона')
    } else{
        phone.setCustomValidity('');
    }
}

// Открывает диалог выбора файла и добавляет файл, если он корректный
function chooseFile() {
    const input = document.createElement('input');
    input.type = 'file';
    
    input.onchange = function (e) {
        const file = e.target.files[0];
        if (!checkFileValid(file)){
            alert('Некорректный тип файла. Пожалуйста, выберите изображение в формате JPEG или PNG.');
        }
        else{
            appendFile(file);
        }
    }
    input.click();
}


function initDropzone() {
    const dropzone = document.getElementById('dropzone');
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.stopPropagation();
    })

    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        e.stopPropagation();
        const file = e.dataTransfer.files[0];
        if (!checkFileValid(file)){
            alert('Некорректный тип файла. Пожалуйста, выберите изображение в формате JPEG или PNG.');
        }
        else{
            appendFile(file);
        }
    })
}


function appendFile(file){
    const newNode = createFileBox(file.name);
    document.getElementById('form').insertBefore(newNode, document.getElementById('submitButton'))
}

function sendForm(event){
    event.preventDefault();
    form.reset()
    document.querySelectorAll('.file-box').forEach(box => box.remove());
}


function createFileBox(filename) {
    const box = document.createElement('div');
    box.classList.add('file-box');
    const name = document.createElement('p')
    name.textContent = filename;
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'X';
    deleteButton.onclick = () => box.remove();
    box.appendChild(name);
    box.appendChild(deleteButton);
    return box;
}


window.onload = () => {
    initDropzone();
    const phone = document.getElementById('phone');
    const form = document.getElementById('form');
    phone.addEventListener('keyup', checkPhoneValid)
    form.addEventListener('submit', sendForm)
}