add preview bar

index.html

@@ -16,6 +16,7 @@ <h1 class="text-xl font-bold mb-5">Trackmania Username Generator</h1>
         name="username"
         class="relative bg-gray-50 ring-0 outline-none border border-neutral-500 text-neutral-900 placeholder-violet-700 text-sm rounded-lg focus:ring-violet-500 focus:border-violet-500 block w-64 p-2.5 checked:bg-emerald-500"
       />
+      <p class="text-sm text-gray-500 mt-0.5" id="minLetters">min. 2 letters</p>
     </div>
     <!-- colors input (start and end) -->
     <div id="colorsDiv">
@@ -88,6 +89,16 @@ <h3 class="font-bold">Code:</h3>
     <p class="text-sm text-gray-400 italic">
       Made by <a href="https://steveblox.github.io">SteveBlox</a>
     </p>
+    <!-- gradient bar at the bottom of the card -->
+    <div id="gradientBar" class="mt-5">
+      <div id="gradient" class="h-2"></div>
+    </div>
+    <button
+      id="expandGradient"
+      class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+    >
+      Expand
+    </button>
   </div>
 
   <script src="main.js"></script>

main.js

@@ -78,6 +78,10 @@ const result = document.querySelector(".result");
 const tmResult = document.querySelector("#tmResult");
 const copy = document.querySelector("#copy");
 const middleColorCheckbox = document.querySelector("#middleColorCheckbox");
+const gradientPreview = document.querySelector("#gradient");
+let gradientExpanded = false;
+const expandGradientButton = document.querySelector("#expandGradient");
+const minLetters = document.querySelector("#minLetters");
 function generateUsername() {
   const startColor = startInput.value;
   const middleColor = middleColorCheckbox.checked ? middleInput.value : null;
@@ -87,6 +91,16 @@ function generateUsername() {
     `startColor: ${startColor}, middleColor: ${middleColor}, endColor: ${endColor}, name: ${name}`
   );
   const minNameLength = middleColorCheckbox.checked ? 4 : 2;
+  if (startColor && endColor) {
+    gradientPreview.style.background = `linear-gradient(to right, ${startColor}, ${
+      middleColor || endColor
+    }${middleColor ? `, ${endColor}` : ""}`;
+  }
+  if (middleColorCheckbox.checked) {
+    minLetters.textContent = "min. 4 letters";
+  } else {
+    minLetters.textContent = "min. 2 letters";
+  }
   if (!startColor || !endColor || !name || name.length < minNameLength) return;
   const gradient = generateGradient(
     startColor,
@@ -111,7 +125,19 @@ middleInput.addEventListener("input", () => {
 });
 endInput.addEventListener("input", generateUsername);
 middleColorCheckbox.addEventListener("change", generateUsername);
-
+document.body.onload = generateUsername;
 copy.addEventListener("click", function () {
   navigator.clipboard.writeText(tmResult.value);
 });
+expandGradientButton.addEventListener("click", () => {
+  gradientExpanded = !gradientExpanded;
+  if (gradientExpanded) {
+    gradientPreview.style.height = "8rem";
+    expandGradientButton.style.bottom = "8.2rem";
+    expandGradientButton.innerText = "Collapse";
+  } else {
+    gradientPreview.style.height = "0.5rem";
+    expandGradientButton.style.bottom = "0.4rem";
+    expandGradientButton.innerText = "Expand";
+  }
+});

styles.css

@@ -18,5 +18,21 @@ body {
   padding: 2em;
   background: #fff;
   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
 
+#gradient {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transition: .5s all;
+}
+#gradient:hover{
+  height: 8rem;
+}
+#expandGradient {
+  position: fixed;
+  bottom: .4rem;
+  right: 0;
+  transition: .5s all;
 }