JSFiddle - React, Tailwind, and code Playground

by LuckyCat

JavaScript

$(document).ready(function() {
  function scrollEnd() {
    $("html, body").animate({
      scrollTop: $('.buttons-block').offset().top
    }, 1000);
  }
  setTimeout(scrollEnd, 3000);
  var slideItem = $('.step-item');
  var widthItem = $(window).width();
  var i = 0;

  function slideChange(item, slide, width, speed) {
    var margin = slide * width;
    item.animate({
      left: -margin
    }, speed);
  }
  $(window).resize(function() {
    widthItem = $(window).width();
    slideChange(slideItem, i, widthItem, 0);
  });

  function loading() {
    var $titles = $('.load-item');
    var titleCount = $titles.length;
    var $result = $('.result-item');
    var i = 0;
    var load = setInterval(function() {
      if (i < titleCount - 1) {
        $('.load-item:visible').hide().next().fadeIn();
        $result.eq(i).fadeIn();
      } else {
        clearInterval(load);
        $('.step-final .buttons-block').fadeIn();
        $('.load-dot').fadeOut();
        scrollEnd();
      }
      i++;
    }, 1000);
  }
  $('.next-btn').not('.submit-btn').on('click', function() {
    if ($(this).hasClass('temp-btn')) {
      $('.step-block').addClass('active');
    } else {
      $('.step-block').removeClass('active');
    }
    if ($(this).hasClass('popup-btn')) {
      $('.popup-block').toggleClass('active');
    } else if ($(this).hasClass('close-popup')) {
      $('.popup-block').toggleClass('active');
      i++;
      slideChange(slideItem, i, widthItem, 0);
      loading();
    } else {
      i++;
      slideChange(slideItem, i, widthItem, 300);
      scrollEnd();
    }
  });
  $('.girl-list li.true').click(function() {
    $(this).toggleClass('active tr-selected');
  })
});