1

I have a few javascript in my code which help with image slider, I also have an external file I connected to the HTML file which helps with scrolling up. It's all on the front-end, do I need to specifically get Javascript hosting?

let calcScrollValue = () => {
let scrollProgress = document.getElementById("progress");
let progressValue = document.getElementById("progress-value");
let pos = document.documentElement.scrollTop;
let calcHeight =
  document.documentElement.scrollHeight -
  document.documentElement.clientHeight;
let scrollValue = Math.round((pos * 100) / calcHeight);
if (pos > 100) {
  scrollProgress.style.display = "grid";
} else {
  scrollProgress.style.display = "none";
}
scrollProgress.addEventListener("click", () => {
  document.documentElement.scrollTop = 0;
});
scrollProgress.style.background = `conic-gradient(#03cc65 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;

};

window.onscroll = calcScrollValue; window.onload = calcScrollValue;

<div class="slider">
            <div class="slides">
              <!--radio buttons start-->
              <input type="radio" name="radio-btn" id="radio1">
              <input type="radio" name="radio-btn" id="radio2">
              <input type="radio" name="radio-btn" id="radio3">
              <input type="radio" name="radio-btn" id="radio4">
              <!--radio buttons end-->
              <!--slide images start-->
              <div class="slide first">
                <img src="Ac slide(4).png" alt="">
              </div>
              <div class="slide">
                <img src="Ac slide (2).png" alt="">
              </div>
              <div class="slide">
                <img src="a14 (2).png" alt="">
              </div>
              <div class="slide">
                <img src="RIANS.png" alt="">
              </div>
              <!--slide images end-->
              <!--automatic navigation start-->
              <div class="navigation-auto">
                <div class="auto-btn1"></div>
                <div class="auto-btn2"></div>
                <div class="auto-btn3"></div>
                <div class="auto-btn4"></div>
              </div>
              <!--automatic navigation end-->
            </div>
            <!--manual navigation start-->
            <div class="navigation-manual">
              <label for="radio1" class="manual-btn"></label>
              <label for="radio2" class="manual-btn"></label>
              <label for="radio3" class="manual-btn"></label>
              <label for="radio4" class="manual-btn"></label>
            </div>
            <!--manual navigation end-->
          </div>
          <!--image slider end-->
1
  • You don't need any special hosting to serve frontend JavaScript.
    – ceejayoz
    Commented Oct 3, 2022 at 17:59

0

You must log in to answer this question.

Browse other questions tagged .