Tribute page: Problem with element id="tribute-info"

1

When I first ran the test suite for my code for the Tribute Page, I was failing User Story #6:

  • User Story #6: I should see an element with a corresponding id="tribute-info" , which contains textual content describing the subject of the tribute page.

Initially, I had the ‘id="tribute-info’ in the opening p tag, and it was failing the test. I moved the id to the opening ul tag, and now it passes the test. Can someone explain to me why I couldn’t leave the id in the p tag?

Before moving the id to the ul tag, my code looked like this:

<p id="tribute-info">
	<!-- write stuff about her here -->
	<ul>
		<li>Born in Winnepeg, Manitoba, Canada on December 30, 1924 to Belgian immigrants</li>
		<li>Studied chemistry and mathematics at the University of Manitoba, unable to study engineering due to her gender</li>
		<li>Patented the hydrazine resistojet, a new rocket engine which became the new industry standard because it performed better, more reliably, and used less fuel</li>
		<li>Contributed to TIROS, the first weather satellite capable of remote sensing the Earth, used for weather observation</li>
		<li>Contributed to Nova, a series of rocket designs proposed for the American moon missions</li>
		<li>Contributed to Explorer 32, a satellite used to study the structure and physics of the Earth's upper atmosphere</li>
		<li>Contributed to the Mars Observer spacecraft, a robotic space probe launched to study the Martian surface, atmosphere, climate, and magnetic field</li>
		<li>Received many awards an honors in her field, such as the  AIAA Wyld Propulsion Award and the American Association of Engineering Societies John Fritz Medal</li>
		<li>Received an award for successfully returning to her career after taking 8 years off for her 3 children.</li>
		<li>Elected to the National Academy of Engineering</li>
		<li>Received the National Medal of Technology and Innovation from Barack Obama</li>
  </ul>		
</p>

The code that passed the test looked like this:

<p>
	<!-- write stuff about her here -->
	<ul id="tribute-info">
		<li>Born in Winnepeg, Manitoba, Canada on December 30, 1924 to Belgian immigrants</li>
		<li>Studied chemistry and mathematics at the University of Manitoba, unable to study engineering due to her gender</li>
		<li>Patented the hydrazine resistojet, a new rocket engine which became the new industry standard because it performed better, more reliably, and used less fuel</li>
		<li>Contributed to TIROS, the first weather satellite capable of remote sensing the Earth, used for weather observation</li>
		<li>Contributed to Nova, a series of rocket designs proposed for the American moon missions</li>
		<li>Contributed to Explorer 32, a satellite used to study the structure and physics of the Earth's upper atmosphere</li>
		<li>Contributed to the Mars Observer spacecraft, a robotic space probe launched to study the Martian surface, atmosphere, climate, and magnetic field</li>
		<li>Received many awards an honors in her field, such as the  AIAA Wyld Propulsion Award and the American Association of Engineering Societies John Fritz Medal</li>
		<li>Received an award for successfully returning to her career after taking 8 years off for her 3 children.</li>
		<li>Elected to the National Academy of Engineering</li>
		<li>Received the National Medal of Technology and Innovation from Barack Obama</li>
  </ul>		
</p>
2

The test is this:


      it(`I should see an element with a corresponding
      id="tribute-info", which contains textual content describing the subject
      of the tribute page.`,
      function() {
        assert.isNotNull(document.getElementById('tribute-info'));
        const infoContents =
          document.getElementById('tribute-info').innerText;
        assert.isAbove(
          infoContents.length,
          0,
          'Element does not have any content '
        );
      });

I’m guessing that if you put the id on the p element, the innerText doesn’t see a text element as its child. I’m guessing that ul is some kind of a grouping element.

I don’t completely understand the mechanism here, but this pen seems to support it.

The tests are not perfect. You can do a pull request and improve it.

But look on the bright side - dealing with confusing instruction and having to figure out how to make it work - that’s all part of being a web dev.

3

Thanks for explaining that to me. To check my understanding, I added some text after the p tag + id but before the ‘ul’ tag, and the test passed. So, it was clearly a legitimate move to put the id in the p element, but something about the ul element was cutting off innerText from seeing the text that followed.