My code is fulfilling every requirements, but still it’s not working. It been like this for a long time and I am sure that it’s not cache.
Here is my html code:
"<!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">
</head>
<main id='main-doc'>
<div class='container'>
<div class='nav-div'>
<!-- navbar -->
<nav id='navbar'>
<header>JS Documentation</header>
<ul>
<li>
<a class='nav-link' href='#Introduction'>
Introduction
</a>
</li>
<li>
<a class='nav-link' href='#What_you should_already_know'>
What you should already know
</a>
</li>
<li>
<a class='nav-link' href='#JavaScript_and_Java'>
JavaScript and Java
</a>
</li>
<li>
<a class='nav-link' href='#Hello_world'>
Hello world
</a>
</li>
<li>
<a class='nav-link' href='#Variables'>
Variables
</a>
</li>
</ul>
</nav>
</div>
<div>
<!-- main section -->
<!-- 1st Section -->
<section class='main-section' id='Introduction'>
<header>Introduction</header>
<article class='writing-blocks'>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language.
Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its
environment to provide programmatic control over them.
</p>
<p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of
language elements such as operators, control structures, and statements. Core JavaScript can be extended for
a variety of purposes by supplementing it with additional objects; for example:
</p>
<ul>
<li>Client-side JavaScript extends the core language by supplying objects to control a browser and its
Document Object Model (DOM). For example, client-side extensions allow an application to place elements on
an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
<li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on
a server. For example, server-side extensions allow an application to communicate with a database, provide
continuity of information from one invocation to another of the application, or perform file manipulations
on a server.</li>
</ul>
</article>
</section>
<!-- main section second -->
<section class='main-section' id='What_you should_already_know'>
<header>What you should already know</header>
<article class='writing-blocks'>
<p>This guide assumes you have the following basic background:
</p>
<ul>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
<li>Good working knowledge of HyperText Markup Language (HTML).</li>
<li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main
page about JavaScript.</li>
</ul>
</article>
</section>
<section class='main-section' id='JavaScript_and_Java'>
<!-- main section third -->
<header>JavaScript and Java</header>
<article class='writing-blocks'>
<p>JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why
it was renamed from LiveScript to JavaScript.
</p>
<p>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime
system based on a small number of data types representing numeric, Boolean, and string values. JavaScript
has a prototype-based object model instead of the more common class-based object model. The prototype-based
model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript
also supports functions without any special declarative requirements. Functions can be properties of
objects, executing as loosely typed methods.
</p>
<p>JavaScript is a very free-form language compared to Java. You do not have to declare all variables,
classes, and methods. You do not have to be concerned with whether methods are public, private, or
protected, and you do not have to implement interfaces. Variables, parameters, and function return types are
not explicitly typed.
</p>
</article>
</section>
<!-- main section Fourth -->
<section class='main-section' id='Hello_world' >
<header>Hello world</header>
<article class='writing-blocks'>
<p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript
code:
</p>
<code> function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code>
<p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!
</p>
</article>
</section>
<!-- main section fifth -->
<section class='main-section' id='Variables'>
<header>Variables</header>
<article class='writing-blocks'>
<p>You use variables as symbolic names for values in your application. The names of variables, called
identifiers, conform to certain rules.
</p>
<p>A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters
can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through
"Z" (uppercase) and the characters "a" through "z" (lowercase).
</p>
<p>A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters
can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through
"Z" (uppercase) and the characters "a" through "z" (lowercase).
</p>
<code></code>
<code></code>
<code></code>
<code></code>
<code></code>
</article>
</section>
</div>
</div>
</main>
</html>"
And here is my css code:
"body {
font-family: 'Open Sans', Arial, sans-serif;
}
header {
color: black;
font-size: 1.8em;
/* width: 100%; */
}
#navbar{
display: flex;
flex-direction: column;
Position: sticky;
}
.navbar ul{
list-style: none;
}
#navbar>ul>li {
list-style-type: none;
border-top: 1px solid black;
width: 100%;
}
#navbar>ul {
padding-left: 0;
}
#navbar li {
padding: 14px 15px;
}
.container {
display: grid;
gap: 36px;
grid-template-columns: 25% 75%;
}
.nav-div {
width: 100%;
align-items: center;
overflow-y: scroll;
overflow-x: hidden;
height: 100vh;
/* position: sticky; */
}
.main-section {
padding: 20px;
}
.writing-blocks p {
margin-left: 1em;
margin-right: 1em;
}
.writing-blocks ul {
list-style-type: disc;
margin: 40px;
}
.writing-blocks ul li {
margin-top: 20px;
}
.nav-link {
color: black;
text-decoration: none;
}
code {
margin-left: 30px;
padding: 40px;
width: 70%;
}
@media only screen and (max-width: 600px){
}
"
I am fulfilling all the requirements, yet the code is not passing. You can see only one requirement is not being fulfilled:
But I have this fulfilled in the code. What might be wrong here?
