The challenge involves a 5px font size which chrome doesn’t support, the least seems to be 6px. There’s good news though as it works in Mozilla 45.0.2.
Your code so far
<style type='text/sass'>
$i: 1;
$fontsize: 5px;
@while $i < 11 {
.text-#{$i} {font-size: #{$fontsize * ($i)};}
$i: $i+1;
};
</style>
<p class="text-1" id="text1">Hello</p>
<p class="text-2" id="text2">Hello</p>
<p class="text-3" id="text3">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>
<p>Click the button to get the computed font size for the first letter in the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p>The computed font size for div::first-letter in the test div is: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("text1");
var theCSSprop = window.getComputedStyle(elem, "first-letter").getPropertyValue("font-size");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 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/