Apply a Style Until a Condition is Met with @while Test Case Failure

Apply a Style Until a Condition is Met with @while Test Case Failure
0

#1

Tell us what’s happening:
Font-size is getting updated to the requirement for valid test cases but the automatic test cases against the output fails…

Your code so far


<style type='text/sass'>
  $x:1;
  @while $x < 11{
    .text-#{$x} { font-size:5px * $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/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while/


Apply a Style Until a Condition is Met with @while 11072018
Use @for to Create a Sass Loop - Bug?
Apply a Style Until a Condition is Met with @while Tests Fail
Apply a Style Until a Condition is Met with @while 11072018
#2

Please check followign trhead


#3

Hi @NULL_dev,

I tried that but the lowest I can set to on chrome is 6 px.

I’m running with chrome Version 67.0.3396.99 which already allows adjust the minimum font using advanced settings extension but there is a limit 6 px.

Is the test case for this exercise on the browser output?


#4

Yes, Seems firefox comes with lower 6px for minimum size.(make you you set non for minimum font-size in FF setting)

Note: I don’t know why! but you may need to try some run to get the pass with FF!


#5

Just reported it, thanks comrade for pointing out the issue, really appreciate it.


#6

Thanks for your input @NULL_dev.

I installed Firefox but still running into the same issue, even went into about:config and changes all to 0 for minimum font size.

Also tried with safari browser.

I think this test case needs to be re-written perhaps.

Much appreciated for the timely feedback and best of luck.


#7

As I checked with FF, it seems it fails. but it’s all about luck. If you set min as none(anything) try to rerun the test several times and hope the SASS goes before FCC test hit(it’s completely random, you just need luck about it)

I hope you could get one lucky hit soon.


#8

To pass this test in your brackets you need:

  1. Add space before your property
  2. Delete space before value of this property
  3. Delete space after value of this property
  4. Add space after multiplication operator
  5. Add space after semicolon

Example:

.selector { property:value* $variable; }

#9

Thx it worked with your tip!

{ property:value* $variable; }


#10

I tried with Chrome(Version 67.0.3396.99 (Official Build) (64-bit)) and Firefox(Version 67.0.3396.99 (Official Build) (64-bit)) on Fedora 28 with no luck and found this thread. I tried clearing the cache, tried setting the minimum font size in both browsers, tried removing spaces from the code to match the challenge and was never able to pass tests. I moved to another computer entirely and was able to pass the tests there. I’ll try to remember to update this post with the Chrome version from that computer but the other differences are network speed(passed on a faster machine) and OS(passed on Windows 10, could not on Fedora 28). Hope that helps.


#11

Frustrating these SASS challenges are all buggy. Wish I had the skills and knowledge to help fix. But “try this browser”, “add space here”, “remove a space here”, “spin around 3 times before hitting the submit button” (okay I made that up). Really not acceptable solutions and I’ve spent 10 times longer than it should have taken to get things to work. Very frustrated…