Animated Background Stripes Effect 12 exercises
Problem

Final Match Utilities Implementation Challengeself.__wrap_balancer=(t,e,n)=>{n=n||document.querySelector(`[data-br="\${t}"]`);let o=n.parentElement,r=E=>n.style.maxWidth=E+"px";n.style.maxWidth="";let i=o.clientWidth,s=o.clientHeight,c=i/2,u=i,d;if(i){for(;c+1<u;)d=~~((c+u)/2),r(d),o.clientHeight==s?u=d:c=d;r(u*e+i*(1-e))}};self.__wrap_balancer(":R15lb6:",1)

To solidify your understanding of match utilities, which can be tricky to comprehend, let's do one more implementation.

We'll provide a range of values - `sm`, `md`, `lg`, and `xl` - and their corresponding pixel values.

If we take a look at the markup, we can see that the size `sm`, `lg`, and `xl

Loading exercise

Transcript

0:00 Just to consolidate your understanding of matchUtilities, because it can be pretty hard to grasp sometimes, let's do another implementation to wrap this up. We're going to provide a series of values, small, medium, large, and xl. You have the pixel values here that you should pass.

0:14 If we look at the markup -- let me make that a bit smaller -- we have the size-sm, large, xl, and even an arbitrary value to try and test out. You can see the medium here does not have the size-md because we're going to set the default value to the medium value. This is your final challenge. Good luck.