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; 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 */ /* Drop the size of the text when screen is small */
@media only screen and (max-width : 850px) { @media only screen and (max-width : 850px) {
.firstname-constant { .firstname-constant {

View file

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