Each letter of the firstname is a tag
This commit is contained in:
parent
4c90c01554
commit
8eb4ed689e
2 changed files with 55 additions and 24 deletions
|
@ -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 {
|
||||||
|
|
|
@ -8,12 +8,12 @@ const main = () => {
|
||||||
// Reset content of the input
|
// Reset content of the input
|
||||||
input.value = "";
|
input.value = "";
|
||||||
|
|
||||||
// Create the paragraph of the firstname
|
// 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,56 +21,82 @@ 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);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Callback: called when firstname is changed
|
// Callback: called when first name is changed
|
||||||
const updateConst = () => {
|
const updateConst = () => {
|
||||||
const firstname = input.value.trim().toLowerCase();
|
const firstname = input.value.trim().toLowerCase();
|
||||||
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 firstname
|
// 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
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue