Apply a Style Until a Condition is Met with @while - Browser Hang

freeCodeCamp Support
1

Tell us what’s happening:

As I began typing out my solution, the page kept hanging, and I figured it had to do with an infinite loop that would occur as I typed my solution, since the page is auto-rendering my code as I type it. Each time, I would have to reopen the page in a new tab to type the code, as it would hang. I even tried creating the incrementation line first, still hung. I eventually just typed the solution in notepad and pasted it in, and that worked fine. I’m using Chrome Version 72.0.3626.109 (Official Build) (64-bit).

I don’t know if it’s possible to have this page use a longer delay before auto-rendering, or if there is a way to have people enter their solution in a particular order that would avoid an infinite loop, but it seemed buggy, so I thought I’d mention it. :smiley:

Your code so far


<style type='text/sass'>
    $x: 1;

    @while $x < 10 {
        .text-#{$x} {font-size: 5 * $x;}
        $x: $x + 1;
    }
  
</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
<p class="text-6">Hello</p>
<p class="text-7">Hello</p>
<p class="text-8">Hello</p>
<p class="text-9">Hello</p>
<p class="text-10">Hello</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36.

Link to the challenge:
The forum says I’m not allowed to use links yet for security reasons. Here’s the link without the domain and subdomain:
/front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while/

2

It looks like a fix to this has been written and is waiting to deploy. https://github.com/freeCodeCamp/freeCodeCamp/issues/30289