Change size of elements until parent reaches certain height I wrote this method and I would like to refactor it so it is easier to understand and looks cleaner. However, I don't know how or where to start. If you could give it your best shot and explain your approach to how you did it, it would be very helpful to me. The function reduces the size of elements until the parent container reaches a certain height (in this case 25 or less).

function _AdjustHeightOwlDots() {
    let dotRowHeight = $(`#${get(this, 'elementId')} .owl-carousel .owl-dots`).height();
    if (!dotRowHeight || dotRowHeight === 25 || dotRowHeight === 0) {
      return;
    }
    this._waitFor(`#${get(this, 'elementId')} div.owl-dots &gt; button &gt; span`).then(() =&gt; {
      if (dotRowHeight &amp;&amp; dotRowHeight &gt; 25) {
        for (let index = 0; index &lt; 10; index += 1) { // default size of dot is 10x10px
          // first the margin because it looks better
          document.querySelectorAll(`#${get(this, 'elementId')} div.owl-dots &gt; button &gt; span`).forEach((el) =&gt; {
            const elCopy = el;
            const elStyle = elCopy.currentStyle || window.getComputedStyle(elCopy);
            if (parseFloat(elStyle.margin, 10) &gt; 1) {
              elCopy.style.margin = `${parseFloat(elStyle.margin, 10) - 1}px`;
            }
          });
          dotRowHeight = $(`#${get(this, 'elementId')} .owl-carousel .owl-dots`).height();
          if (dotRowHeight &gt; 25) {
            document.querySelectorAll(`#${get(this, 'elementId')} div.owl-dots &gt; button &gt; span`).forEach((el) =&gt; {
              const elCopy = el;

              if (el.offsetHeight &gt; 1) {
                elCopy.style.height = `${el.offsetHeight - 1}px`;
                elCopy.style.width = `${el.offsetHeight}px`;
              }
            });
          }
          const el = document.querySelector(`#${get(this, 'elementId')} div.owl-dots &gt; button &gt; span`);
          const elStyle = el.currentStyle || window.getComputedStyle(el);

          if (el.offsetHeight === 1 &amp;&amp; parseFloat(elStyle.margin, 10) &lt;= 1) { // cant get smaller
            break;
          }
          dotRowHeight = $(`#${get(this, 'elementId')} .owl-carousel .owl-dots`).height();

          if (dotRowHeight &lt;= 25) { break; }
        }
      }
    })
      .catch((/* e */) =&gt; {
      //
      });
  },


Edit: Follow up: Find size for elements to fit in certain width
It looks difficult to decypher indeed. Let's try it though. Some little bits which came to my mind at first glance:


I'd recommend using 4 spaces of indentation
maybe it's personnal taste but I would try not mixing jquery and vanilla js
as I understood, this keyword always refers to the same object, doesn't it? in that case maybe you could declare the selectors at the top of the function?

const thisElementId = get(this, 'elementId');
const selectorOwlDots = `#${thisElementId} .owl-carousel .owl-dots`;
const selectorButtonSpans = `#${thisElementId} div.owl-dots &gt; button &gt; span`;

declarations of const elCopy = el; are useless, just refer to el and rename it to something more meaningful
the handler of _waitFor should be declared as a function:

this._waitFor( selectorButtonSpans ).then( changeSizes ).catch( handleError );

function changeSizes() {
    ...
}

function handleError( err ) {
    ...
}

you can also simplify the initial exit condition a bit

let dotRowHeight = $(selectorOwlDots).height() || 25;
if ( dotRowHeight &lt;= 25 ) {
    return;
}

you have two initial checks on dotRowHeight - I think you could reduce them to just one ( one is the one I simplified, the other is inside the _waitFor handler )


That should make the code a bit more readable BUT I think this code is doing the wrong thing altogether. The problem is - you are changing the size of elements in a loop until some condition is met. This is a bad practice - I've seen people ending up with infinite loops when doing such things. What I think you should do instead is:


read all the sizes you need
calculate sizes to apply to elements
apply sizes
if anything breaks - you do not have an infinite loop of elements jumping up and down on your page


Always try to minimize the number of interactions between your script and the UI.