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;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
|
|
|
@ -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
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue