Exclusif Exclusif - 9 months ago 31
Javascript Question

Make jQuery script work with plain javascript

So I have this simply jQuery script which hides and shows some elements on clicks and delays. What I need is to make this work with Javascript without any JS library.

Would really appreciate some help with this.

Here's the code:



$(document).ready(function () {
$(".bq1").click(function () {
$("#q1").fadeOut(0), $("#q2").fadeIn(500)
}), $(".bq2").click(function () {
$("#q2").fadeOut(0), $("#q3").fadeIn(500)
}), $(".bq3").click(function () {
$("#q3").fadeOut(0), $("#q4").fadeIn(500)
}), $(".bq4").click(function () {
window.scrollTo(0, 0), $("#content1").fadeOut(0), $("#content2").fadeIn(), setTimeout(function () {
$("#result1").fadeIn(1e3)
}, 3e3), setTimeout(function () {
$("#result2").fadeIn(1e3)
}, 4500), setTimeout(function () {
$("#result3").fadeIn(1e3)
}, 6e3), setTimeout(function () {
$("#content2").fadeOut()
}, 7500), setTimeout(function () {
$("#content3").fadeIn()
}, 7500)
})
});

#q2,#q3,#q4,#content1,#content2,#content3,.result {display: none; }
.bq1,.bq2,.bq3,.bq4 { cursor: pointer; padding: 3px; margin: 3px; background: grey; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="q1">
<p class="question"><strong>Question 1 of 4:</strong> How many years have you been with our service?</p>
<div class="button bq1">Less than 1 year</div>
<div class="button bq1">1-5 years</div>
<div class="button bq1">More than 5 years</div>
</div>
<div id="q2">
<p class="question"><strong>Question 2 of 4:</strong> Have you ever used our online support?</p>
<div class="button bq2">Yes</div>
<div class="button bq2">No</div>
</div>
<div id="q3">
<p class="question"><strong>Question 3 of 4:</strong> What is your primary use for our Service? </p>
<div class="button bq3">Work</div>
<div class="button bq3">Leisure</div>
<div class="button bq3">Others</div>
</div>
<div id="q4">
<p class="question"><strong>Question 4 of 4:</strong>Would you recommend our service to your friends and family?</p>
<div class="button bq4">Yes</div>
<div class="button bq4">No</div>
<div class="button bq4">Maybe</div>
</div>
</div>
<div class="Mayn-content" id="content2">
<h1 style="text-align:center;">Submitting Answers</h1>
<div class="loading"></div>
<p class="result" id="result1">Verifying Customer...</p>
<p class="result" id="result2">Checking Database...</p>
<p class="result" id="result3">Analyzing...</p>
</div>
<div class="Mayn-content" id="content3">
<h1 style="text-align:center;">Thank you for your opinion!</h1>
</div>





Thank you!

Answer

Something like this - I did not do all 4 results - the fadein and out can be cleaner (taken from http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/) but people normally charge for this kind of custom code

// fade out

function fadeOut(el) {
  el.style.opacity = 1;

  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
      el.style.display = "none";
    } else {
      requestAnimationFrame(fade);
    }
  })();
}

// fade in

function fadeIn(el, display) {
  el.style.opacity = 0;
  el.style.display = display || "block";

  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}
var cnt = 1;
var $ = function(sel) {
  return document.querySelectorAll(sel)
}
window.onload = function() {
  [].forEach.call($(".button"), function(button) {
    button.onclick = function() {
      var id = this.getAttribute("data-id");
      var next = "q" + (parseInt(id.substring(1),10)+1);
      console.log(id,next)
      fadeOut($("#" + id)[0]);
      if (next < "q4") {
        fadeIn($("#" + next)[0]);
      } else {
        window.scrollTo(0, 0);
        fadeOut($("#content1")[0]);
        var tId1 = setTimeout(function() {        
          fadeIn($("#content2")[0]);
          var tId2=setTimeout(function() {
            fadeIn($("#result1")[0]);
          },2000)
        },1000);  
      }
    }
  });
}
#q2,
#q3,
#q4,

#content2,
#content3,
.result {
  display: none;
}
.bq1,
.bq2,
.bq3,
.bq4 {
  cursor: pointer;
  padding: 3px;
  margin: 3px;
  background: grey;
}
<div id="content1">
  <div id="q1">
    <p class="question"><strong>Question 1 of 4:</strong> How many years have you been with our service?</p>
    <div class="button" data-id="q1">Less than 1 year</div>
    <div class="button" data-id="q1">1-5 years</div>
    <div class="button" data-id="q1">More than 5 years</div>
  </div>
  <div id="q2">
    <p class="question"><strong>Question 2 of 4:</strong> Have you ever used our online support?</p>
    <div class="button" data-id="q2">Yes</div>
    <div class="button" data-id="q2">No</div>
  </div>
  <div id="q3">
    <p class="question"><strong>Question 3 of 4:</strong> What is your primary use for our Service?</p>
    <div class="button" data-id="q3">Work</div>
    <div class="button" data-id="q3">Leisure</div>
    <div class="button" data-id="q3">Others</div>
  </div>
  <div id="q4">
    <p class="question"><strong>Question 4 of 4:</strong>Would you recommend our service to your friends and family?</p>
    <div class="button" data-id="q4">Yes</div>
    <div class="button" data-id="q4">No</div>
    <div class="button" data-id="q4">Maybe</div>
  </div>
</div>
<div class="Mayn-content" id="content2">
  <h1 style="text-align:center;">Submitting Answers</h1>
  <div class="loading"></div>
  <p class="result" id="result1">Verifying Customer...</p>
  <p class="result" id="result2">Checking Database...</p>
  <p class="result" id="result3">Analyzing...</p>
</div>
<div class="Mayn-content" id="content3">
  <h1 style="text-align:center;">Thank you for your opinion!</h1>
</div>