var => {let, const}

Signed-off-by: Naman Sood <mail@nsood.in>

js/script.js

@@ -1,4 +1,4 @@
-var firstInit = true;
+let firstInit = true;
 
 function mobileConditions() {
 	return !(window.innerWidth > 900 && window.innerHeight < window.innerWidth);
@@ -7,7 +7,7 @@ function mobileConditions() {
 function tag(name, classes, id) {
 	const el = document.createElement(name);
 	if(classes) {
-		for(let c of classes) {
+		for(const c of classes) {
 			el.classList.add(c);
 		}
 	}
@@ -46,13 +46,13 @@ bgInit(false);
 function calculateBg() {
 	if(!mobileConditions()) {
 		bgInit(false);
-		let backgrounds = document.querySelector('.bg-scroller').querySelectorAll('.bg');
+		const backgrounds = document.querySelector('.bg-scroller').querySelectorAll('.bg');
-		let bgOps = new Array(backgrounds.length).fill(0);
+		const bgOps = new Array(backgrounds.length).fill(0);
-		let textOps = new Array(backgrounds.length).fill(0);
+		const textOps = new Array(backgrounds.length).fill(0);
 		let scrolledWindows = (window.scrollY - window.innerHeight) / window.innerHeight;
 		if(scrolledWindows < 0) scrolledWindows = 0;
-		let minBg = Math.floor(scrolledWindows);
+		const minBg = Math.floor(scrolledWindows);
-		let maxBg = minBg + 1;
+		const maxBg = minBg + 1;
 		let delta = scrolledWindows - minBg;
 		if(delta < 0.3) {
 			delta = 0;
@@ -91,7 +91,7 @@ function scrollAnimations() {
 
 	if(!mobileConditions()) {
 		document.querySelectorAll('.main h1, .main h3').forEach(function(el) {
-			var scrolledFrac = window.scrollY / window.innerHeight;
+			const scrolledFrac = window.scrollY / window.innerHeight;
 			el.style.opacity = Math.min(1, 1.2 - 1.5*scrolledFrac).toString();
 			el.style.position = 'relative';
 			el.style.top = (scrolledFrac * window.innerHeight / 2).toString() + 'px';
@@ -106,52 +106,50 @@ function scrollLoop() {
 }
 scrollLoop();
 
-var canvas = document.querySelector('canvas#bg');
+const canvas = document.querySelector('canvas#bg');
 
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
-var ctx = canvas.getContext('2d');
+const ctx = canvas.getContext('2d');
 
-window.addEventListener('resize', () => {
+addEventListener('resize', () => {
 	canvas.width = window.innerWidth;
 	canvas.height = window.innerHeight;
-})
+});
 
 function Point() {
-	var p = this;
+	const r = 8;
-	
-	var r = 8;
 	
 	// progress below 0 is neglected, negative initial
 	// progress serves to introduce random delays - 
 	// at 0.05 progress points per second, for example
 	// a dot with initial progress -0.15 will run 2 frames
 	// after a dot with initial progress -0.05
-	var initialProgress = -4 * Math.random();
+	const initialProgress = -4 * Math.random();
 	
 	// moves point to a random location and 
 	// resets its progress
 	this.init = function() {
-		p.x = Math.random() * canvas.width;
+		this.x = Math.random() * canvas.width;
-		p.y = Math.random() * canvas.height;
+		this.y = Math.random() * canvas.height;
-		p.progress = initialProgress;
+		this.progress = initialProgress;
 	}
 	
 	this.draw = function() {
-		if(p.progress >= 0) {
+		if(this.progress >= 0) {
 			// opacity of of dot changes with progress
 			const isDarkMode = document.body.classList.contains('dark-mode');
-			let color = isDarkMode ? 255 : 0;
+			const color = isDarkMode ? 255 : 0;
-			let multiplier = isDarkMode ? 0.05 : 0.005;
+			const multiplier = isDarkMode ? 0.05 : 0.005;
-			ctx.fillStyle = `rgba(${color}, ${color}, ${color}, ${Math.sqrt(p.progress*multiplier)})`;
+			ctx.fillStyle = `rgba(${color}, ${color}, ${color}, ${Math.sqrt(this.progress*multiplier)})`;
 			ctx.beginPath();
 			// radius calculation: maps progress from [0, 1] to [0, pi],
 			// then takes sine of that to get an increase, then decrease
 			// in radius. absolute value to prevent floating point errors
 			// accidentally causing negative sine values which cause ctx.arc
 			// to throw errors
-			ctx.arc(p.x, p.y, Math.abs(Math.sin(Math.PI*p.progress)*r), 0, 2*Math.PI);
+			ctx.arc(this.x, this.y, Math.abs(Math.sin(Math.PI*this.progress)*r), 0, 2*Math.PI);
 			ctx.fill();
 		}
 	};
@@ -159,19 +157,20 @@ function Point() {
 		// stars come faster than they go
 		// so user can look at them longer
 		// i guess? idk this just looked pretty
-		if(p.progress > 0.5)
+		if(this.progress > 0.5)
-			p.progress += 0.005;
+			this.progress += 0.005;
 		else
-			p.progress += 0.05;
+			this.progress += 0.05;
-		p.draw();
+		this.draw();
-		if(p.progress >= 1) p.init();
+		if(this.progress >= 1) this.init();
 	}
 }
-var dots = [];
 
-var n = 20;
+const dots = [];
 
-for(var i = 0; i < n; i++) {
+const n = 20;
+
+for(let i = 0; i < n; i++) {
 	dots[i] = new Point();
 	dots[i].init();
 }
@@ -180,7 +179,7 @@ function loop() {
 	if(window.scrollY <= window.innerHeight) {
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 	
-		for(var i = 0; i < n; i++) {
+		for(let i = 0; i < n; i++) {
 			dots[i].render();
 		}
 	}
@@ -190,7 +189,7 @@ function loop() {
 
 loop();
 
-var sentences = [
+const sentences = [
 	'Semicolons optional.',
 	'Best viewed in Visual Studio Code.',
 	'sh -c "$(curl -sL https://nsood.in/randomscript.sh)"',
@@ -199,23 +198,23 @@ var sentences = [
 	'Boolean logic jokes are funny, whether you laugh xor not.',
 ];
 
-var counter = 1;
+let counter = 1;
 
-var ticker = document.querySelector("footer .ticker");
+const ticker = document.querySelector("footer .ticker");
 
 function changeText() {
-	var el = ticker,
+	const el = ticker;
-		text = sentences[counter],
+	const text = sentences[counter];
 		oldText = el.textContent;
 
-	var x = setInterval(function() {
+	const x = setInterval(function() {
 		if(oldText.length != 0) {
 			oldText = oldText.slice(0, -1);
 			el.textContent = oldText;
 		}
 		else {
 			setTimeout(function() {
-				var y = setInterval(function() {
+				const y = setInterval(function() {
 					if(el.textContent.length != text.length) {
 						el.textContent = text.slice(0, el.textContent.length+1);
 					}
@@ -248,7 +247,7 @@ const birthday = {
 	month: 1,
 	year: 2001,
 }
-let today = new Date();
+const today = new Date();
 let age = today.getFullYear() - birthday.year;
 if(today.getMonth() <= birthday.month && today.getDate() < birthday.date) {
 	--age;
@@ -259,18 +258,18 @@ document.querySelector('.age').textContent = `${tens[Math.floor(age / 10)]} ${on
 
 // easter egg
 
-var sequences = [
+const sequences = [
 	[ 99, 108, 97, 112, 111, 102, 102 ],
 	[ 99, 108, 97, 112, 111, 110 ],
 ];
 
-var mode = 0;
+let mode = 0;
 
-var eei = 0;
+let eei = 0;
 
-window.addEventListener('keypress', e => {
+addEventListener('keypress', e => {
 	const clapper = document.querySelector('.clapper');
-	var sequence = sequences[mode];
+	const sequence = sequences[mode];
 	if(e.keyCode == sequence[eei]) {
 		eei++;
 	}
@@ -293,4 +292,4 @@ window.addEventListener('keypress', e => {
 			setTimeout(() => clapper.classList.toggle('clapping'), 500);
 		}, 500);
 	}
-})
+});