fixed bug with count

index.html

@@ -38,20 +38,18 @@ <h1>Spectra</h1>
             <div class="form-group">
                 <label class="title" for="color-count">Count</label>
                 <label class="context" for="color-count">How many swatches do you want?</label>
-                <input type="number" id="color-count" min="2" max="20" value="10" />
+                <input type="number" id="color-count" value="10" />
             </div>
             <!-- Submit -->
             <div class="button-group">
-                <button id="generate-colors" class="bp--button">Generate Colors</button>
+                <button id="generate-colors" class="bp--button">Create</button>
+                <button id="copy-css" class="bp--button emphasis-low" style="display: none;">Copy to Clipboard</button>
             </div>
         </form>
     </main>
     <aside>
         <!-- Preview -->
         <ul id="color-preview"></ul>
-        <div class="button-group">
-            <button id="copy-css" class="bp--button emphasis-low" style="display: none;">Copy CSS variables</button>
-        </div>
         <div id="copy-status"></div>
     </aside>
 </body>

js/spectra.js

@@ -54,8 +54,8 @@ function hexToHSL(H) {
 // Generate Luminance Colors
 function generateLuminanceColors(hsl, steps) {
   let colors = [];
-  for (let i = 0; i <= steps; i++) {
-    let luminance = i / steps;
+  for (let i = 0; i < steps; i++) {
+    let luminance = i / (steps - 1); // Adjust luminance calculation
     colors.push([hsl[0], hsl[1], luminance]);
   }
   return colors;
@@ -86,7 +86,7 @@ document.addEventListener("DOMContentLoaded", function () {
   baseColorInput.value = localStorage.getItem("baseColor") || "";
   stepsInput.value = localStorage.getItem("steps") || "";
 
-  generateColorsButton.addEventListener("click", (event) => {
+  generateColorsButton.addEventListener("click", async (event) => { // Async keyword for await usage inside
     // Prevent the default form submission
     event.preventDefault();
 
@@ -108,7 +108,8 @@ document.addEventListener("DOMContentLoaded", function () {
     let cssVariableText = `:root { /* ${colorName} */\n`;
 
     // display each generated color in the color preview
-    colors.forEach(function (color, index) {
+    for (let i = 0; i < colors.length; i++) { // Changed to traditional for loop for await inside loop
+      let color = colors[i];
       let hue = Math.round(color[0] * 360);
       let saturation = Math.round(color[1] * 100);
       let lightness = Math.round(color[2] * 100);
@@ -130,7 +131,10 @@ document.addEventListener("DOMContentLoaded", function () {
       colorList.appendChild(li);
 
       cssVariableText += `  ${cssVariable}\n`;
-    });
+
+      // Pause for the animation interval
+      await new Promise((resolve) => setTimeout(resolve, 100)); // 100ms animation interval
+    }
 
     cssVariableText += '}';
 
@@ -141,6 +145,7 @@ document.addEventListener("DOMContentLoaded", function () {
     copyButton.style.display = 'block';
   });
 
+
   copyButton.addEventListener("click", function () {
     const cssVariables = localStorage.getItem('cssVariables');