Hello.
I am at the Technical Documentation Page project at the NEW Responsive Web and I have all the checkups correct but when I click the “run the tests” button it appears as if I have only 60% of the project.
Is there something wrong?
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css">
<title>Technical Documentation Page</title>
</head>
<body>
<div class="container">
<nav id="navbar">
<header class="nav-header">
JS Loops and Iteration
</header>
<hr>
<hr>
<ul class="nav-ul">
<li>
<a class="nav-link" href="#introduction">
Introduction
</a>
</li>
<hr>
<li>
<a class="nav-link" href="#for_statement">
for statement
</a>
</li>
<hr>
<li>
<a class="nav-link" href="#do...while_statement">
do...while statement
</a>
</li>
<hr>
<li>
<a class="nav-link" href="#while_statement">
while statement
</a>
</li>
<hr>
<li>
<a class="nav-link" href="#labeled_statement">
labeled statement
</a>
</li>
<hr>
<li>
<a class="nav-link" href="#break_statement">
break statement
</a>
</li>
<hr>
<li>
<a class="nav-link" href="#continue_statement">
continue statement
</a>
</li>
<hr>
<li>
<a class="nav-link" href="#for...in_statement">
for...in statement
</a>
</li>
<hr>
<li>
<a class="nav-link" href="#for...of_statement">
for...of statement
</a>
</li>
</ul>
</nav>
<main id="main-doc">
<h1>JS Loops and Iteration</h1>
<section class="main-section" id="introduction">
<header>
<h3>Introduction</h3>
</header>
<p>
Loops offer a quick and easy way to do something repeatedly. You can think of a loop as a computerized version of the game where you tell someone to take X steps in one direction, then Y steps in another. For example, the idea "Go five steps to the east" could be expressed this way as a loop:
</p>
<code>
for (let step = 0; step < 5; step++) { <br>
// Runs 5 times, with values of step 0 through 4. <br>
console.log('Walking east one step');
}
</code>
<p>
There are many different kinds of loops, but they all essentially do the same thing: they repeat an action some number of times. The various loop mechanisms offer different ways to determine the start and end points of the loop. There are various situations that are more easily served by one type of loop over the others.
</p>
<ul>
<li>for statement</li>
<li>do...while statement</li>
<li>while statement</li>
<li>labeled statement</li>
<li>break statement</li>
<li>continue statement</li>
<li>for...in statement</li>
<li>for...of statement</li>
</ul>
</section>
<section class="main-section" id="for_statement">
<header>
<h3><span class="back">for</span> statement</h3>
</header>
<p>
A <span class="back special-font">for</span> loop repeats until a specified condition evaluates to false. The JavaScript <span class="back special-font">for</span> loop is similar to the Java and C for loop. A <span class="back special-font">for</span> statement looks as follows:
</p>
<code>
for ([initialExpression]; [conditionExpression]; [incrementExpression]) <br>
statement
</code>
<p>
When a <span class="back special-font">for</span> loop executes, the following occurs:
</p>
<ol>
<li>
The initializing expression <span class="back special-font">initialExpression</span>, if any, is executed. This expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.
</li>
<li>
The <span class="back special-font">conditionExpression</span> expression is evaluated. If the value of <span class="back special-font">conditionExpression</span> is true, the loop statements execute. Otherwise, the <span class="back special-font">for</span> loop terminates. (If the <span class="back special-font">conditionExpression</span> expression is omitted entirely, the condition is assumed to be true.)
</li>
<li>
The <span class="back special-font">statement</span> executes. To execute multiple statements, use a block statement <span class="back special-font">({ ... })</span> to group those statements.
</li>
<li>
If present, the update expression <span class="back special-font">incrementExpression</span> is executed.
</li>
<li>
Control returns to Step 2.
</li>
</ol>
</section>
<section class="main-section" id="do...while_statement">
<header>
<h3><span class="back">do...while</span> statement</h3>
</header>
<p>
The <span class="back special-font">do...while</span> statement repeats until a specified condition evaluates to false. A <span class="back special-font">do...while</span> statement looks as follows:
</p>
<code>
do <br>
statement <br>
while (condition);
</code>
<p>
<span class="back special-font">statement</span> is always executed once before the condition is checked. (To execute multiple statements, use a block statement <span class="back special-font">({ ... })</span> to group those statements.)
</p>
<p>
If <span class="back special-font">condition</span> is <span class="back special-font">true</span>, the statement executes again. At the end of every execution, the condition is checked. When the condition is <span class="back special-font">false</span>, execution stops, and control passes to the statement following <span class="back special-font">do...while</span>.
</p>
</section>
<section class="main-section" id="while_statement">
<header>
<h3><span class="back">while</span> statement</h3>
</header>
<p>
A <span class="back special-font">while</span> statement executes its statements as long as a specified condition evaluates to true. A while statement looks as follows:
</p>
<code>
while (condition) <br>
statement
</code>
<p>
If the <span class="back special-font">condition</span> becomes <span class="back special-font">false</span>, <span class="back special-font">statement</span> within the loop stops executing and control passes to the statement following the loop.
</p>
<p>
The condition test occurs before <span class="back special-font">statement</span> in the loop is executed. If the condition returns <span class="back special-font">true</span>, <span class="back special-font">statement</span> is executed and the <span class="back special-font">condition</span> is tested again. If the condition returns <span class="back special-font">false</span>, execution stops, and control is passed to the statement following <span class="back special-font">while</span>. To execute multiple statements, use a block statement <span class="back special-font">({ ... })</span> to group those statements.
</p>
</section>
<section class="main-section" id="labeled_statement">
<header>
<h3><span class="back">labeled</span> statement</h3>
</header>
<p>
A <span class="back special-font">label</span> provides a statement with an identifier that lets you refer to it elsewhere in your program. For example, you can use a label to identify a loop, and then use the <span class="back special-font">break</span> or <span class="back special-font">continue</span> statements to indicate whether a program should interrupt the loop or continue its execution. The syntax of the labeled statement looks like the following:
</p>
<code>
label : <br>
statement
</code>
<p>
The value of <span class="back special-font">label</span> may be any JavaScript identifier that is not a reserved word. The <span class="back special-font">statement</span> that you identify with a label may be any statement.
</p>
</section>
<section class="main-section" id="break_statement">
<header>
<h3><span class="back">break</span> statement</h3>
</header>
<p>
Use the <span class="back special-font">break</span> statement to terminate a loop, <span class="back special-font">switch</span>, or in conjunction with a labeled statement.
</p>
<ul>
<li>
When you use <span class="back special-font">break</span> without a label, it terminates the innermost enclosing <span class="back special-font">while</span>, <span class="back special-font">do-while</span>, <span class="back special-font">for</span>, or <span class="back special-font">switch</span> immediately and transfers control to the following statement.
</li>
<li>
When you use <span class="back special-font">break</span> with a label, it terminates the specified labeled statement.
</li>
</ul>
<p>
The syntax of the <span class="back special-font">break</span> statement looks like this:
</p>
<code>
break; <br>
break [label];
</code>
<ol>
<li>
The first form of the syntax terminates the innermost enclosing loop or <span class="back special-font">switch</span>.
</li>
<li>
The second form of the syntax terminates the specified enclosing labeled statement.
</li>
</ol>
</section>
<section class="main-section" id="continue_statement">
<header>
<h3><span class="back">continue</span> statement</h3>
</header>
<p>
The <span class="back special-font">continue</span> statement can be used to restart a <span class="back special-font">while</span>, <span class="back special-font">do-while</span>, <span class="back special-font">for</span>, or <span class="back special-font">label</span> statement.
</p>
<ul>
<li>When you use <span class="back special-font">continue</span> without a label, it terminates the current iteration of the innermost enclosing <span class="back special-font">while</span>, <span class="back special-font">do-while</span>, or <span class="back special-font">for</span> statement and continues execution of the loop with the next iteration. In contrast to the <span class="back special-font">break</span> statement, <span class="back special-font">continue</span> does not terminate the execution of the loop entirely. In a <span class="back special-font">while</span> loop, it jumps back to the condition. In a <span class="back special-font">for</span> loop, it jumps to the <span class="back special-font">increment-expression</spn>.</li>
<li>
When you use <span class="back special-font">continue</span> with a label, it applies to the looping statement identified with that label.
</li>
</ul>
<p>
The syntax of the <span class="back special-font">continue</span> statement looks like the following:
</p>
<code>
continue [label];
</code>
</section>
<section class="main-section" id="for...in_statement">
<header>
<h3><span class="back">for...in</span> statement<h3>
</header>
<p>
The <span class="back special-font">for...in</span> statement iterates a specified variable over all the enumerable properties of an object. For each distinct property, JavaScript executes the specified statements. A <span class="back special-font">for...in</span> statement looks as follows:
</p>
<code>
for (variable in object) <br>
statement
</code>
</section>
<section class="main-section" id="for...of_statement">
<header>
<h3><span class="back">for...of</span> statement</h3>
</header>
<p>
The <span class="back special-font">for...of</span> statement creates a loop Iterating over iterable objects (including <span class="back special-font">Array</span>, <span class="back special-font">Map</span>, <span class="back special-font">Set</span>, <span class="back special-font">arguments</span> object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
</p>
<code>
for (variable of object) <br>
statement
</code>
</section>
<footer>
This Technical documentation page is taken from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">MDN</a>.
</footer>
</main>
</div>
</body>
</html>
:root {
--background-mark: #364e68;
--special-font: monospace;
}
* {
box-sizing: border-box;
}
body {
font-family: "Gill Sans", sans-serif;
background-color: #132238;
color: #ebf0f6;
}
.container {
display: flex;
}
#navbar {
top: 33px;
left: 0;
position: fixed;
max-width: 100px;
}
.nav-header {
font-weight: bold;
color: #e0ffcd;
text-align: center;
}
.nav-ul {
list-style: none;
padding: 0;
text-align: center;
}
.nav-link {
text-decoration: none;
}
main {
margin-right: 10px;
margin-left: 110px;
}
.back {
background-color: var(--background-mark);
}
.special-font {
font-family: var(--special-font);
}
code {
background-color: var(--background-mark);
color: #98ccd3;
display: block;
position: relative;
line-height: 1.8;
padding: 12px;
border-radius: 7px;
}
footer {
margin-top:24px;
}
a {
color: #fdffcd;
}
a:visited {
color: #e0ffcd;
}
a:hover {
color: #ffcab0;
}
@media (max-width: 600px) {
#navbar {
margin-left: 3px;
font-size: small;
max-width: 60px;
}
main {
margin-left: 70px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Build a Technical Documentation Page
Link to the challenge: