main.js

$(".menu").siblings().hide();
$("#submit").show();

//$("input[type='submit']").show();
//$("input[type='file']").show();
//$("#gallery").show();
//$('.menu, .submenu, .scarpe').val('select');

$(".menu, .submenu1, .submenu2, .misure_magliette").on("change", function(){
    val = $(this).val();
    console.log(val);
    $("."+val).show();


    console.log($(this).attr("class"));
    if($(this).attr("class") == "menu"){

        $("."+val).show();

        $("."+val).siblings().hide();
        $("#submit").show();
        $(".menu").show();
        console.log("ok")


    }
    if($(this).attr("class") == "submenu1" || $(this).attr("class") == "submenu2"){
        $("#gallery").show();

    }


//    $("."+val).val('select');
//    $("."+val).siblings().hide();

});


$("input[type='number']").mouseout(function(){
    console.log($(this).val());
})
$("input[type='submit']").mouseover(function(){

})


//var fileInput = document.getElementById('file_input');
//fileInput = $(".file_input");
cont =0;
rotate = 0;


$(".file_input")[cont].on("change", () => {
//cont++;
//rotate -= 90;


    div = document.createElement("div");

    for(let file of fileInput.files) {
        var image = file
        if (image) {
            var imageElement = new Image();
            imageElement.src = URL.createObjectURL(image);
            imageElement.width = 100;


            var imageElement2 = new Image();
            imageElement2.src = "https://img.icons8.com/material-two-tone/24/000000/rotate-left.png";

            //imageElement2.width = 100;

            var imageElement3 = new Image();
            imageElement3.src="https://img.icons8.com/material-rounded/24/000000/rotate-right.png";

            var imageElement4 = new Image();
            imageElement4.src="https://img.icons8.com/material-two-tone/24/000000/remove-image.png";

            document.getElementById('gallery').appendChild(div);
            div.appendChild(imageElement2);

            div.appendChild(imageElement3);
            div.appendChild(imageElement4);
            div.appendChild(imageElement);

            $(imageElement2).click(function(){
                rotate = rotate - 90;
                //    rrotate = rotate + 90;


                console.log(7)
                $(imageElement).css("transform", "rotate("+rotate+"deg)");
                // $(imageElement).css("transform", "rotate("+lrotate+"deg)");

            });

            $(imageElement3).click(function(){
                // lrotate = rotate - 90;
                rotate = rotate + 90;


                console.log(7)
                // $(imageElement).css("transform", "rotate("+lrotate+"deg)");
                $(imageElement).css("transform", "rotate("+rotate+"deg)");

            });

            $(imageElement4).click(()=>{
                $(imageElement).css("display","none");
            })


        }
    }
    $("img").click(function(){
        console.log(4);
    })
  cont++
});


//cont=0;
$("#addimg").click(()=>{
  //  cont++
    $(".file_input")[cont].click();
})


/*
imageElement2.addEventListener("click", ()=>{



})
*/