Trouble w/ Technical Doc navbar
Keep getting issue that reads:
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.
Googled this about 50 times now, and no adjustments seem to work. Changed height, removed margins, but nothing. I’ve tested the page to see if the navbar moves at all,(even used dev tools to check mobile devices) but not as far as I can see. Any ideas what I’m doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Technical Documentation
</title>
<style>
body {
margin: 0;
}
#navbar {
position: fixed;
}
#nav-list {
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
width: 25vw;
background-color: navy;
height: 100%;
}
.nav-item, a {
display: block;
font-size: 1em;
padding: 10px;
}
a,h1 {
color: yellowgreen;
}
a:visited {
color: yellow;
}
#main-doc,footer {
margin-left: 25vw;
padding-left: 3em;
padding-right: 3em;
font-size: 2em;
line-height: 2em;
}
@media screen and (max-width: 500px) {
#navbar {
width: 20%;
float: left;
font-size: smaller;
}
.nav-item {
font-size: smaller;
}
main,footer {
padding-right: 6em;
margin-right: 6em;
padding-left: 2em;
}
h1{
font-size: smaller;
}
}
</style>
</head>
<body>
<nav id="navbar">
<header>
<h1>
Create An Angular Application
</h1>
</header>
<ul id="nav-list">
<li class="nav-item">
<a
class="nav-link"
href="#Prerequisites">
Prerequisites
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#Example_application_start">
Example Application Start
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#Create_the_product_list">
Create the product list
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#Pass_data_to_a_child_component">
Pass data to a child component
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#Pass_data_to_a_parent_component">
Pass data to a parent component
</a>
</li>
</ul>
</nav>
<main id="main-doc">
<section
id="Prerequisites"
class="main-section">
<header>
<h2>Prerequisites</h2>
</header>
<p>This documentation discusses creating an Angular application.</p>
<p>
To get the most out of this tutorial you should already have a basic understanding of the following:
</p>
<ul>
<li>HTML</li>
<li>JavaScript</li>
<li>TypeScript</li>
</ul>
<p>
This guide demonstrates building an application with the following components:
</p>
<ul>
<li>
<code class="selector">app-root</code> - the first component to load and the container for the other components
</li>
<li>
<code class="selector">app-top-bar</code> - the store name and checkout button
</li>
<li>
<code class="selector">app-product-list</code> - the product list
</li>
<li>
<code class="selector">app-product-alerts</code> - a component that contains the application's alerts
</li>
</ul>
</section>
<section
id="Example_application_start"
class="main-section">
<header>
<h2>Example application start</h2>
</header>
<p>
You build Angular applications with components. Components define areas of responsibility in the UI that let you reuse sets of UI functionality.
</p>
<ul >
<li class="list_header">
A component consists of three things:
</li>
<li>
<strong>A<em> component class</em></strong> that handles data and functionality
</li>
<li>
<strong>An<em> HTML template</em></strong> that determines the UI
</li>
<li>
<strong><em>Component-specific styles</em></strong> that define the look and feel
</li>
</ul>
</section>
<section
id="Create_the_product_list"
class="main-section">
<header>
<h2>Create the product list</h2>
</header>
<p>
In this section, you'll update the application to display a list of products. You'll use predefined product data from the products.ts file and methods from the <code>product-list.component.ts</code> file. This section guides you through editing the HTML, also known as the template.
</p>
<ol>
<li>
In the <code>product-list</code> folder, open the template file <code>product-list.component.html</code>.
</li>
<li>Add an <code class="directive">*ngFor</code> structural directive on a <code class="element">div</code>, as follows:
<br>
With <code class="directive">*ngFor</code>, the <code class="element">div</code> repeats for each product in the list. Structural directives shape or reshape the DOM's structure, by adding, removing, and manipulating elements. For more information about structural directives, see <a href="#">Structural directives</a>.
</li>
<li>
Inside the <code class="element">div</code>, add an <code class="element">h3</code> and <code class="statement">{{ product.name }}</code>. The <code class="statement">{{ product.name }}</code> statement is an example of Angular's interpolation syntax. Interpolation <code class="syntax">{{ }}</code> lets you render the property value as text.
</li>
<li class="list_header">
The preview pane updates to display the name of each product in the list.
</li>
<li>
To make each product name a link to product details, add the <code class="element">a</code> element around <code class="statement">{{ product.name }}</code>.
</li>
<li>
Set the title to be the product's name by using the property binding <code class="syntax">[ ]</code> syntax, as follows:
</li>
<li>
In the preview pane, hover over a product name to see the bound name property value, which is the product name plus the word "details". Property binding <code class="syntax">[ ]</code> lets you use the property value in a template expression.
</li>
<li>
Add the product descriptions. On a <code class="element">p</code> element, use an <code class="directive">*ngIf</code> directive so that Angular only creates the <code class="element">p</code> element if the current product has a description. The application now displays the name and description of each product in the list. Notice that the final product does not have a description paragraph. Angular doesn't create the <code class="element">p</code> element because the product's description property is empty.
</li>
<li>
Add a button so users can share a product. Bind the button's click event to the <code class="method">share()</code> method in <code>product-list.component.ts</code>. Event binding uses a set of parentheses, <code class="syntax">( )</code>, around the event, as in the <code class="event">(click)</code> event on the <code class="element">button</code> element.
</li>
</ol>
<ul>
<li>
Each product now has a <strong>Share</strong> button.
</li>
<li>
Clicking the <strong>Share</strong> button triggers an alert that states, "The product has been shared!".
</li>
<li>
In editing the template, you have explored some of the most popular features of Angular templates. For more information, see <a href="#">Introduction to components and templates</a>.
</li>
</ul>
</section>
<section
id="Pass_data_to_a_child_component"
class="main-section">
<header>
<h2>Pass data to a child component</h2>
</header>
<p>
Currently, the product list displays the name and description of each product. The <code class="component-name">ProductListComponent</code> also defines a products property that contains imported data for each product from the products array in <code>products.ts</code>.
</p>
<p>
The next step is to create a new alert feature that uses product data from the <code class="component-name">ProductListComponent</code>. The alert checks the product's price, and, if the price is greater than $700, displays a <strong>Notify Me</strong> button that lets users sign up for notifications when the product goes on sale.
</p>
<p>
This section walks you through creating a child component, <code class="component-name">ProductAlertsComponent</code> that can receive data from its parent component, <code class="component-name">ProductListComponent</code>.
</p>
<ol>
<li>
Click on the plus sign above the current terminal to create a new terminal to run the command to generate the component.
</li>
<li>
In the new terminal, generate a new component named <code>product-alerts</code> by running the following command:
<code class="command">ng generate component product-alerts</code>
The generator creates starter files for the three parts of the component:
<ul>
<li>
<code>product-alerts.component.ts</code>
</li>
<li>
<code>product-alerts.component.html</code>
</li>
<li>
<code>product-alerts.component.css</code>
</li>
</ul>
</li>
<li>
Open <code>product-alerts.component.ts</code>. The <code class="decorator">@Component()</code> decorator indicates that the following class is a component. <code class="decorator">@Component()</code> also provides metadata about the component, including its selector, templates, and styles.
</li>
<li class="list_header">
Key features in the <code class="decorator">@Component()</code> are as follows:
<ul>
<li>
The <code class="selector">selector</code>, <code class="selector">app-product-alerts</code>, identifies the component. By convention, Angular component selectors begin with the prefix <code class="selector">app-</code>, followed by the component name.
</li>
<li>
The template and style filenames reference the component's HTML and CSS
</li>
<li>
The <code class="decorator">@Component()</code> definition also exports the class, <code class="component-name">ProductAlertsComponent</code>, which handles functionality for the component.
</li>
</ul>
</li>
<li>
To set up <code class="component-name">ProductAlertsComponent</code> to receive product data, first import <em><strong>Input</strong></em> from <code class="import">@angular/core</code>.
</li>
<li>
In the <code>ProductAlertsComponent</code> class definition, define a property named product with an <code class="decorator">@Input()</code> decorator. The <code class="decorator">@Input()</code> decorator indicates that the property value passes in from the component's parent, <code class="component-name">ProductListComponent</code>.
</li>
<li>
Open <code>product-alerts.component.html</code> and replace the placeholder paragraph with a <strong>Notify Me</strong> button that appears if the product price is over $700.
</li>
<li>
The generator automatically added the <code class="component-name">ProductAlertsComponent</code> to the <code class="module">AppModule</code> to make it available to other components in the application.
</li>
<li>
Finally, to display <code class="component-name">ProductAlertsComponent</code> as a child of <code class="component-name">ProductListComponent</code>, add the <code class="selector">app-product-alerts</code> element to <code>product-list.component.html</code>. Pass the current product as input to the component using property binding.
</li>
</ol>
<ul>
<li>
The new product alert component takes a product as input from the product list. With that input, it shows or hides the <strong>Notify Me</strong> button, based on the price of the product. The Phone XL price is over $700, so the <strong>Notify Me</strong> button appears on that product.
</li>
</ul>
</section>
<section
id="Pass_data_to_a_parent_component"
class="main-section">
<header>
<h2>Pass data to a parent component</h2>
</header>
<p>
To make the <strong>Notify Me</strong> button work, the child component needs to notify and pass the data to the parent component. The <code class="component-name">ProductAlertsComponent</code> needs to emit an event when the user clicks <strong>Notify Me</strong> and the <code class="component-name">ProductListComponent</code> needs to respond to the event.
</p>
<ul>
<li>
In new components, the Angular Generator includes an empty <code class="constructor">constructor()</code>, the <code class="interface">OnInit</code> interface, and the <code class="method">ngOnInit()</code> method. Since these steps don't use them, the following code examples omit them for brevity.
</li>
</ul>
<ol>
<li>
In <code>product-alerts.component.ts</code>, import <code class="import">Output</code> and <code class="import">EventEmitter</code> from <code class="import">@angular/core</code>.
</li>
<li>
In the component class, define a property named <code class="property">notify</code> with an <code class="decorator">@Output()</code> decorator and an instance of <code class="event">EventEmitter()</code>. Configuring <code class="component-name">ProductAlertsComponent</code> with an <code class="decorator">@Output()</code> allows the <code class="component-name">ProductAlertsComponent</code> to emit an event when the value of the <code class="property">notify</code> property changes.
</li>
<li>
In <code>product-alerts.component.html</code>, update the <strong>Notify Me</strong> button with an event binding to call the <code class="method">notify.emit()</code> method.
</li>
<li>
Define the behavior that happens when the user clicks the button. The parent, <code class="component-name">ProductListComponent</code>—not the <code class="component-name">ProductAlertsComponent</code>—acts when the child raises the event. In <code>product-list.component.ts</code>, define an <code class="method">onNotify()</code> method, similar to the <code class="method">share()</code> method.
</li>
<li>
Update the <code class="compon">ProductListComponent</code> to receive data from the <code class="compon">ProductAlertsComponent</code>. In <code>product-list.component.html</code>, bind <code class="selector">app-product-alerts</code> to the <code class="method">onNotify()</code> method of the product list component. <code class="selector">app-product-alerts</code> is what displays the <strong>Notify Me</strong> button.
</li>
<li>
Click the <strong>Notify Me</strong> button to trigger an alert which reads, "You will be notified when the product goes on sale".
</li>
</ol>
<p>The End!!!!!</p>
</section>
</main>
<footer>
For more information on communication between components, see <a href="#">Component Interaction</a>.
</footer>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36
Challenge: Build a Technical Documentation Page
Link to the challenge: