Hello. My Doc page is failing the layout test:
- On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.
However, it seems right to me when I use the developer tool. Any clue of what’s wrong? Thanks!
Here’s the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styling -->
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"/>
<!-- Title -->
<title>JS String Methods</title>
<!-- Highlight JS-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<!-- free code camp test suit -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!-- Beginning of Code -->
<nav id="navbar">
<div class="sidebar">
<ul>
<header><h1>JS String Methods</h1></header>
<a class="nav-link" href="#String_Methods_and_Properties">String Methods and Properties</a>
<a class="nav-link" href="#String_Length">String Length</a>
<a class="nav-link" href="#Finding_a_String_in_a_String">Finding a String in a String</a>
<a class="nav-link" href="#Searching_for_a_String_in_a_String">Searching for a String in a String</a>
<a class="nav-link" href="#Extracting_String_Parts">Extracting String Parts</a>
</ul>
</div>
</nav>
<main id="main-doc">
<div class="content">
<section class="main-section" id="String_Methods_and_Properties">
<!-- String Methods and Properties -->
<header>
<h2 id="first"><a>String Methods and Properties</a></h2>
</header>
<p>String methods help you work with strings.</p>
<p>Primitive values, like "John Doe", cannot have properties or methods (because they are not objects).</p>
<p>But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.</p>
</section>
<!-- String Length -->
<section class="main-section" id="String_Length">
<header>
<h2><a>String Length</a></h2>
</header>
<p>The <span>length</span> property returns the length of a string:</p>
<h3 class="example">Example</h3>
<pre><code class="JavaScript">
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
The length property returns the length of a string:
26
</code></pre>
</section>
<!-- Finding a String in a String -->
<section class="main-section" id="Finding_a_String_in_a_String">
<header>
<h2><a>Finding a String in a String</a></h2>
</header>
<!-- indexOf() -->
<p class="method-definition">The <span>indexOf( )</span> method returns the index of (the position of) the first occurrence of a specified text in a string:</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
The indexOf() method returns the position of the first occurrence of a specified text:
7
</code></pre>
<!-- a highlight -->
<div class="highlight">
<p>JavaScript counts positions from zero.
0 is the first position in a string, 1 is the second, 2 is the third ...</p>
</div><!-- end highlight-->
<!-- lastIndexOf() -->
<p class="method-definition extra-info">The <span>lastIndexOf( )</span> method returns the index of the last occurrence of a specified text in a string:</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
21
</code></pre>
<p class="method-definition extra-info">Both <span>indexOf( )</span>, and <span>lastIndexOf( )</span> return -1 if the text is not found.</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("John");
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
-1
</code></pre>
<p class="method-definition extra-info">Both methods accept a second parameter as the starting position for the search:</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate", 15);
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
21
</code></pre>
<p class="method-definition extra-info">The <span>lastIndexOf( )</span> methods searches backwards (from the end to the beginning), meaning: if the second parameter is 15, the search starts at position <span>15</span>, and searches to the beginning of the string.</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate", 15);
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
7
</code></pre>
</section>
<!-- Searching for a String in a String -->
<section class="main-section" id="Searching_for_a_String_in_a_String">
<header>
<h2><a>Searching for a String in a String</a></h2>
</header>
<p class="method-definition">The search( ) method searches a string for a specified value and returns the position of the match:</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate");
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
7
</code></pre>
<!-- a highlight -->
<div class="highlight">
<p>The two methods, <span>indexOf( )</span> and <span>search( )</span>, accept the same arguments (parameters), and return the same value. However, they are not equal. </p>
<p>Here are the differences:</p>
<ul class="list-highlight">
<li>The <span>search( )</span> method cannot take a second start position argument.</li>
<li>The <span>indexOf( )</span> method cannot take powerful search values (regular expressions).</li>
</ul>
</div><!-- end highlight-->
</section>
<!-- Extracting String Parts -->
<section class="main-section" id="Extracting_String_Parts">
<header>
<h2><a>Extracting String Parts</a></h2>
</header>
<p class="method-definition">There are 3 methods for extracting a part of a string:</p>
<ul class="extracting">
<li>slice(start, end)</li>
<li>substring(start, end)</li>
<li>substr(start, length)</li>
</ul>
<!-- slice -->
<p class="method-definition extra-info"> The <span>slice( )</span> method extracts a part of a string and returns the extracted part in a new string.</p>
<p>The method takes 2 parameters: the start position, and the end position (end not included). This example slices out a portion of a string from position 7 to position 12 (13-1):</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
Banana
</code></pre>
<p class="method-definition extra-info">If a parameter is negative, the position is counted from the end of the string. This example slices out a portion of a string from position -12 to position -6:</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12, -6);
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
Banana
</code></pre>
<p class="method-definition extra-info">If you omit the second parameter, the method will slice out the rest of the string:</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Apple, Banana, Kiwi";
var res = str.slice(7);
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
Banana, Kiwi
</code></pre>
<p class="method-definition extra-info">or, counting from the end:</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12);
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
Banana, Kiwi
</code></pre>
<!-- substring -->
<p class="method-definition extra-info"> The <span>substring( )</span> method is similar to the <span>slice( )</span> method. The difference is that it cannot accept negative indexes.</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Apple, Banana, Kiwi";
var res = str.substring(7, 13);
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
Banana
</code></pre>
<p>If you omit the second parameter, <span>substring( )</span> will slice out the rest of the string.</p>
<!-- substr -->
<p class="method-definition extra-info">The <span>substr( )</span> is similar to the <span>slice( )</span> method. The difference is that the second parameter specifies the <span>length</span> of the extracted part.</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Apple, Banana, Kiwi";
var res = str.substr(7, 6);
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
Banana
</code></pre>
<p class="method-definition extra-info">If you omit the second parameter, <span>substr()</span> will slice out the rest of the string.</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Apple, Banana, Kiwi";
var res = str.substr(7);
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
Banana, kiwi
</code></pre>
<p class="method-definition extra-info">If the first parameter is negative, the position counts from the end of the string.</p>
<h3>Example</h3>
<pre><code class="JavaScript">
var str = "Apple, Banana, Kiwi";
var res = str.substr(-4);
</code></pre>
<h3 class="output">Output</h3>
<pre><code class="JavaScript">
kiwi
</code></pre>
</section>
</div>
</main>
</body>
</html>
Here’s the CSS code:
:root {
--primary-color: #0F192E;
--secondary-color: #E5E5E5;
--accent-color: #FCA311;
}
/* reset */
* {
box-sizing: border-box; /* prevent padding and border to add width to the element */
margin: 0;
padding: 0;
}
html {
font-size: 62.5%; /* =10px */
}
body {
font-family: 'Ubuntu', sans-serif;
line-height: 1.6;
color: var(--primary-color);
font-size: 1.5rem;
background-color: var(--secondary-color);
}
h1,
h2,
h3,
h4 {
line-height: 1.3;
}
a {
color: #0F192E;
text-decoration: none; /* remove the underline */
}
ul {
list-style: none; /* take away the bullet points */
}
img {
max-width: 100%;
}
/* **********
The side navigation menu
*********** */
.sidebar {
margin: 0;
padding: 0;
width: 300px;
background-color: #0F192E;
position: fixed;
height: 100%;
overflow: auto;
}
/* Sidebar h1 title */
.sidebar h1 {
background-color: #0F192E;
display: block;
color: #E5E5E5;
padding: 16px;
font-size: 3rem;
}
/* Sidebar links */
.sidebar a {
display: block;
color: #E5E5E5;
padding: 16px;
text-decoration: none;
font-size: 1.8rem;
}
/* Links on mouse-over */
.sidebar a:hover {
background-color: #7490D2;
color: white;
}
/* **********
Page content.
The value of the margin-left property should match the value of the sidebar's width property
*********** */
div.content {
margin-left: 300px;
padding: 1px 16px;
height: 1000px;
}
#String_Methods_and_Properties h2 {
font-size: 2.5rem;
margin-top: 90px;
color: #466CC3;
}
header h2 {
margin-top: 70px;
margin-bottom: 30px;
}
header h2,
h3,
p, pre {
margin-left: 20px;
margin-right: 20px;
}
code {
padding: 0;
border-left: 5px solid var(--accent-color);
}
h3 {
font-family: 'IBM Plex Mono', monospace;
margin-bottom: 10px;
}
.output {
margin-top: 20px;
}
p {
padding: 10px 0;
}
span {
color: #466CC3;
}
div .highlight {
background-color: #FED086;
margin: 60px 20px 10px 20px;
}
.list-highlight {
margin: 0 20px;
padding-left: 10px;
padding-bottom: 10px;
}
.extra-info {
padding-top: 40px;
}
#Extracting_String_Parts {
margin-bottom: 60px;
}
.extracting {
margin: 0 20px;
list-style: circle;
}
.extracting li {
margin: 0 20px 0 40px;
padding-bottom: 10px;
}
/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 415px) {
.sidebar h1, .sidebar a {
text-align: left;
float: none;
padding-left: 35px;
}
#String_Methods_and_Properties h2 {
margin-top: 30px;
}
}