<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ПР3 JQ</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<style>
    .wrapper {
        background-color: rgb(93, 68, 0);
        display: flex;
        justify-content: space-around;
    }

    .box {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        background-color: rgb(149, 113, 41);
        width: 1000px;
        height: 2000px;
    }

    .task {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 500px;
        height: auto;
        background-color: rgb(201, 151, 0);
        padding: 50px;
    }

    button {
        width: 250px;
        height: 100px;
        font-size: 1.5rem;
    }
    
    input {
        border-radius: 5px;
        width: 300px;
        height: 50px;
    }

    #regform {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .floating-box {
        position: relative;
        background-color: red;
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <div class="wrapper">
        <div class="box">
            <h1 style="color: rgb(246, 255, 0);">Задания по работе с событиями в jQuery</h1>
            <div class="task">
                <h1>Меняет цвет фона</h1>
                <button id="btn-bgchanger">Поменять</button>
            </div>
            <div class="task">
                <h1>Регистрация</h1>    
                <form method="" id="regform">
                    <input id="name-field" min="1" placeholder="Введите имя" type="text">
                    <input id="email-field"  min="1" placeholder="Введите адрес электронной почты" type="text">
                    <input id="phone-field"  min="1" placeholder="Введите номер телефона" type="text">
                    <input id="password-field"  min="1" placeholder="Введите пароль" type="password">
                    <input id="image-field" type="file" >
                    <button id="reg-btn" type="submit">Зарегистироваться</button>
                </form>
            </div>
            <div class="task">
                <h1>Сдвигающийся элемент при нажатии на стрелочки</h1>
                <div class="floating-box"></div>
            </div>
            <div class="task">
                <h1>Откройте консоль и увидите координаты курсора мыши</h1>
            </div>
            <div class="task">
                <h1>Эффект перетаскивания html элементов с классом "drag"</h1>
                <div class="drag" style="background-color: rebeccapurple; position: absolute; width: 50px; height: 50px;"></div>
                <div class="drag" style="background-color: rgb(52, 48, 255); position: absolute; width: 50px; height: 50px;"></div>
                <div class="drag" style="background-color: rgb(48, 255, 255); position: absolute; width: 50px; height: 50px;"></div>

            </div>
        </div>
    </div>
</body>
<script>
    // Задача 1
    function RandomNum(min, max) {
       return Math.round(Math.random() * (max - min) + min);
    }
    $("#btn-bgchanger").click(function(e) {
        $("body").css({"backgroundColor": `rgb(${RandomNum(0,255)}, ${RandomNum(0,255)}, ${RandomNum(0,255)})`});
    });

    // Задача 2
    $("#reg-btn").click(function(e) {
        let formFields = $("#regform").children();
        for (let i = 0; i < formFields.length; i++) {
            let child = formFields[i];
            if (child.tagName.toLowerCase() == "input" && child.getAttribute("type") != "file" && child.value.length <= 0) {
                alert(`Введите даные в поле под номером ${i+1}`); 
            } 
            else if (child.getAttribute("type") == "file" && child.files[0] == undefined) {     
                alert("Выберите аватарку");
            }
        }
    });

    // Задача 3
    var fBox = $(".floating-box");
    $(document).keydown(function(e) {
        if (e.key == "ArrowUp") {
            fBox.stop(true).animate({top: "-=100px"});
        }
        else if (e.key == "ArrowRight") {
            fBox.stop(true).animate({right: "-=100px"});
        }
        else if (e.key == "ArrowLeft") {
            fBox.stop(true).animate({right: "+=100px"});
        }
        else if (e.key == "ArrowDown") {
            fBox.stop(true).animate({top: "+=100px"});
        }
    });

    // Задача 4
    $(document).mousemove(function(e) {
        console.log("x:" + e.clientX + " y:" + e.clientY);
    });

    // Задача 5
    let isDragging = false;
    let offsetX, offsetY;
    let draggableElement = null;
    
    $(".drag").on("mousedown", function(e) {
        isDragging = true;
        draggableElement = $(this);
        offsetX = e.pageX - draggableElement.offset().left;
        offsetY = e.pageY - draggableElement.offset().top;
    });
    
    $(document).on("mousemove", function(e) {
        if (isDragging && draggableElement) {
            draggableElement.css({
                left: e.pageX - offsetX + 'px',
                top: e.pageY - offsetY + 'px'
            });
        }
    });
    
    $(document).on("mouseup", function() {
        isDragging = false;
        draggableElement = null;
    });
</script>
</html>