fix: the animator range indicator issue on displaying wrong units (#241)

* added the html and css for the degree display

* finished adding degree display element

* changed the unit

* removed function call duplicates

* resolving conflict

* fixed issue of restoring to default

fixed issue of restoring to default when transitioning to different sections of the animation generator

* changed the title display for the animation range inputs

* changed the unit for different title

Co-authored-by: Dunsin <[email protected]>

Author: Elijah-trillionz

index.html

@@ -191,7 +191,8 @@ <h1 id="head">Code Magic</h1>
           <label id="degree">
             <span class="label-title">
               <span>Degree</span>
-              <span id="degree-display">deg</span>
+              <span class="unit-display">deg</span>
+
             </span>
             <input
               type="range"
@@ -248,7 +249,9 @@ <h1 id="head">Code Magic</h1>
           <label id="degree">
             <span class="label-title">
               <span>Degree</span>
-              <span id="degree-display">deg</span>
+
+              <span class="unit-display">deg</span>
+
             </span>
             <input
               type="range"
@@ -291,7 +294,8 @@ <h1 id="head">Code Magic</h1>
           <label id="degree">
             <span class="label-title">
               <span>Degree</span>
-              <span id="degree-display">deg</span>
+              <span class="unit-display">deg</span>
+
             </span>
             <input
               type="range"
@@ -357,8 +361,9 @@ <h1 id="head">Code Magic</h1>
 
           <label id="degree">
             <span class="label-title">
-              <span>Speed</span>
-              <span id="degree-display">deg</span>
+              <span class="title-display">Angle</span>
+              <span class="unit-display animation">deg</span>
+
             </span>
             <input
               type="range"

src/main.ts

@@ -111,6 +111,12 @@ const gradientBackgroundDegree = getRange('gradient-background');
 // get all range inputs
 const gradientRangeInputs = document.querySelectorAll('.degree-range');
 
+
+// get title display element for animation
+const titleDisplayElement = <HTMLElement>(
+  document.querySelector('.title-display')
+);
+
 menuIcon?.addEventListener('click', () => {
   if (navBar?.classList.contains('closed-nav')) {
     navBar?.animate(navBarSlideIn, navBarAnimationOptions);
@@ -123,9 +129,11 @@ menuIcon?.addEventListener('click', () => {
   }
 });
 
+
 const menu = document.querySelector('.menu') as HTMLElement;
 const body = document.querySelector('body') as HTMLElement;
 
+
 if (getComputedStyle(menu).display == 'block') {
   body.onclick = (e) => {
     if (e.target !== navBar) {
@@ -307,10 +315,16 @@ closeBar?.addEventListener('click', () => {
 const displayGradientValue = (gradientElement: HTMLInputElement) => {
   gradientElement.addEventListener('input', (e) => {
     const target = e.target as HTMLInputElement;
-    const degreeDisplayElement = <HTMLElement>(
-      target.parentElement?.querySelector('#degree-display')
+    const unitDisplayElement = <HTMLElement>(
+      target.parentElement?.querySelector('.unit-display')
     );
-    degreeDisplayElement.innerText = `${target.value}deg`;
+
+    // change the unit for opacity
+    const unit = titleDisplayElement.innerText.toLowerCase().includes('opacity')
+      ? ''
+      : 'deg';
+    unitDisplayElement.innerText = `${target.value}${unit}`;
+
   });
 };
 

src/pages/animation.ts

@@ -12,27 +12,25 @@ type Values = {
 };
 
 const attribute = 'animation';
-let getCodeButtonElement =  utils.getCopyCodeButton(attribute);
+let getCodeButtonElement = utils.getCopyCodeButton(attribute);
+
+const OutputElement = utils.getOutput(attribute);
+const DegreeElement = utils.getRange(attribute);
+const radio_button_set = utils.getRadioButtonSet(attribute);
+
+initialConfiguration(radio_button_set, DegreeElement, OutputElement);
 
 export function animationGenerator() {
-  const DegreeElement = utils.getRange(attribute);
   const duration = utils.getInputSpinner(attribute);
-  const radio_button_set = utils.getRadioButtonSet(attribute);
-
-  const OutputElement = utils.getOutput(attribute);
 
   const Stylesheet = utils.getStyleSheet();
   // getCodeButtonElement = utils.getCopyCodeButton(attribute);
   const resultPage = utils.getResultPage();
-  
-  resultPage.style.display = 'flex';
 
- 
+  resultPage.style.display = 'flex';
 
   initial_length = Stylesheet.cssRules.length - 1;
 
-  initialConfiguration(radio_button_set, DegreeElement, OutputElement);
-
   if (OutputElement === null) return;
 
   let i = 0;
@@ -58,8 +56,6 @@ getCodeButtonElement.addEventListener('click', () => {
   );
 });
 
-
-
 /**
  * sets the animation to the output element
  *
@@ -166,6 +162,14 @@ function initialConfiguration(
 
   OutputElement.innerText = 'Lorem Ipsum';
 
+  // get the unit display element for animator
+  const unitDisplayElement = <HTMLElement>(
+    document.querySelector('.unit-display.animation')
+  );
+  const titleDisplayElement = <HTMLElement>(
+    document.querySelector('.title-display')
+  );
+
   elements.forEach((el) =>
     el.addEventListener('click', () => {
       const type = el.value;
@@ -174,11 +178,15 @@ function initialConfiguration(
         DegreeElement.max = '90';
         DegreeElement.step = '1';
         DegreeElement.value = '50';
+        unitDisplayElement.innerText = `${DegreeElement.value}deg`;
+        titleDisplayElement.innerText = 'Angle';
       } else {
         DegreeElement.min = '0';
         DegreeElement.max = '1';
         DegreeElement.step = '.1';
         DegreeElement.value = '.5';
+        unitDisplayElement.innerText = `${DegreeElement.value}`;
+        titleDisplayElement.innerText = 'Opacity';
       }
     })
   );

src/style.css

@@ -255,12 +255,12 @@ textarea {
   font-family: inherit;
 }
 
-input[type=number]::-webkit-inner-spin-button, 
-input[type=number]::-webkit-outer-spin-button { 
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  margin: 0; 
+  margin: 0;
 }
 
 #degree {
@@ -289,7 +289,7 @@ input[type=number]::-webkit-outer-spin-button {
   align-items: center;
 }
 
-#degree-display {
+.unit-display {
   opacity: 0.7;
 }
 
@@ -313,8 +313,9 @@ input[type=number]::-webkit-outer-spin-button {
   padding: 4px;
 }
 
-.styled-input:focus, .styled-input:focus-visible {
-  outline:none;
+.styled-input:focus,
+.styled-input:focus-visible {
+  outline: none;
 }
 
 .styled-input::-webkit-inner-spin-button,