Javascript not working on page

[stephane]

Hi everyone,

I'm trying to implement this template I recently purchased on my Hubspot page: https://examples.growsurf.com/blue-referral-program.html

I was able to create the custom html page, and the stylesheet in Hubspot with no issue.

However, I seem to have issues running the javascript associated with the template in Hubspot. And I'm not so familiar with javascript, unfortunately.

From the template I just shared above, I have this so far: https://www.internationalteflacademy.com/?hs_preview=qnJzOTUs-24337114600

The page loads correctly with all the elements (html + css + javascript. I have yet to upload the images, but i can do that easily). However, the javascript that causes the animations (text that pops on scroll, faq drop-down, etc) on the page doesn't trigger. I checked the javascript code for errors, and I don't see any. Again - javascript isn't my strong suit.

Is there something I'm missing to make the javascript code work on my page, or to make it work with Hubspot?

Thank you for your help!

Here's the code: 

<script>

!function(){
const e=document.documentElement;
if (e.classList.remove("no-js"), e.classList.add("js"), document.body.classList.contains("has-animations")) {
const e=window.sr = ScrollReveal();
e.reveal(".hero-title, .hero-paragraph, .hero-cta", {
delay: 150,
duration: 1e3,
distance: "60px",
easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
origin: "bottom",
interval: 150
}), e.reveal(".hero-right-decoration", {
duration: 1e3,
distance: "40px",
easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
origin: "top"
}), e.reveal(".hero-left-decoration", {
duration: 1e3,
distance: "40px",
easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
origin: "bottom"
}), e.reveal(".clients li", {
delay: 300,
duration: 1e3,
rotate: {
y: 50
},
easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
interval: 150
}), e.reveal(".feature, .tabs-links li, .testimonial, .pricing-table, .pricing-faqs, .cta-inner", {
duration: 600,
distance: "40px",
easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
interval: 100,
origin: "bottom",
viewFactor: ".2"
});
}
const t = document.getElementsByClassName("accordion-title");
if (t.length)
for (let e = 0; e < t.length; e++) t[e].addEventListener("click", function () {
this.parentNode.classList.toggle("is-open");
const e = this.nextElementSibling;
e.style.maxHeight ? e.style.maxHeight = null : e.style.maxHeight = `${e.scrollHeight}px`;
});
const i = document.getElementsByClassName("tab-link");
if (i.length)
for (let e = 0; e < i.length; e++) i[e].addEventListener("click", function (t) {
t.preventDefault();
let n = i[e].parentNode.parentNode,
a = n.nextElementSibling.getElementsByClassName("tab-panel"),
s = n.getElementsByClassName("tab-link");
for (let e = 0; e < s.length; e++) s[e].classList.remove("is-active");
for (let e = 0; e < a.length; e++) a[e].classList.remove("is-active");
let l = this.getAttribute("href");
i[e].classList.add("is-active"), document.querySelector(l).classList.add("is-active");
});
}();

/*================================
= CHART JS =
================================*/
// If the webpage is not the refer-a-friend page
var pageIsDashboard = (window.location.pathname.indexOf("blue.html") >= 0);

if (pageIsDashboard) {
// line chart data
var buyerData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
fillColor: "rgb(53, 37, 211, 0.4)",
strokeColor: "#3525D3",
pointColor: "#fff",
pointStrokeColor: "#3525D3",
data: [203, 156, 99, 251, 305, 247]
}]
};
// get line chart canvas
var buyers = document.getElementById('buyers').getContext('2d');
// draw line chart
new Chart(buyers).Line(buyerData);
}

// generate email for grsf-form
function generateRandomEmail() {
function stringGen(len, num) {
var text = "";
var alpha = "abcdefghijklmnopqrstuvwxyz";
var alnum = "abcdefghijklmnopqrstuvwxyz0123456789";

for (var i = 0; i < len; i++) {
if (!num)
text += alnum.charAt(Math.floor(Math.random() * alnum.length));
else
text += alpha.charAt(Math.floor(Math.random() * alpha.length));
}
return text;
}

// stringGen(10) + "@" + stringGen(5) + "." + stringGen(3,true);
return stringGen(10) + "@" + stringGen(5) + ".com";
}

function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
// because unescape has been deprecated, replaced with decodeURI
//return unescape(dc.substring(begin + prefix.length, end));
return decodeURI(dc.substring(begin + prefix.length, end));
}

angular.module('app', []);

angular.module('app').controller("MainController", function () {
var vm = this;
var campaignId = "qku53z";
var cookieName = `${campaignId}.participantId`;

vm.newParticipantEmail = '';
if (!getCookie(cookieName)) {
vm.newParticipantEmail = generateRandomEmail();
}
});

/*===== End of CHART JS ======*/
</script>

[Anonymous]

It looks like you are missing these JS files from the example link, try adding these in the footer:

<!-- ChartJS -->
		<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>

		<!-- AngularJS -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>

--
Bryan Schneidewind
Manager of Web Development
Weidert Group