From d331c7d5685b6197a7b36d6be02eb197639eb430 Mon Sep 17 00:00:00 2001
From: Naman Sood <mail@nsood.in>
Date: Tue, 26 Jul 2022 20:36:13 -0500
Subject: [PATCH] var => {let, const}
Signed-off-by: Naman Sood <mail@nsood.in>
---
js/script.js | 93 ++++++++++++++++++++++++++--------------------------
1 file changed, 46 insertions(+), 47 deletions(-)
diff --git a/js/script.js b/js/script.js
index e94b7b9..3b9f29b 100644
--- a/js/script.js
+++ b/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');
- let bgOps = new Array(backgrounds.length).fill(0);
- let textOps = new Array(backgrounds.length).fill(0);
+ const backgrounds = document.querySelector('.bg-scroller').querySelectorAll('.bg');
+ const bgOps = 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);
- let maxBg = minBg + 1;
+ const minBg = Math.floor(scrolledWindows);
+ 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;
-
- var r = 8;
+ const 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;
- p.y = Math.random() * canvas.height;
- p.progress = initialProgress;
+ this.x = Math.random() * canvas.width;
+ this.y = Math.random() * canvas.height;
+ 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;
- let multiplier = isDarkMode ? 0.05 : 0.005;
- ctx.fillStyle = `rgba(${color}, ${color}, ${color}, ${Math.sqrt(p.progress*multiplier)})`;
+ const color = isDarkMode ? 255 : 0;
+ const multiplier = isDarkMode ? 0.05 : 0.005;
+ 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)
- p.progress += 0.005;
+ if(this.progress > 0.5)
+ this.progress += 0.005;
else
- p.progress += 0.05;
- p.draw();
- if(p.progress >= 1) p.init();
+ this.progress += 0.05;
+ this.draw();
+ 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,
- text = sentences[counter],
+ const el = ticker;
+ 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);
}
-})
+});