I’m having trouble passing user story #4: User Story #4: Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header “JavaScript and Java” should have a corresponding id="JavaScript_and_Java" ).
Any help would be greatly appreciated.
Here is the section of html i’m having trouble with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documentation Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="navbar">
<header>JavaScript Basics</header>
<ul>
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li>
<a class="nav-link" href="#What_is_Javascript">What is Javascript?</a>
</li>
<li>
<a class="nav-link" href="#Language_basics">Language Basics</a>
</li>
<li><a class="nav-link" href="#Variables">Variables</a></li>
<li>
<a class="nav-link" href="#Comments">Comments</a>
</li>
<li><a class="nav-link" href="#Operators">Operators</a></li>
<li><a class="nav-link" href="#Conditionals">Conditionals</a></li>
<li><a class="nav-link" href="#Functions">Functions</a></li>
<li><a class="nav-link" href="#Events">Events</a></li>
<li>
</li>
</ul>
</nav>
<main id = "main-doc">
<section class = "main-section"id ="Introduction">
<header>Introduction</header>
<p>JavaScript is a programming language that adds interactivity to your website. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible.</p>
</section>
<section class = "main-section"id ="What_is_Javascript">
<header>What is Javascript?</header>
<p>JavaScript ("JS" for short) is a full-fledged dynamic programming language that can add interactivity to a website. It was invented by Brendan Eich (co-founder of the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation).
<br>
<br>
JavaScript is versatile and beginner-friendly. With more experience, you'll be able to create games, animated 2D and 3D graphics, comprehensive database-driven apps, and much more!
<br>
<br>
JavaScript itself is relatively compact, yet very flexible. Developers have written a variety of tools on top of the core JavaScript language, unlocking a vast amount of functionality with minimum effort. These include:</p>
<ul>
<li>Browser Application Programming Interfaces (APIs) built into web browsers, providing functionality such as dynamically creating HTML and setting CSS styles; collecting and manipulating a video stream from a user's webcam, or generating 3D graphics and audio samples.</li>
<br>
<li>Third-party APIs that allow developers to incorporate functionality in sites from other content providers, such as Twitter or Facebook.</li>
<br>
<li>Third-party frameworks and libraries that you can apply to HTML to accelerate the work of building sites and applications.</li>
<br>
<li>Testing frameworks</li><br>
<li>CSS preprocessors</li>
<br></ul>
<p>It's outside the scope of this article—as a light introduction to JavaScript—to present the details of how the core JavaScript language is different from the tools listed above.</p>
</section>
<section class = "main-section"id ="Language_basics">
<header>Language basics</header>
<p>To give you a better understanding of how JavaScript works, let's explain some of the core features of the language. It's worth noting that these features are common to all programming languages. If you master these fundamentals, you have a head start on coding in other languages too!</p>
</section>
<section class = "main-section"id ="Variables">
<header>Variables</header>
<p>Variables are containers that store values. You start by declaring a variable with the var (less recommended, dive deeper for the explanation) or the let keyword, followed by the name you give to the variable:
<br>
<br>
<code>let myVariable;</code>
<br><br>
A semicolon at the end of a line indicates where a statement ends. It is only required when you need to separate statements on a single line. However, some people believe it's good practice to have semicolons at the end of each statement. There are other rules for when you should and shouldn't use semicolons.
<br><br>
After declaring a variable, you can give it a value:
<br><br>
<code>myVariable = 'Bob';</code>
<br><br>
Also, you can do both these operations on the same line:
<br><br>
<code>let myVariable = 'Bob';</code>
<br><br>
You retrieve the value by calling the variable name:
<br><br>
<code>myVariable;</code>
<br><br>
After assigning a value to a variable, you can change it later in the code:
<br><br>
<code>let myVariable = 'Bob';</code><br>
<code>myVariable = 'Steve';</code>
<br><br>
So why do we need variables? Variables are necessary to do anything interesting in programming. If values couldn't change, then you couldn't do anything dynamic, like personalize a greeting message or change an image displayed in an image gallery.
</p>
</section>
<section class = "main-section"id ="Comments">
<header>Comments</header>
<p>Comments are snippets of text that can be added along with code. The browser ignores text marked as comments. You can write comments in JavaScript just as you can in CSS:
<br><br>
<code>/* <br>
Everything in between is a comment. <br>
*/</code>
<br><br>
If your comment contains no line breaks, it's an option to put it behind two slashes like this:
<br><br>
<code>// This is a comment</code>
</p>
</section>
<section class = "main-section"id ="Operators">
<header>Operators</header>
<p>An operator is a mathematical symbol that produces a result based on two values (or variables). In the following table, you can see some of the simplest operators:
<table id = table style="width:100%">
<caption></caption>
<tr>
<th>Operator</th>
<th>Explanation</th>
<th>Symbol</th>
</tr>
<tr>
<td>Addition</td>
<td>Add two numbers together or combine two strings.</td>
<td>+</td>
</tr>
<tr>
<td>Subtraction, Multiplication, Division</td>
<td>These do what you'd expect them to do in basic math.</td>
<td>-,*, /</td>
</tr>
<tr>
<td>Assignment</td>
<td>As you've seen already: this assigns a value to a variable.</td>
<td>=</td>
</tr>
<tr>
<td>Equality</td>
<td>This performs a test to see if two values are equal. It returns a true/false (Boolean) result.</td>
<td>===</td>
</tr>
<tr>
<td>Not, Does not equal</td>
<td>This returns the logically opposite value of what it precedes. It turns a true into a false, etc.. When it is used alongside the Equality operator, the negation operator tests whether two values are not equal.</td>
<td>!, !==</td>
</tr>
</table>
</p>
</section>
<section class = "main-section"id ="Conditionals">
<header>Conditionals</header>
<p>Conditionals are code structures used to test if an expression returns true or not. A very common form of conditionals is the if ... else statement. For example:</p>
<br>
<code>let iceCream = 'chocolate'; <br>
if(iceCream === 'chocolate') { <br>
alert('Yay, I love chocolate ice cream!'); <br>
} else { <br>
alert('Awwww, but chocolate is my favorite...');
}</code>
<br><br>
<p> The expression inside the if( ... ) is the test. This uses the identity operator (as described above) to compare the variable iceCream with the string chocolate to see if the two are equal. If this comparison returns true, the first block of code runs. If the comparison is not true, the second block of code—after the else statement—runs instead.</p>
</section>
<section class = "main-section"id ="Functions">
<header>Functions</header>
<p>Functions are a way of packaging functionality that you wish to reuse. It's possible to define a body of code as a function that executes when you call the function name in your code. This is a good alternative to repeatedly writing the same code. You have already seen some uses of functions previously.</p>
<p> If you see something which looks like a variable name, but it's followed by parentheses— () —it is likely a function. Functions often take arguments: bits of data they need to do their job. Arguments go inside the parentheses, separated by commas if there is more than one argument.</p>
<p> For example, the <code> alert()</code> function makes a pop-up box appear inside the browser window, but we need to give it a string as an argument to tell the function what message to display.</p>
</section>
<section class = "main-section"id =Events>
<header>Events</header>
<p>Real interactivity on a website requires event handlers. These are code structures that listen for activity in the browser, and run code in response. The most obvious example is handling the click event, which is fired by the browser when you click on something with your mouse.</p>
</section>
</main>
</body>
</html>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
@stomachobjective, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
The first failing message says
Each <section> element with the class of "main-section" should also have an id comprised of the <header> innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective <header> innerText. (e.g. The <section> that contains the header, "JavaScript & Java", should have a corresponding id="JavaScript_&_Java").
Some "main-section" elements are missing the following ids (don't forget to replace spaces with underscores!) : WHAT_IS_JAVASCRIPT? : expected 1 to equal 0
AssertionError: Some "main-section" elements are missing the following ids (don't forget to replace spaces with underscores!) : WHAT_IS_JAVASCRIPT? : expected 1 to equal 0
The message is telling you what the test is looking for and what it is finding.
On a side note, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.