135 lines
4.6 KiB
JavaScript
135 lines
4.6 KiB
JavaScript
// Get references to various DOM elements
|
|
const keyboard = document.getElementById('keyboard');
|
|
const output = document.getElementById('output');
|
|
const font_names = document.getElementById('font-name-tabs');
|
|
const outputContainer = document.getElementById('output-container');
|
|
// Define an array of colors for the keyboard keys
|
|
const keyColors = [
|
|
"#00c3e6", "#00b500", "#9b0381", "#c2d2ed", "#fe2918", "#bc2f98", "#dddfd5", "#8b7b7c",
|
|
"#fee849", "#8f908b", "#160602", "#433f8e", "#ca662d", "#8dc30d", "#b5eefb", "#f7c0d3",
|
|
"#ffe9ac", "#bba6c5", "#fffdf5", "#fd2683", "#034a12", "#843807", "#fec79c", "#0098bf",
|
|
"#ff5703", "#ff9d2a"
|
|
];
|
|
|
|
// const colorize = () =>
|
|
// {
|
|
// // Apply colors to each key on the keyboard
|
|
// const keys = document.querySelectorAll('.key');
|
|
// for (let i = 0; i < keys.length; i++) {
|
|
// keys[i].style.backgroundImage = `linear-gradient(to bottom, transparent 80%, ${keyColors[i]} 80%)`;
|
|
// }
|
|
// }
|
|
|
|
const colorize = () => {
|
|
// Apply colors to each key on the keyboard
|
|
const keys = document.querySelectorAll('.key');
|
|
for (let i = 0; i < keys.length; i++) {
|
|
if (document.getElementById('Veranda').classList.contains('active')) {
|
|
keys[i].style.backgroundImage = `linear-gradient(to bottom, transparent 80%, ${keyColors[i]} 80%)`;
|
|
} else {
|
|
keys[i].style.backgroundImage = 'none';
|
|
}
|
|
|
|
|
|
|
|
}
|
|
};
|
|
// Define available fonts and set the default font
|
|
const fonts = ['Veranda', 'Author', 'Bills_Symbols', 'SECRETCODE', 'Runes', 'Theraprism', 'Alchemic', 'Combined'];
|
|
let currentFont = fonts[0];
|
|
|
|
// Create font selection tabs dynamically based on the available fonts
|
|
for (const font of fonts) {
|
|
const tab = document.createElement('button');
|
|
tab.className = 'tab';
|
|
tab.id = font;
|
|
tab.textContent = font;
|
|
if (font == "Veranda") {tab.textContent = "Color"; }
|
|
// Update the current font and apply it to the keyboard when a tab is clicked
|
|
tab.addEventListener('click', () => {
|
|
currentFont = font;
|
|
keyboard.style.fontFamily = font;
|
|
});
|
|
|
|
font_names.appendChild(tab);
|
|
}
|
|
|
|
|
|
// Set the initial active tab
|
|
document.getElementById('Veranda').className = 'tab active';
|
|
|
|
const tabs = document.querySelectorAll('.tab');
|
|
|
|
// Add click event listeners to each tab to manage the active state
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
// Remove the active class from all tabs
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
|
|
// Add the active class to the clicked tab
|
|
tab.classList.add('active');
|
|
colorize();
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
for (const letter of 'abcdefghijklmnopqrstuvwxyz') {
|
|
const key = document.createElement('div');
|
|
key.className = 'key';
|
|
key.textContent = letter.toUpperCase();
|
|
|
|
key.addEventListener('click', () => {
|
|
output.textContent += letter.toUpperCase();
|
|
|
|
const keys = Array.from(document.querySelectorAll('.key'));
|
|
const activeKeyColor = keyColors[keys.indexOf(key)];
|
|
console.log(activeKeyColor);
|
|
// outputContainer.innerHTML += `<span class="${currentFont}" style="background-image: linear-gradient(to bottom, transparent 90%, ${activeKeyColor} 90%)">${letter.toUpperCase()}</span>`;
|
|
if (currentFont === 'Veranda') {
|
|
outputContainer.innerHTML += `<span class="${currentFont}" style="background-image: linear-gradient(to bottom, transparent 90%, ${activeKeyColor} 90%);">${letter.toUpperCase()}</span>`;
|
|
} else {
|
|
outputContainer.innerHTML += `<span class="${currentFont}">${letter.toUpperCase()}</span>`;
|
|
}
|
|
});
|
|
|
|
keyboard.appendChild(key);
|
|
}
|
|
|
|
// Create the delete button
|
|
const del = document.createElement('div');
|
|
del.className = "key";
|
|
del.id = "undo-button";
|
|
del.textContent = "delete";
|
|
keyboard.appendChild(del);
|
|
|
|
// Add an event listener to the delete button to remove the last character
|
|
const undoButton = document.querySelector('#undo-button');
|
|
undoButton.addEventListener('click', () => {
|
|
output.textContent = output.textContent.slice(0, -1);
|
|
outputContainer.removeChild(outputContainer.lastElementChild);
|
|
});
|
|
|
|
// Create the spacebar button
|
|
const space = document.createElement('div');
|
|
space.className = "key";
|
|
space.id = "spacebar";
|
|
space.textContent = "space";
|
|
keyboard.appendChild(space);
|
|
|
|
// Add an event listener to the spacebar to add a space in the output
|
|
document.getElementById("spacebar").addEventListener('click', () => {
|
|
output.textContent += " ";
|
|
outputContainer.innerHTML += `<span class="${currentFont}"> </span>`;
|
|
});
|
|
|
|
// Add an event listener to the clear output button to clear the output area
|
|
const clearOutputButton = document.getElementById('clear-output');
|
|
clearOutputButton.addEventListener('click', () => {
|
|
document.getElementById('output').textContent = '';
|
|
document.getElementById('output-container').textContent = '';
|
|
});
|
|
|
|
colorize();
|