Uncaught ReferenceError: Particles is not defined-CodePudding

I'm trying to copy a website code from the internet and add it to my project. Here is the code from website but when I add it I get this error and the particles don't run. I have download and install particle.js from "https://github.com/marcbruederlin/particles.js/issues" this website. I dont share my CSS because i think its not important for you and Stackoverflow doesnt let me share too much codes.

/* Credit and Thanks:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/

window.onload = function () {
  Particles.init({
    selector: ".background"
  });
};
const particles = Particles.init({
  selector: ".background",
  color: ["#03dac6", "#ff0266", "#000000"],
  connectParticles: true,
  responsive: [
    {
      breakpoint: 768,
      options: {
        color: ["#faebd7", "#03dac6", "#ff0266"],
        maxParticles: 43,
        connectParticles: false
      }
    }
  ]
});

class NavigationPage {
  constructor() {
    this.currentId = null;
    this.currentTab = null;
    this.tabContainerHeight = 70;
    this.lastScroll = 0;
    let self = this;
    $(".nav-tab").click(function () {
      self.onTabClick(event, $(this));
    });
    $(window).scroll(() => {
      this.onScroll();
    });
    $(window).resize(() => {
      this.onResize();
    });
  }

  onTabClick(event, element) {
    event.preventDefault();
    let scrollTop =
      $(element.attr("href")).offset().top - this.tabContainerHeight   1;
    $("html, body").animate({ scrollTop: scrollTop }, 600);
  }

  onScroll() {
    this.checkHeaderPosition();
    this.findCurrentTabSelector();
    this.lastScroll = $(window).scrollTop();
  }

  onResize() {
    if (this.currentId) {
      this.setSliderCss();
    }
  }

  checkHeaderPosition() {
    const headerHeight = 75;
    if ($(window).scrollTop() > headerHeight) {
      $(".nav-container").addClass("nav-container--scrolled");
    } else {
      $(".nav-container").removeClass("nav-container--scrolled");
    }
    let offset =
      $(".nav").offset().top  
      $(".nav").height() -
      this.tabContainerHeight -
      headerHeight;
    if (
      $(window).scrollTop() > this.lastScroll &&
      $(window).scrollTop() > offset
    ) {
      $(".nav-container").addClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-first");
      $(".nav-container").addClass("nav-container--top-second");
    } else if (
      $(window).scrollTop() < this.lastScroll &&
      $(window).scrollTop() > offset
    ) {
      $(".nav-container").removeClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-second");
      $(".nav-container-container").addClass("nav-container--top-first");
    } else {
      $(".nav-container").removeClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-first");
      $(".nav-container").removeClass("nav-container--top-second");
    }
  }

  findCurrentTabSelector(element) {
    let newCurrentId;
    let newCurrentTab;
    let self = this;
    $(".nav-tab").each(function () {
      let id = $(this).attr("href");
      let offsetTop = $(id).offset().top - self.tabContainerHeight;
      let offsetBottom =
        $(id).offset().top   $(id).height() - self.tabContainerHeight;
      if (
        $(window).scrollTop() > offsetTop &&
        $(window).scrollTop() < offsetBottom
      ) {
        newCurrentId = id;
        newCurrentTab = $(this);
      }
    });
    if (this.currentId != newCurrentId || this.currentId === null) {
      this.currentId = newCurrentId;
      this.currentTab = newCurrentTab;
      this.setSliderCss();
    }
  }

  setSliderCss() {
    let width = 0;
    let left = 0;
    if (this.currentTab) {
      width = this.currentTab.css("width");
      left = this.currentTab.offset().left;
    }
    $(".nav-tab-slider").css("width", width);
    $(".nav-tab-slider").css("left", left);
  }
}

new NavigationPage();
/* Credit and Thanks:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="style.js"></script>
    
    
</head>
<body>
  <sectio >
    <h1>FRONTEND TRENDS</h1>
    <h3 ><span >B</span><span >E</span><span >N</span><span >E</span><span >F</span><span >I</span><span >T</span><span >S</span><span >&nbsp;</span><span >o</span><span >f</span><span >&nbsp;</span><span >T</span><span >E</span><span >C</span><span >H</span><span >N</span><span >O</span><span >L</span><span >O</span><span >G</span><span >I</span><span >E</span><span >S</span></h3>
    <div ><a  href="#tab-pwa">PWA</a><a  href="#tab-graphql">GraphQL</a><a  href="#tab-next">NEXT</a><a  href="#tab-typescript">TYPESCRIPT</a><a  href="#tab-deno">DENO</a><span ></span></div>
</sectio>
<main >
    <section  id="tab-pwa">
        <h1>PWA</h1>
        <h2>the best of both worlds...</h2>
    </section>
    <section  id="tab-graphql">
        <h1>GraphQL</h1>
        <h2>a query language for APIs</h2>
    </section>
    <section  id="tab-next">
        <h1>NEXT</h1>
        <h2>framework for Production</h2>
    </section>
    <section  id="tab-typescript">
        <h1>TYPESCRIPT</h1>
        <h2>giving you better tooling at any scale</h2>
    </section>
    <section  id="tab-deno">
        <h1>DENO</h1>
        <h2>a modern runtime</h2>
    </section>
</main>
<canvas ></canvas>
<script src="node_modules\particlesjs\dist/particles.min.js"></script>
</body>
</html>

CodePudding user response：

I solved it. i had to load the library before I use it. thats mean; i have to add my javascript file right before the closing body tag before it should i add my particle.js and before particle.js my style.js. it look likes;

solved by @Quentin. Thank you

<canvas ></canvas>
<script src="node_modules/particlesjs/dist/particles.js"></script>
<script src="style.js"></script>

CodePudding user response：

Solution

Copied code should include the libraries it depends on. Before the code that uses them (see comment on the question by @Quentin).

/* Credit and Thanks:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/

window.onload = function () {
  Particles.init({
    selector: ".background"
  });
};
const particles = Particles.init({
  selector: ".background",
  color: ["#03dac6", "#ff0266", "#000000"],
  connectParticles: true,
  responsive: [
    {
      breakpoint: 768,
      options: {
        color: ["#faebd7", "#03dac6", "#ff0266"],
        maxParticles: 43,
        connectParticles: false
      }
    }
  ]
});

class NavigationPage {
  constructor() {
    this.currentId = null;
    this.currentTab = null;
    this.tabContainerHeight = 70;
    this.lastScroll = 0;
    let self = this;
    $(".nav-tab").click(function () {
      self.onTabClick(event, $(this));
    });
    $(window).scroll(() => {
      this.onScroll();
    });
    $(window).resize(() => {
      this.onResize();
    });
  }

  onTabClick(event, element) {
    event.preventDefault();
    let scrollTop =
      $(element.attr("href")).offset().top - this.tabContainerHeight   1;
    $("html, body").animate({ scrollTop: scrollTop }, 600);
  }

  onScroll() {
    this.checkHeaderPosition();
    this.findCurrentTabSelector();
    this.lastScroll = $(window).scrollTop();
  }

  onResize() {
    if (this.currentId) {
      this.setSliderCss();
    }
  }

  checkHeaderPosition() {
    const headerHeight = 75;
    if ($(window).scrollTop() > headerHeight) {
      $(".nav-container").addClass("nav-container--scrolled");
    } else {
      $(".nav-container").removeClass("nav-container--scrolled");
    }
    let offset =
      $(".nav").offset().top  
      $(".nav").height() -
      this.tabContainerHeight -
      headerHeight;
    if (
      $(window).scrollTop() > this.lastScroll &&
      $(window).scrollTop() > offset
    ) {
      $(".nav-container").addClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-first");
      $(".nav-container").addClass("nav-container--top-second");
    } else if (
      $(window).scrollTop() < this.lastScroll &&
      $(window).scrollTop() > offset
    ) {
      $(".nav-container").removeClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-second");
      $(".nav-container-container").addClass("nav-container--top-first");
    } else {
      $(".nav-container").removeClass("nav-container--move-up");
      $(".nav-container").removeClass("nav-container--top-first");
      $(".nav-container").removeClass("nav-container--top-second");
    }
  }

  findCurrentTabSelector(element) {
    let newCurrentId;
    let newCurrentTab;
    let self = this;
    $(".nav-tab").each(function () {
      let id = $(this).attr("href");
      let offsetTop = $(id).offset().top - self.tabContainerHeight;
      let offsetBottom =
        $(id).offset().top   $(id).height() - self.tabContainerHeight;
      if (
        $(window).scrollTop() > offsetTop &&
        $(window).scrollTop() < offsetBottom
      ) {
        newCurrentId = id;
        newCurrentTab = $(this);
      }
    });
    if (this.currentId != newCurrentId || this.currentId === null) {
      this.currentId = newCurrentId;
      this.currentTab = newCurrentTab;
      this.setSliderCss();
    }
  }

  setSliderCss() {
    let width = 0;
    let left = 0;
    if (this.currentTab) {
      width = this.currentTab.css("width");
      left = this.currentTab.offset().left;
    }
    $(".nav-tab-slider").css("width", width);
    $(".nav-tab-slider").css("left", left);
  }
}

new NavigationPage();
/* Credit and Thanks:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="style.js"></script>
    
    
</head>
<body>
  <sectio >
    <h1>FRONTEND TRENDS</h1>
    <h3 ><span >B</span><span >E</span><span >N</span><span >E</span><span >F</span><span >I</span><span >T</span><span >S</span><span >&nbsp;</span><span >o</span><span >f</span><span >&nbsp;</span><span >T</span><span >E</span><span >C</span><span >H</span><span >N</span><span >O</span><span >L</span><span >O</span><span >G</span><span >I</span><span >E</span><span >S</span></h3>
    <div ><a  href="#tab-pwa">PWA</a><a  href="#tab-graphql">GraphQL</a><a  href="#tab-next">NEXT</a><a  href="#tab-typescript">TYPESCRIPT</a><a  href="#tab-deno">DENO</a><span ></span></div>
</sectio>
<main >
    <section  id="tab-pwa">
        <h1>PWA</h1>
        <h2>the best of both worlds...</h2>
    </section>
    <section  id="tab-graphql">
        <h1>GraphQL</h1>
        <h2>a query language for APIs</h2>
    </section>
    <section  id="tab-next">
        <h1>NEXT</h1>
        <h2>framework for Production</h2>
    </section>
    <section  id="tab-typescript">
        <h1>TYPESCRIPT</h1>
        <h2>giving you better tooling at any scale</h2>
    </section>
    <section  id="tab-deno">
        <h1>DENO</h1>
        <h2>a modern runtime</h2>
    </section>
</main>
<canvas ></canvas>
<!-- not needed as too late for the code, most likely won't work anyway due to the mix of  backslashes and forward slashes -->
<!-- script src="node_modules\particlesjs\dist/particles.min.js"></script-->
</body>
</html>