Build a Technical Documentation Page

I’m having this error:

Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.

But I have checked all of my id’s and they are correct. I even copied the texts and pasted them in the id’s replacing the spaces with (_) and the error still occurs.

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="styles.css">
      <title>JavaScript - Objects</title>
    </head>

    <body>
      <article>
      <nav id="navbar">
        <header>JavaScripts Objects!</header>
        <a class="nav-link" href="#real_life_objects">real life objects</a>
        <a class="nav-link" href="#javascript_objects">javascript objects</a>
        <a class="nav-link" href="#object_definition">object definition</a>
        <a class="nav-link" href="#object_properties">object properties</a>
        <a class="nav-link" href="#accessing_object_properties">accessing object properties</a>
        <a class="nav-link" href="#objects_methods">objects methods</a>
        <a class="nav-link" href="#what_is_this">what is this</a>
        <a class="nav-link" href="#the_this_keyword">the this keyword</a>
        <a class="nav-link" href="#accessing_object_methods">accessing object methods</a>
        <a class="nav-link" href="#do_not_declare strings_numbers_and_booleans_as_objects">do not declare strings numbers and booleans as objects</a>
        
      </nav>

      <main id="main-doc">

        <section class="main-section" id="real_life_objects">
          <header>real life objects</header>
          <p>In real life, a car is an <span>object</span>.</p>
          <p>A car has <span>properties</span> like weight and color, and <span>methods</span> like start and stop:</p>
          <table>
            <tr>
              <th>Object</th>
              <th>Properties</th>
              <th>Methods</th>
            </tr>
            <tr>
              <td>
                <img class="img-table" src="https://www.w3schools.com/js/objectExplained.gif">
              </td>
              <td class="td-car">
                <br>
                car.name = Fiat
                <br>
                <br>
                car.model = 500
                <br>
                <br>
                car.weight = 850kg
                <br>
                <br>
                car.color = white
              </td>
              <td class="td-car">
                <br>
                car.start()
                <br>
                <br>
                car.drive()
                <br>
                <br>
                car.break()
                <br>
                <br>
                car.stop()
              </td>
            </tr>
          </table>
          <p>All cars have the same <span>properties</span>, but the property <span>values</span> differ from car to car.</p>
          <p>All cars have the same <span>methods</span>, but the methods are performed <span>at different times</span>.</p>
        </section>

        <section class="main-section" id="javascript_objects">
          <header>javascript objects</header>
          <p>You have already learned that JavaScript variables are containers for data values.</p>
          <p>This code assigns a <span>simple value</span> (Fiat) to a <span>variable</span> named car:</p>
          <code>
            let car = "Fiat";
          </code>
          <p>Objects are variables too. But objects can contain many values.</p>
          <p>This code assigns <span>many values</span> (Fiat, 500, white) to a <span>variable</span> named car:</p>
          <code>
            const car = {type:"Fiat", model:"500", color:"white"};
          </code>
          <p>The values are written as name:value pairs (name and value separated by a colon).</p>
        </section>

        <section class="main-section" id="object_definition">
          <header>object definition</header>
          <p>
            You define (and create) a JavaScript object with an object literal:
          </p>
          <code>
            const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
          </code>
          <p>Spaces and line breaks are not important. An object definition can span multiple lines:</p>
          <code>
            const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
          </code>
        </section>

        <section class="main-section" id="object_properties">
          <header>object properties</header>
          <p>The <span>name:values</span> pairs in JavaScript objects are called <span>properties</span>:</p>
          <table>
            <tr>
              <th>Property</th>
              <th>Property Value</th>
            </tr>
            <tr>
              <td>firstName</td>
              <td>John</td>
            </tr>
            <tr>
              <td>lastName</td>
              <td>Doe</td>
            </tr>
            <tr>
              <td>age</td>
              <td>50</td>
            </tr>
            <tr>
              <td>eyeColor</td>
              <td>blue</td>
            </tr>
          </table>
        </section>

        <section class="main-section" id="accessing_object_properties">
          <header>accessing object properties</header>
          <p>You can access object properties in two ways:</p>
          <code>
            objectName.propertyName
          </code>
          <i> or</i>
          <code>
            objectName["propertyName"]
          </code>
        </section>

        <section class="main-section" id="objects_methods">
          <header>objects methods</header>
          <p>Objects can also have <span>methods</span>.</p>
          <p>Methods are <span>actions</span> that can be performed on objects.</p>
          <p>Methods are stored in properties as <span>function definitions</span>.</p>
          <table>
            <tr>
              <th>Property</th>
              <th>Property Value</th>
            </tr>
            <tr>
              <td>firstName</td>
              <td>John</td>
            </tr>
            <tr>
              <td>lastName</td>
              <td>Doe</td>
            </tr>
            <tr>
              <td>fullName</td>
              <td>	function() {return this.firstName + " " + this.lastName;}</td>
            </tr>
          </table>
            <p>In the example above, <code>this</code> refers to the <span>person object</span>.</p>

            <p>I.E. <span>this.firstName</span> means the <span>firstName</span> property of <span>this</span>.</p>

            <p>I.E. <span>this.firstName</span> means the <span>firstName</span> property of <span>person</span>.</p>
        </section>

        <section class="main-section" id="what_is_this">
          <header>what is this</header>
          <p>In JavaScript, the <code>this</code> keyword refers to an <span>object</span>.</p>

          <p><span>Which</span> object depends on how <code>this</code> is being invoked (used or called).</p>

          <p>The <code>this</code> keyword refers to different objects depending on how it is used:</p>
          <table>
            <tr>
              <td class="td-left"><li>In an object method, <code>this</code> refers to the <span>object</span>.</li></td>
            </tr>
            <tr>
              <td class="td-left"><li>Alone, <code>this</code> refers to the <span>global object</span>.</li></td>
            </tr>
            <tr>
              <td class="td-left"><li>In a function, <code>this</code> refers to the <span>global object</span>.</li></td>
            </tr>
            <tr>
              <td class="td-left"><li>In a function, in strict mode, <code>this</code> is <code>undefined</code>.</li></td>
            </tr>
            <tr>
              <td class="td-left"><li>In an event, <code>this</code> refers to the element that received the event.</li></td>
            </tr>
            <tr>
              <td class="td-left"><li>Methods like <code>call()</code>, <code>apply()</code>, and <code>bind()</code> can refer <code>this</code> to <span>any object</span>.</li></td>
            </tr>
          </table>
        </section>

        <section class="main-section" id="the_this_keyword">
          <header>the this keyword</header>
          <p>In a function definition, <code>this</code> refers to the "owner" of the function.</p>

          <p>In the example above, <code>this</code> is the <span>person object</span> that "owns" the <code>fullName</code> function.</p>

          <p>In other words, <code>this.firstName</code> means the <code>firstName</code> property of <span>this object</span>.</p>
        </section>

        <section class="main-section" id="accessing_object_methods">
          <header>accessing object methods</header>
          <p>You access an object method with the following syntax:</p>
          <code>objectName.methodName()</code>
          <p>If you access a method without the () parentheses, it will return the function definition</p>
        </section>

        <section class="main-section" id="do_not_declare strings_numbers_and_booleans_as_objects">
          <header>do not declare strings numbers and booleans as objects</header>
          <p>When a JavaScript variable is declared with the keyword "new", the variable is created as an object:</p>
          <code>x = new String();  // Declares x as a String object</code>
          <code>y = new Number();  // Declares y as a Number object</code>
          <code>z = new Boolean();  // Declares z as a Boolean object</code>
          <p>Avoid String, Number, and Boolean objects. They complicate your code and slow down execution speed.</p>
        </section>

      </main>

      </article>
    </body>
  </html>

is there an underscore missing between the word declare and strings?

1 Like

Thank you so much! I didn’t see it because of the line break :sweat_smile:

1 Like