Перевести 2функции на JQuery на чистый Javascript [требует правки]

Есть 3 функции написанные на JQuery, скажу честно, Javascript знаю весьма посредственно, пользуюсь, только jQuery. Помогите пожалуйста перевести 3 функции на нативный JS. Так необходимо заказчику..

Первая функция:

 $(".img-item").on("click", function () {
    var $src = $(this).children("img").attr("src");
    var $img = $(this).parents(".preview").children(".main-img").children("img");
    $(".img-item").removeClass("active");
    $(this).addClass("active");
    console.log($src);
    console.log( $(this).parents(".preview").children(".main-img").children("img"));
    $($img).fadeOut('slow');
    setTimeout(function(){
        $($img).attr("src",$src);
    },600);
    setTimeout(function () {
        $($img).fadeIn('slow');
    },400);
})

Вот вторая:

  $(".block-size").on("click", function () {
    if($(this).hasClass("active")) {
        $(".block-size").removeClass("active");
        $(this).addClass("active")
    }
    else{
        $(".block-size").removeClass("active");
    }
    $(this).toggleClass("active");
    if($(".btn-add").hasClass("active")){
        $(".btn-add").removeClass("active").addClass("disabled").text("Add to bag");
    }
    idItemGenerator();
})
$(".block-color").on("click", function () {
    if($(this).hasClass("active")) {
        $(".block-color").removeClass("active");
        $(this).addClass("active");
    }
    else{
        $(".block-color").removeClass("active");
    }
    if($(".btn-add").hasClass("active")){
        $(".btn-add").removeClass("active").addClass("disabled").text("Add to bag");
    }
    $(this).toggleClass("active");
    idItemGenerator();
})
$(".btn-add").on("click", function () {
    if($(".block-color").hasClass("active") && $(".block-size").hasClass("active")){
        $(this).text("Product added");
        setTimeout(function(){
            $(".btn-add").text("Add to bag");
        },300);
        addItemInBasket(this);
        updateTotalPrice();
    }
})