From c9db599d87ee7d53de3c718cb20dc0eaf407e445 Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Thu, 23 Jun 2022 16:45:25 +0200
Subject: [PATCH] Add the constant res to the screen

---
 public/css/style.css |  2 +-
 public/js/main.js    | 40 ++++++++++++++++++++++++++++++----------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 339b94b..03db1c7 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -11,5 +11,5 @@
 
 .firstname-constant p {
     text-align: center;
-    font-size: 10em;
+    font-size: 5em;
 }
diff --git a/public/js/main.js b/public/js/main.js
index 2afe6ed..dced113 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -9,12 +9,20 @@ const main = () => {
     input.value = "";
 
     // Create the paragraph of the firstname
-    let paragraph_firstname = document.createElement("p");
-    paragraph_firstname.className = "firstname-constant-paragraph";
-    document.getElementsByClassName("firstname-constant").item(0).append(paragraph_firstname);
-    defaultFirstname()
+    let string_firstname = document.createElement("p");
+    string_firstname.className = "firstname-constant-string";
 
     // Create the paragraph of the constant
+    let double_firstname = document.createElement("p");
+    double_firstname.className = "firstname-constant-double";
+
+    // Add the elements to the page
+    document.getElementsByClassName("firstname-constant").item(0).append(string_firstname);
+    document.getElementsByClassName("firstname-constant").item(0).append(double_firstname);
+
+    // Fill informations with placeholder
+    defaultFirstname();
+    defaultConstant();
 
     // Call callback when editing the input
     input.addEventListener("input", updateConst);
@@ -26,23 +34,35 @@ const updateConst = () => {
     if(firstname.length) {
         const data = getConst(firstname.split(""));
 
-        getParagraph().textContent = firstname.replace(/^\w/, (c) => c.toUpperCase());
-
-        console.log(`output: ${data.const} - ${JSON.stringify(data.infos)}`);
+        getString().textContent = firstname.replace(/^\w/, (c) => c.toUpperCase());
+        getDouble().textContent = data.const;
+        console.log(`info: ${JSON.stringify(data.infos)}`);
     } else {
         defaultFirstname();
+        defaultConstant();
     }
 };
 
 // Get the paragraph of the name
-const getParagraph = () => {
+const getString = () => {
     return document.getElementsByClassName("firstname-constant").item(0)
-        .getElementsByClassName("firstname-constant-paragraph").item(0);
+        .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);
 }
 
 // Set the paragraph of the name to the placeholder
 const defaultFirstname = () => {
-    getParagraph().textContent = input.placeholder;
+    getString().textContent = input.placeholder;
+}
+
+// Set the paragraph of the constant to the placeholder
+const defaultConstant = () => {
+    getDouble().textContent = getConst(input.placeholder.split("")).const;
 }
 
 const getConst = (letters = Array) => {