added greeting preview

preferences.html

@@ -27,6 +27,7 @@
             <label for="greeting-name">Name to display in greeting: </label>
             <input id="greeting-name" type="text" placeholder="your name">
         </div>
+        <span id="greeting-preview"></span>
     </div>
 </body>
 </html>

scripts/preferences/greetingSettings.js

@@ -1,6 +1,7 @@
 const enableGreetingCheckbox = document.getElementById("enable-greeting")
 const greetingTextInput = document.getElementById("greeting-text")
 const greetingNameInput = document.getElementById("greeting-name")
+const greetingPreview = document.getElementById("greeting-preview")
 
 let enableGreeting = localStorage.getItem("text-startpage:enableGreeting")
 let greetingText = localStorage.getItem("text-startpage:greetingText")
@@ -10,6 +11,16 @@ enableGreetingCheckbox.checked = enableGreeting ? enableGreeting == "true" : ena
 greetingTextInput.value = greetingText
 greetingNameInput.value = greetingName
 
+if(enableGreeting == "true") {
+    greetingPreview.innerHTML = `Greeting Preview: '${greetingTextInput.value}, ${greetingNameInput.value}.'`
+}
+
+document.addEventListener("keyup", () => {
+    if(enableGreeting == "true" || enableGreeting == true) {
+        greetingPreview.innerHTML = `Greeting Preview: '${greetingTextInput.value}, ${greetingNameInput.value}.'`
+    }
+})
+
 enableGreetingCheckbox.addEventListener("change", () => {
     localStorage.setItem("text-startpage:enableGreeting", enableGreetingCheckbox.checked)
     enableGreeting = enableGreetingCheckbox.checked
@@ -21,6 +32,11 @@ enableGreetingCheckbox.addEventListener("change", () => {
         greetingName = ""
         greetingText = ""
     }
+    if(enableGreeting == "true" || enableGreeting == true) {
+        greetingPreview.innerHTML = `Greeting Preview: '${greetingTextInput.value}, ${greetingNameInput.value}.'`
+    } else {
+        greetingPreview.innerHTML = ""
+    }
 })
 
 greetingTextInput.addEventListener("change", () => {