I am trying to integrate particle.js in my html file, I've ensured that app.js, particles.js and particles.min.js are in the same folder and the script tag is just before the body closes yet this thing doesn't work. I'm attaching my HTML and CSS code.
error: Uncaught TypeError: Cannot read properties of null (reading 'getElementsByClassName')
at window.particlesJS (particles.js:1495:30)
at app.js:14:1
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Pranshu Saxena">
<meta name="Declaration of description" content="This doc contains all about project info">
<title>MY info</title>
<link rel="stylesheet" href="project.css" type="text/css">
</head>
<body>
<div class="particles-js">
<header>
<nav aria-label="topnav" class="topnav" role="navigation">
<a href="#home" class="nav-link">Home</a>
<a href="#abtme" class="nav-link">About Me</a>
<a href="#myproj" class="nav-link">My Project</a>
<a href="#contacme" class="nav-link">Contact Me</a>
<button class="hamburger-menu">☰</button>
</nav>
</header>
<section class="content-section" role="region" aria-label="Main Content Section">
<div class="image-container">
<img src="jamesbond.jpg" alt="James bond" width="370" height="570">
</div>
<div class="text-container">
<h1 class="heading1">HI! A am Kerem</h1>
<h4 class="content1">Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam quis iusto at ipsum sed
eligendi voluptates praesentium veniam perspiciatis laborum minima amet consequuntur, veritatis commodi
eveniet minus voluptatem laboriosam! meow meow meow meow meow</h4>
</div>
</section>
<br><br>
<section class="progress-section">
<div class="progress-container">
<div class="skill-container">
<h1>MY SKILLS</h1>
<h3>HTML</h3>
<div class="progress-bar">
<div class="progress-line" data-percent="70" style="--percent: 70;"></div>
</div>
</div>
<div class="skill-container">
<h3>CSS</h3>
<div class="progress-bar">
<div class="progress-line" data-percent="70" style="--percent: 70;"></div>
</div>
</div>
<div class="skill-container">
<h3>JS</h3>
<div class="progress-bar">
<div class="progress-line" data-percent="10" style="--percent: 10;"></div>
</div>
</div>
<div class="skill-container">
<h3>Tailwind CSS</h3>
<div class="progress-bar">
<div class="progress-line" data-percent="0" style="--percent: 0;"></div>
</div>
</div>
</div>
<div class="paragraph-container">
<p ><h1>ABOUT ME</h1></p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem necessitatibus neque velit molestias voluptate molestiae repellat amet sit. Sequi debitis atque nam id unde corporis consequuntur asperiores cum vero eum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint soluta temporibus, atque suscipit eum eius hic veritatis molestiae quos ullam numquam, modi enim alias! Quod consequatur dignissimos dolores culpa ex. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet molestias voluptatem eveniet culpa at architecto ratione, libero odio iusto obcaecati. Eveniet sequi laudantium repudiandae quia iusto distinctio nostrum odit reiciendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, nostrum? Ea molestias quaerat non maiores eveniet, explicabo neque suscipit incidunt delectus laborum consectetur repellat architecto officiis dolores veniam dolorum similique.lorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatibus quasi magni, asperiores dolorum voluptatum ratione, eos consectetur tenetur non, adipisci officiis in minima quod unde numquam? Ratione, dignissimos veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non aliquam excepturi repudiandae voluptatibus aperiam atque, sunt culpa eveniet doloribus exercitationem cupiditate eum! Delectus rerum modi, nobis ullam fuga sunt ipsum? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente ducimus quidem, voluptate quas fugiat atque. Tenetur asperiores dolore culpa. Nobis nam consectetur itaque voluptatem rem adipisci vero in libero officia. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam deserunt quisquam officiis magni impedit, nobis, asperiores similique cumque, nisi qui cum odit! A aut harum totam, dolore in eius voluptate.
</p>
</div>
</section>
<br>
<br>
<div class="card-container">
<div class="card">
<img src="gdsc.png" alt="meow" style="width:100%">
<h1>Project 1</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur voluptatum impedit assumenda. Dolores doloribus officia incidunt rem dolorum harum quos quasi, vitae corrupti, cum aut sunt, dolor velit maxime eius!</p>
</div>
<div class="card">
<img src="gdsc.png" alt="meow" style="width:100%">
<h1>Project 2</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur voluptatum impedit assumenda. Dolores doloribus officia incidunt rem dolorum harum quos quasi, vitae corrupti, cum aut sunt, dolor velit maxime eius!</p>
</div>
<div class="card">
<img src="gdsc.png" alt="meow" style="width:100%">
<h1>Project 3</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur voluptatum impedit assumenda. Dolores doloribus officia incidunt rem dolorum harum quos quasi, vitae corrupti, cum aut sunt, dolor velit maxime eius!</p>
</div>
</div>
<br><br>
<section class="form">
<div class="form-heading">
<h1>TO CONTACT ME</h1>
</div>
<div class="main-form">
<form action="submit_form.php" method="post" class="real">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="name">Subject:</label>
<input type="text" id="subject" name="subject" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
<br>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>Phone Number: 123-456-7890</span>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>Email: [email protected]</span>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>Address: 123 Main St, Anytown, CA 12345</span>
</div>
</div>
</div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
body {
background-color: black;
color: #ddd;
font-family: sans-serif;
margin: 0;
padding: 0;
background-image: url(bimg1.png);
}
.topnav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
height: 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
transition: background-color 0.3s ease-in-out;
}
.topnav a {
color: #f2f2f2;
text-decoration: none;
font-size: 16px;
padding: 10px 16px;
transition: background-color 0.3s ease-in-out;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.hamburger-menu {
display: none;
background-color: transparent;
border: none;
cursor: pointer;
}
@media (max-width: 768px) {
.topnav {
flex-direction: column;
align-items: center;
}
.topnav a {
float: none;
display: block;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.hamburger-menu {
display: block;
margin-top: 10px;
}
}
.content-section {
display: flex;
align-items: center;
padding: 20px;
}
.image-container {
float: left;
margin-right: 20px;
}
.text-container {
text-align: justify;
}
.progress-section {
margin-top: 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.progress-container {
display: flex;
flex-direction: column;
}
.skill-container {
margin: 10px 10px;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
}
.progress-bar {
background-color: #fff;
height: 10px;
border-radius: 5px;
width: 560px;
overflow: hidden;
margin-top: 10px;
}
.progress-line {
background-color: purple;
height: 100%;
transition: width 0.3s ease-in-out;
padding: 2px;
}
.progress-line[data-percent] {
width: calc(var(--percent) / 100 * 100%);
}
.paragraph-container {
margin-left: 20px;
}
section.about-me {
padding-left: 400px;
}
.paragraph-container{
text-align: justify;
text-wrap:pretty;
margin-right: 50px;
margin-left: 40px;
}
.card-container {
display: flex;
justify-content: space-around;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
text-align: center;
font-family: arial;
margin: 10px;
}
.form {
text-align: center;
font-family: Arial, sans-serif;
background-color: black;
margin-left: 50px;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-heading {
text-align: center;
display: block;
margin-bottom: 20px;
}
.main-form {
background-color:black;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
label {
display: block;
margin-bottom: 8px;
}
input,
textarea {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.contact-info {
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: row;
-ms-flex-align: end ;
}
.contact-item {
display: flex;
align-items: flex-end;
/* align-items: center; */
margin-bottom: 15px;
flex-direction: row;
}
.contact-item i {
font-size: 24px;
color: blue;
margin-right: 10px;
}
.contact-item span:first-child {
font-weight: bold;
}
#particles-js {
background: black;
height: 100vh;
}
https://jsfiddle.net/webwizard1/wxsk9h7q/3/ I tried a lot of things including the particleJS function is only called after the DOM is fully loaded, and it checks if particleJS is defined before using it, yet nothing, please help
The mistake is here :
<body>
<div class="particles-js">
...
</div>
</body>
class attribute must be id.
<body>
<div id="particles-js">
...
</div>
</body>
This code will work.