// CONSTANT VARIABLES
const reset = document.getElementById('reset');
const themeToggle = document.getElementById('themeToggle');
const help = document.getElementById('help');
const container = document.getElementById('container');
const seperator = document.getElementById('seperator');
const counterMain = document.getElementById('key-counters');
let isLightMode = false;
function logKey(key) {
let keyDiv = document.getElementById(key);
if (keyDiv) {
let currentCount = parseInt(keyDiv.innerHTML.split(': ')[1]) || 0;
currentCount += 1;
keyDiv.innerHTML = `${key}: ${currentCount}`;
} else {
keyDiv = document.createElement("div");
keyDiv.innerHTML = `${key}: 1`;
keyDiv.id = key;
counterMain.appendChild(keyDiv);
}
}
function resetKeys() {
while (counterMain.hasChildNodes()) {
counterMain.removeChild(counterMain.firstChild);
};
console.clear();
};
reset.addEventListener('click', function () {
resetKeys()
});
document.addEventListener("keydown", (e) => {
logKey(e.key);
});
help.addEventListener('click', function () {
alert('Press any key to see how many times it was pressed.')
});
themeToggle.addEventListener('click', function() {
if (!isLightMode) {
document.getElementById('navBar').style.backgroundColor = "rgba(200,200,200,0.775)";
/*
LIGHT MODE
LIGHT MODE
LIGHT MODE
*/
document.body.style.backgroundColor = '#C8C8C8';
container.style.backgroundColor = "#B0B0B0";
themeToggle.innerHTML = ``;
container.style.color = "#1E1E1E"
seperator.style.backgroundColor = "#1E1E1E";
isLightMode = true;
document.getElementById('github').innerHTML = ` `;
document.getElementById('web').innerHTML = ``;
document.getElementById('help').innerHTML = ``;
let children = container.children;
for (let i = 0; i < children.length; i++) {
children[i].style.color = "#1E1E1E";
}
let keyChildren = counterMain.children;
for (let i = 0; i < keyChildren.length; i++) {
keyChildren[i].style.color = "#1E1E1E";
keyChildren[i].style.backgroundColor = "#969696";
}
reset.style.backgroundColor = "#1E1E1E";
reset.style.color = "#b0b0b0";
reset.style.borderColor = "#2E2E2E";
fontButton.style.backgroundColor = "#1E1E1E";
fontButton.style.color = "#b0b0b0";
fontButton.style.borderColor = "#2E2E2E";
} else {
/*
DARK MODE
DARK MODE
DARK MODE
*/
let children = container.children;
for (let i = 0; i < children.length; i++) {
children[i].style.color = "#f0f0f0";
}
let keyChildren = counterMain.children;
for (let i = 0; i < keyChildren.length; i++) {
keyChildren[i].style.color = "#f0f0f0";
keyChildren[i].style.backgroundColor = "#5a5a5a";
}
document.getElementById('navBar').style.backgroundColor = "rgba(42,42,42,0.775)";
document.body.style.backgroundColor = '#2a2a2a';
themeToggle.innerHTML = ``;
isLightMode = false;
container.style.backgroundColor = "#4b4b4b";
seperator.style.backgroundColor = "#747474";
document.getElementById('github').innerHTML = ` `;
document.getElementById('web').innerHTML = ``;
document.getElementById('help').innerHTML = ``;
reset.style.backgroundColor = "#747474";
reset.style.color = "#2a2a2a";
reset.style.borderColor = "#8C8C8C";
fontButton.style.backgroundColor = "#747474";
fontButton.style.color = "#2a2a2a";
fontButton.style.borderColor = "#8C8C8C";
}
});