https://envision22.netlify.app/script.js

1var idd=document.getElementById('particles-js')
2var widthh=window.innerWidth;
3console.log( widthh)
4if (widthh<800){
5  idd.setAttribute('id', '');
6
7}
8
9
10// Navabar
11const body = document.querySelector("body");
12const navbar = document.querySelector(".navbar");
13const menuBtn = document.querySelector(".menu-btn");
14const cancelBtn = document.querySelector(".cancel-btn");
15menuBtn.onclick = () => {
16  navbar.classList.add("show");
17  menuBtn.classList.add("hide");
18  body.classList.add("disabled");
19};
20cancelBtn.onclick = () => {
21  body.classList.remove("disabled");
22  navbar.classList.remove("show");
23  menuBtn.classList.remove("hide");
24};
25window.onscroll = () => {
26  this.scrollY > 20
27    ? navbar.classList.add("sticky")
28    : navbar.classList.remove("sticky");
29};
30
31// End Navabar
32
33// Clock
34let daysItem = document.querySelector("#days");
35let hoursItem = document.querySelector("#hours");
36let minItem = document.querySelector("#min");
37let secItem = document.querySelector("#sec");
38let monItem = document.querySelector("#mon");
39
40let countDown = () => {
41
42  var countDownDate = new Date("Nov 22, 2022 10:00:00").getTime();
43  var now = new Date().getTime();
44  var distance = countDownDate - now;
45
46  
47  let mon =Math.floor(distance/ 1000/ 60 / 60/ 24/ 30.44)
48  
49mon=Math.floor(mon)
50  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
51  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
52  var min = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
53  var sec = Math.floor((distance % (1000 * 60)) / 1000);
54  if (sec>0){
55
56  
57  daysItem.innerHTML = days+'<span>Days</span>';
58  hoursItem.innerHTML = hours+ '<span>Hours</span>';
59  minItem.innerHTML = min+ '<span>Minutes</span>';
60  secItem.innerHTML = sec + '<span>Seconds</span>' ;}
61  else{
62    daysItem.innerHTML = '00'+'<span>Days</span>';
63    hoursItem.innerHTML = '00'+ '<span>Hours</span>';
64    minItem.innerHTML = '00'+ '<span>Minutes</span>';
65    secItem.innerHTML = '00' + '<span>Seconds</span>' ;
66
67  }
68
69}
70countDown();
71
72setInterval(countDown, 1000);
73
74// End Clock
75
76// Item Reveal
77window.addEventListener("scroll", reveal);
78
79function reveal() {
80  var reveals = document.querySelectorAll(".reveal");
81
82  for (var i = 0; i < reveals.length; i++) {
83    var windowHeight = window.innerHeight;
84    var revealTop = reveals[i].getBoundingClientRect().top;
85    var revealPoint = 150;
86
87    if (revealTop < windowHeight - revealPoint) {
88      reveals[i].classList.add("active");
89    } else {
90      reveals[i].classList.remove("active");
91    }
92  }
93}
94
95// End Item Reveal
96
97// Events
98const tabs = document.querySelectorAll("[data-tab-target]");
99const tabContents = document.querySelectorAll("[data-tab-content]");
100
101tabs.forEach((tab) => {
102  tab.addEventListener("click", () => {
103    const target = document.querySelector(tab.dataset.tabTarget);
104    tabContents.forEach((tabContent) => {
105      tabContent.classList.remove("active-tab");
106    });

107    tabs.forEach((tab) => {
108      tab.classList.remove("activ");
109    });
110    tab.classList.add("activ");
111    target.classList.add("active-tab");
112  });
113});
114// End Events
115
116//Get all the hyperlink elements
117var links = document.getElementsByTagName("a");
118
119//Browse the previously created array
120Array.prototype.forEach.call(links, function (elem, index) {
121  //Get the hyperlink target and if it refers to an id go inside condition
122  var elemAttr = elem.getAttribute("href");
123  if (elemAttr && elemAttr.includes("#")) {
124    //Replace the regular action with a scrolling to target on click
125    elem.addEventListener("click", function (ev) {
126      ev.preventDefault();
127      //Scroll to the target element using replace() and regex to find the href's target id
128      document.getElementById(elemAttr.replace(/#/g, "")).scrollIntoView({
129        behavior: "smooth",
130        block: "start",
131        inline: "nearest",
132      });
133    });
134  }
135});
136
137// Get the video
138var video = document.getElementById("myVideoo");
139
140// Get the button
141var btn = document.getElementById("myBtnn");
142
143// Pause and play the video, and change the button text
144function myFunction() {
145  if (video.paused) {
146    video.play();
147    btn.innerHTML = "Pause";
148  } else {
149    video.pause();
150    btn.innerHTML = "Play";
151  }
152}
153