7. For Loops - Can't complete second step


#1



https://www.codecademy.com/en/courses/learn-sass/lessons/functions-and-operations/exercises/for-loops?action=resume


Hi guys, I can't make the code work. I have no idea why :frowning:
I passed the first point, but I can't pass the second one, and it says:

"Did you write a for-loop to iterate through the ten divs and set their background adjust hue on their background color in main.scss?"

What can I do?
Thank you


$list: (orange, purple, teal);

@each $item in $list {
  .#{$item} {
    background: $item;
  }
}

@for $i from 1 through 10 {
  .ray:nth-child(#{$i}) {
    background: adjust-hue(blue, $i * 11);
  }
}


#2

The value 10 is not dynamic, but it is a cached value...

$total: 10,

Try using the variable in the for loop.


#3

Thank you.
I tried using the variables now, and the output is correct as before, but it is still not working...

$list: (orange, purple, teal);
$total: 10;
$step: 11;

@each $item in $list {
  .#{$item} {
    background: $item;
  }
}

@for $i from 1 through $total {
  .ray:nth-child(#{$i}) {
    background: adjust-hue(blue, $i * $step);
  }
}

#4

I don't remember if the code was provided for us or if it comes in a later lesson but I don't see a width or margin property in your rule set.

My completed code does not have this segment. Were we told to remove it? Forgive my slow memory. Don't mean to give you the run around.


#5

You're right; the html only has 10 divs with a 'ray' class.
The output looks correct to me: it has

.ray:nth-child(1) {
  background: #2f00ff;
}

up to nth-child(10) and each one with a different color, though the exercise still doesn't work.

However, is it normal that resetting the code won't change anything?


#6

The Get Help button at lower right has an option to redo the exercise. I'm not sure if it just resets the exercise or the whole module. Usually I just rework the code until it works and passes. Run after every change so the changes are saved as you go.

Just tried to get in to check and was told there are too many people in the course at present. Perhaps someone else will read this question and give a more valid answer.


#7

I've been trying for some days so far, I've been resetting the code sometimes but it actually doesn't change the code


#8

As I recall, my lesson had the color bars staggered. One to the left, next to the right, next to the left, and so on. Is yours displaying this way?


#9

I had to set width and height because they weren't displaying, but it's like this (but still telling me to use a loop to set different hues as background)


#10

Let me see if I can get back in and I'll share the width and margin rules. Still can't remember when they were written in, though. I may be getting ahead of things.

Okay, I did get in. I am ahead of the lessons. The width and margin come up in the next lesson.

My code has a selector rule for .ray that I think was added in an earlier lesson (or was preset)...

.ray {
  height: 30px;
}

#11

Still not working :disappointed:
However, thanks for helping :slight_smile:


#12

Wish I could have helped. One last thing, did you remove the color list at the top? We don't need it in this lesson.


#13

Yes, this is my code now

$total: 10;
$step: 11;

.ray {
  height: 30px;
}

@for $i from 1 through $total {
  .ray:nth-child(#{$i}) {
    background: adjust-hue(blue, $i * $step);
  }
}

#14

This is the line I have for $step (I think this was preset, but don't recall)

$step: 360deg / $total; //Used to compute the hue based on color-wheel

#15

IT WORKS NOW

Thank you!


#16

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.