Each letter of the firstname is a tag

This commit is contained in:
Mylloon 2022-06-24 10:01:59 +02:00
parent 4c90c01554
commit 8eb4ed689e
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
2 changed files with 55 additions and 24 deletions

View file

@ -22,6 +22,11 @@
font-size: 60px;
}
/* Letter of the first name inline */
.firstname-constant-string p {
display: inline;
}
/* Drop the size of the text when screen is small */
@media only screen and (max-width : 850px) {
.firstname-constant {

View file

@ -9,11 +9,11 @@ const main = () => {
input.value = "";
// Create the paragraph of the first name
let string_firstname = document.createElement("p");
const string_firstname = document.createElement("div");
string_firstname.className = "firstname-constant-string";
// Create the paragraph of the constant
let double_firstname = document.createElement("p");
const double_firstname = document.createElement("p");
double_firstname.className = "firstname-constant-double";
// Add the elements to the page
@ -21,8 +21,7 @@ const main = () => {
document.getElementsByClassName("firstname-constant").item(0).append(double_firstname);
// Fill informations with placeholder
defaultFirstname();
defaultConstant();
updateConst();
// Call callback when editing the input
input.addEventListener("input", updateConst);
@ -34,43 +33,70 @@ const updateConst = () => {
if(firstname.length) {
const data = getConst(firstname.split(""));
getString().textContent = firstname.replace(/^\w/, (c) => c.toUpperCase());
setString(firstname.replace(/^\w/, (c) => c.toUpperCase()), data.infos);
getDouble().textContent = data.const;
console.log(`info: ${JSON.stringify(data.infos, undefined, 2)}`);
} else {
defaultFirstname();
defaultConstant();
defaultInfos();
}
};
// Define the string who show the firstname
const setString = (firstname = String, data = Object) => {
const string_div = document.getElementsByClassName("firstname-constant-string").item(0);
// Reset the string data
string_div.innerHTML = "";
// For each letter of the first name
firstname.split("").forEach(letter_value => {
// Create the letter
const letter = document.createElement("p");
const infos = document.createElement("p");
// Fill elements with data
letter.textContent = letter_value;
infos.textContent = JSON.stringify(data[letter_value]);
// Change parameter of tag
infos.style.visibility = "hidden";
infos.style.position = "absolute";
// Link info to the letter
letter.append(infos);
// Add the letter
string_div.append(letter);
});
}
// Get the paragraph of the name
const getString = () => {
return document.getElementsByClassName("firstname-constant").item(0)
.getElementsByClassName("firstname-constant-string").item(0);
return document.getElementsByClassName("firstname-constant-string").item(0);
}
// Get the paragraph of the constant
const getDouble = () => {
return document.getElementsByClassName("firstname-constant").item(0)
.getElementsByClassName("firstname-constant-double").item(0);
return document.getElementsByClassName("firstname-constant-double").item(0);
}
// Set the paragraph of the name to the placeholder
const defaultFirstname = () => {
getString().textContent = input.placeholder;
}
const defaultInfos = () => {
// Retrieve the constant from the default first name
const data = getConst(input.placeholder.split(""));
// Set the paragraph of the constant to the placeholder
const defaultConstant = () => {
getDouble().textContent = getConst(input.placeholder.split("")).const;
// Define the string
setString(input.placeholder, data.infos);
// Define the constant
getDouble().textContent = data.const;
}
const getConst = (letters = Array) => {
// Store constants of each letters of the first name
let const_data = [];
const const_data = [];
// Store some constants info
let const_infos = {};
const const_infos = {};
// Assign each letter to a constant, fallback to 1 if no one has been found
let position = 0;
@ -246,8 +272,8 @@ const getConst = (letters = Array) => {
};
});
// Multiply all the constants together
return {
// Multiply all the constants together
"const": const_data.reduce((x, y) => x * y),
"infos": const_infos
};