Add card whith wikipedia link

This commit is contained in:
Mylloon 2022-06-25 01:38:15 +02:00
parent cf47feba42
commit a2bf8c8221
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
2 changed files with 70 additions and 45 deletions

View file

@ -36,4 +36,19 @@
.firstname-constant p { .firstname-constant p {
font-size: 28px; font-size: 28px;
} }
span {
transform: translate(-50%, 80%) !important;
font-size: 30px !important;
}
}
/* Info card */
span {
transform: translate(-50%, 95%);
font-size: 50px;
border: 2px;
border-style: groove;
background-color: black;
border-radius: 5px;
} }

View file

@ -17,8 +17,9 @@ const main = () => {
double_firstname.className = "firstname-constant-double"; double_firstname.className = "firstname-constant-double";
// Add the elements to the page // Add the elements to the page
document.getElementsByClassName("firstname-constant").item(0).append(string_firstname); const firstname_constant = document.getElementsByClassName("firstname-constant").item(0);
document.getElementsByClassName("firstname-constant").item(0).append(double_firstname); firstname_constant.append(string_firstname);
firstname_constant.append(double_firstname);
// Fill informations with placeholder // Fill informations with placeholder
updateConst(); updateConst();
@ -31,7 +32,7 @@ const main = () => {
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);
setString(firstname.replace(/^\w/, (c) => c.toUpperCase()), data.infos); setString(firstname.replace(/^\w/, (c) => c.toUpperCase()), data.infos);
getDouble().textContent = data.const; getDouble().textContent = data.const;
@ -51,15 +52,19 @@ const setString = (firstname = String, data = Object) => {
firstname.split("").forEach(letter_value => { firstname.split("").forEach(letter_value => {
// Create the letter // Create the letter
const letter = document.createElement("p"); const letter = document.createElement("p");
const infos = document.createElement("p"); const infos = document.createElement("span");
// Fill elements with data // Fill elements with data
letter.textContent = letter_value; letter.textContent = letter_value;
infos.textContent = JSON.stringify(data[letter_value.toLowerCase()]); Object.keys(data[clearText(letter_value)]).forEach(key => {
const link = document.createElement("a");
link.href = data[clearText(letter_value)][key];
link.innerText = key;
infos.append(link);
})
// Change parameter of tag // Change parameter of tags
infos.className = "firstname-letter" infos.hidden = true;
infos.style.visibility = "hidden";
infos.style.position = "absolute"; infos.style.position = "absolute";
// Link info to the letter // Link info to the letter
@ -67,6 +72,10 @@ const setString = (firstname = String, data = Object) => {
// Add the letter // Add the letter
string_div.append(letter); string_div.append(letter);
// Add behaviour when clicking on letters
letter.addEventListener("mouseenter", (e) => e.target.firstElementChild.hidden = false);
letter.addEventListener("mouseleave", (e) => e.target.firstElementChild.hidden = true);
}); });
} }
@ -83,7 +92,7 @@ const getDouble = () => {
// Set the paragraph of the name to the placeholder // Set the paragraph of the name to the placeholder
const defaultInfos = () => { const defaultInfos = () => {
// Retrieve the constant from the default first name // Retrieve the constant from the default first name
const data = getConst(input.placeholder.split("")); const data = getConst(input.placeholder);
// Define the string // Define the string
setString(input.placeholder, data.infos); setString(input.placeholder, data.infos);
@ -92,7 +101,15 @@ const defaultInfos = () => {
getDouble().textContent = data.const; getDouble().textContent = data.const;
} }
const getConst = (letters = Array) => { // Remove accent and lower the string
const clearText = (string = String) => {
return string.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase();
}
const getConst = (letters = String) => {
// Turn letters to an array
const letters_array = clearText(letters).split("");
// Store constants of each letters of the first name // Store constants of each letters of the first name
const const_data = []; const const_data = [];
@ -101,170 +118,163 @@ const getConst = (letters = Array) => {
// 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;
letters.forEach(letter => { letters_array.forEach(letter => {
position++; position++;
switch (letter) { switch (letter) {
case "a": case "a":
const_data.push(1.28242712910062263687534256886979172 ** position); const_data.push(1.28242712910062263687534256886979172 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Glaisher%E2%80%93Kinkelin_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Glaisher%E2%80%93Kinkelin_constant"
}; };
break; break;
case "b": case "b":
const_data.push(1.456074 ** position); const_data.push(1.456074 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Backhouse%27s_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Backhouse%27s_constant"
}; };
break; break;
case "c": case "c":
const_data.push(299792458 ** position); const_data.push(299792458 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Speed_of_light" "Wikipedia": "https://en.wikipedia.org/wiki/Speed_of_light"
}; };
break; break;
case "d": case "d":
const_data.push(0.73908513321516064165 ** position); const_data.push(0.73908513321516064165 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Dottie_number" "Wikipedia": "https://en.wikipedia.org/wiki/Dottie_number"
}; };
break; break;
case "e": case "e":
const_data.push(2.71828182845904523536028747135266250 ** position); const_data.push(2.71828182845904523536028747135266250 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/E_(mathematical_constant)" "Wikipedia": "https://en.wikipedia.org/wiki/E_(mathematical_constant)"
}; };
break; break;
case "f": case "f":
const_data.push(2,80777024202851936522150118655777293 ** position); const_data.push(2,80777024202851936522150118655777293 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Frans%C3%A9n%E2%80%93Robinson_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Frans%C3%A9n%E2%80%93Robinson_constant"
}; };
break; break;
case "g": case "g":
const_data.push(0.83462684167407318628142973279904680 ** position); const_data.push(0.83462684167407318628142973279904680 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Gauss%27s_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Gauss%27s_constant"
}; };
break; break;
case "h": case "h":
const_data.push(6.62607015e-34 ** position); const_data.push(6.62607015e-34 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Planck_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Planck_constant"
}; };
break; break;
case "i": case "i":
const_data.push(0.20787957635076190854695561983497877 ** position); const_data.push(0.20787957635076190854695561983497877 ** position);
const_infos[letter] = { const_infos[letter] = {
"oeis": { "oeis": "https://oeis.org/A049006"
"link": "https://oeis.org/A049006",
"name": "Decimal expansion of i^i"
}
}; };
break; break;
case "j": case "j":
const_data.push(5.5208e27 ** position); const_data.push(5.5208e27 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/J/psi_meson" "Wikipedia": "https://en.wikipedia.org/wiki/J/psi_meson"
}; };
break; break;
case "k": case "k":
const_data.push((-273.15) ** position); const_data.push((-273.15) ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Kelvin" "Wikipedia": "https://en.wikipedia.org/wiki/Kelvin"
}; };
break; break;
case "l": case "l":
const_data.push(0.97027011439203392574 ** position); const_data.push(0.97027011439203392574 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Lochs%27s_theorem" "Wikipedia": "https://en.wikipedia.org/wiki/Lochs%27s_theorem"
}; };
break; break;
case "m": case "m":
const_data.push(0.26149721284764278375542683860869585 ** position); const_data.push(0.26149721284764278375542683860869585 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Meissel%E2%80%93Mertens_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Meissel%E2%80%93Mertens_constant"
}; };
break; break;
case "n": case "n":
const_data.push(6.02214076e+23 ** position); const_data.push(6.02214076e+23 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Avogadro_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Avogadro_constant"
}; };
break; break;
case "o": case "o":
const_data.push(1.66168794963359412129581892274995074 ** position); const_data.push(1.66168794963359412129581892274995074 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Somos%27_quadratic_recurrence_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Somos%27_quadratic_recurrence_constant"
}; };
break; break;
case "p": case "p":
const_data.push(2.29558714939263807403429804918949038 ** position); const_data.push(2.29558714939263807403429804918949038 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Universal_parabolic_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Universal_parabolic_constant"
}; };
break; break;
case "q": case "q":
const_data.push(1.8755459e-18 ** position); const_data.push(1.8755459e-18 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Planck_units#History_and_definition" "Wikipedia": "https://en.wikipedia.org/wiki/Planck_units#History_and_definition"
}; };
break; break;
case "r": case "r":
const_data.push(262537412640768743.999999999999250073 ** position); const_data.push(262537412640768743.999999999999250073 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Heegner_number#Almost_integers_and_Ramanujan.27s_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Heegner_number#Almost_integers_and_Ramanujan.27s_constant"
}; };
break; break;
case "s": case "s":
const_data.push(0.18785964246206712024851793405427323 ** position); const_data.push(0.18785964246206712024851793405427323 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/MRB_constant" "Wikipedia": "https://en.wikipedia.org/wiki/MRB_constant"
}; };
break; break;
case "t": case "t":
const_data.push(1.92756197548292530426 ** position); const_data.push(1.92756197548292530426 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Generalizations_of_Fibonacci_numbers#Tetranacci_numbers" "Wikipedia": "https://en.wikipedia.org/wiki/Generalizations_of_Fibonacci_numbers#Tetranacci_numbers"
}; };
break; break;
case "u": case "u":
const_data.push(1.84775906502257351225 ** position); const_data.push(1.84775906502257351225 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Self-avoiding_walk" "Wikipedia": "https://en.wikipedia.org/wiki/Self-avoiding_walk"
}; };
break; break;
case "v": case "v":
const_data.push(0.42215773311582662702 ** position); const_data.push(0.42215773311582662702 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Reuleaux_tetrahedron" "Wikipedia": "https://en.wikipedia.org/wiki/Reuleaux_tetrahedron"
}; };
break; break;
case "w": case "w":
const_data.push(2.09455148154232659148 ** position); const_data.push(2.09455148154232659148 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/John_Wallis#Contributions_to_mathematics", "OEIS": "https://oeis.org/A007493"
"oeis": {
"link": "https://oeis.org/A007493",
"name": "Decimal expansion of Wallis' number, the real root of x^3 - 2*x - 5"
}
}; };
break; break;
case "x": case "x":
const_data.push(1.0021e-13 ** position); const_data.push(1.0021e-13 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/X_unit" "Wikipedia": "https://en.wikipedia.org/wiki/X_unit"
}; };
break; break;
case "y": case "y":
const_data.push(0.57721566490153286060651209008240243 ** position); const_data.push(0.57721566490153286060651209008240243 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Euler%27s_constant" "Wikipedia": "https://en.wikipedia.org/wiki/Euler%27s_constant"
}; };
break; break;
case "z": case "z":
const_data.push(376.730313668 ** position); const_data.push(376.730313668 ** position);
const_infos[letter] = { const_infos[letter] = {
"wikipedia": "https://en.wikipedia.org/wiki/Impedance_of_free_space" "Wikipedia": "https://en.wikipedia.org/wiki/Impedance_of_free_space"
}; };
break; break;