Give a Background Color to a Div Element - second test won't pass even though the div's background is silver

[kevcomedia]

Challenge Name

Give a Background Color to a Div Element

Issue Description

If you give the div the wrong class name but the background color is correct, the second test ("Your div element should have a silver background.") should pass, but it doesn't.

Your Code

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
  
  .wrong-class-name {
    background-color: silver;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>

<div class="wrong-class-name">
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

Screenshot

[aishalih]

Based on tutorial, you should name your class to silver-background so it won't show an error

[rohan598]

Yes, the test checks if the class name is "silver-background" and then checks if it changes the background colour to silver. If you change the name of the class, it will flag an error.

[kevcomedia]

The tests are testing two things that are independent of each other. If the div is colored silver, the second test should pass regardless of whether or not the right class name is used.

[rohan598]

Your argument is correct. But on testing with various class names and colour combination, I believe that the test is checking both the things together and not as separate entities, which should be rectified.

[ghost]

I can see that 2nd challenge dependent on the 1st challenge because It says Create a class called silver-background with the background-color of silver. And then Assign this class to your div element. So I think first it checks weather div element has class silver-background or not then it checks the color of that class.

[rohan598]

Just follow these steps to see for yourself why this error is occurring.

1. Open this link in google chrome :
   https://www.freecodecamp.org/challenges/give-a-background-color-to-a-div-element
2. Open developper tools
3. Look for a 'script tag' from the bottom. The one you should be looking for is just bellow
   "<div id="ask-for-help-modal" tabindex="-1" class="modal>"
4. Open the script and check "common.tests "

Observation:-

1. It checks the class name to be equal to 'silver-background'
2. Then, it checks the property 'background-color' of 'silver-background' to be 'rgb(192,192,192)' which is same as 'silver'

[jpdail01]

I'd like to take a shot at this one