Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main id="main-doc">
<nav id="navbar">
  
     <header><h1>Javascript</h1></header>
   
            <ul>
                    <li><a class="nav-link" href="#introduction">Introduction</a></li>
                    <li><a class="nav-link" href="#comments">Comments</a></li>
                    <li><a class="nav-link"  href="#variable">Variable</a></li>
                    <li><a class="nav-link" href="#function">Function</a></li>
                    <li><a class="nav-link" href="#loops">loops</a></li>
                    <li><a class="nav-link" href="#dom">DOM</a></li>
                
            </ul>
        </nav>
    
    <section class="main-section" id="introduction">
      <header><h2>Introduction</h2></header>
       <p> The	language	we’ll	be  learning	in	this	book	is	JavaScript,	often referred	to	as	the	
         language	of	the	Web.	Nearly	all	web	browsers	can	run	JavaScript,	making	it	one	of	the most	popular
         programming	languages	in	the	world.	It	has	a	low	barrier	to	entry―all	you need	to	program	in
         JavaScript	is	a	text	editor	and	a	web	browser.	Although	it	is	easy	to	get started,	JavaScript	can	be	      
         a	tricky	language	to	grasp	as	it	has	some	unique	features	and interesting	quirks.
         Once	you	have mastered	it,	though,	you’ll	find	it	is	a	very	flexible	and expressive	language	that	can	create
         some	powerful	applications</p>
         <p>JavaScript	is	a	high-level	language	that	is	compiled	at	run	time.	This	means	that	it	requires
          an	engine	that	is	responsible	for	interpreting	programs	and	running	them.	The	most common	JavaScript	engines
          are	found	in	browsers	such	as	Firefox,	Chrome,	or	Internet Explorer,	although	JavaScript	can	be	run	without	a
         browser.	Many	modern	JavaScript engines	use	a	Just-in-time	(JIT)	interpreting	process,	which	considerably
         speeds	up	the compilation	process,	making	the	programs	run	faster. JavaScript	is	also	a	dynamic	language,	
         which	means	that	elements	of	a	program	can change	while	it	is	running. </p>
     
   </section>
   <section class="main-section" id="comments">
      <header><h2>Comments</h2></header>
       <p>You should write comments to explain what your code does.. They help make your code easier to read and understand.
            This can help you and others who read your code </p>
        <h4> <li> MULTI-LINE COMMENTS </li></h4>
          <p>To write a comment that stretches over more than one line, you use a multi-line comment, starting with 
           the<span class="com1"> <code>/* characters and ending with the */ </code></span>characters. Anything between these characters is not processed  by the JavaScript 
           interpreter.</p> 
         <p> Multi-line comments are often used for descriptions of how the script works, or to prevent a section of the script from running 
           when testing it. </p> 
          <div class="com2">  <code><p>/* This script displays a greeting to the user based upon the current time.</p> <p>It is an example from JavaScript & jQuery book */</p>
            <p>var today= new Date(); var hour Now = today.getHours(); var greeting;</p>
           </code> 
        </div>
           <h4> <li>SINGLE-LINE COMMENTS</li> </h4>
           <p>In a single-line comment, anything that follows the two forward slash characters // on that line will not be processed by the
             JavaScript interpreter. Singleline comments are often used for short descriptions of what the code is doing. 
            Good use of comments will help you if you come back to your code after several days or months. They also help those who are new
             to your code. </p>
          <div class="com2"> <code> Create a new date object</code></div>
      
   </section>
   <section class="main-section" id="variable">
   <header> <h2>Variable</h2></header>
       <p> Variables	are	common	in	programming	languages.	They	are	a	way	of	storing	a	value	in memory	for	later	use.	
           In	JavaScript,	we	start	by	declaring	a	variable.</p>	<p>This	is	done	using the	keyword	var:</p>
         <div class="var">
              <code><p>var	a;	//	declare	a	variable	called	a <<	undefined</p>
          <p>var	message; <<	undefined</p>
        </code>
         </div>
        <p> Notice	that	the	console	outputs	undefined.	This	is	a	special	JavaScript	primitive
          value	that is	covered	later	in	the	chapter,	but	it’s	basically	saying	that	the	variable	has	been	created 
          but	is	yet	to	be	assigned	a	value. You	don’t	actually	have	to	declare	variables	before	using	them,	but	
          as	we’ll	see	later,	bad things	can	happen	if	you	choose	not	to.	So	remember,	a	ninja	will	always	declare 
          variables.</p> <p>You	can	even	declare	multiple	variables	at	once:</p>
       <div class="var">
           <code> var	a,b,c;	//	3	variables	declare	at	once <<	undefined</code>
      </div>
        <p> A	variable	name	can	start	with	any	upper	or	lower	case	letter,	an	underscore (_),	or	dollar	symbol	($).</p>	
       <p>It	can	also	contain	numbers	but	cannot	start	with them.</p>	
          <p>Variable	names	are	case	sensitive,	so	ANSWER	is	different	to	Answer	and answer. When	using	multiple	words	
        for	variable	names	there	are	two	conventions that	can	be	used.	Camel	case	starts	with	a	lowercase	letter
        	and	then	each new	word	is	capitalized.</p>
       
   </section>
   <section class="main-section" id="function">
     

      <header><h2>Function</h2></header>
      <h4><li>Defining	a	Function</li</h4>
        <p> There	are	three	ways	to	define	a	function. Function	Declarations To	define	a	function	literal	we	can	use	a	
         function	declaration:</p>
        <div class="fun">
           <code> function	hello() {		alert(“Hello	World!”); }</code>
        </div> 
     <p>This	starts	with	the	function	keyword	and	is	followed	by
            the	name	of	the	function,	which in	this	case	is	called<span class="fun2"><code>‘hello‘,</code></span>	followed	by	parentheses.	After	
            this	is	a	block	that	contains the	code	for	the	function. This	is	known	as	a	named	function	as	
            the	function	has	a	name:<span class="fun2"><code>‘hello‘</code></span>.</p> <h4><li>Function Expressions</li></h4> <p>Another	way	of	defining	a	function	literal	is	to	
            create	a	function	expression.	This	assigns an	anonymous	function	to	a	variable:</p>
      <div class="fun"> 
         <code> var	goodbye	=	function() {		alert(“Goodbye	World!”); }</code>
     </div> 
     <p>The	function	in	this	example	is	known	as	an	anonymous
            function	because	it	does	not	have a	name;	it	is	simply	created,	then	assigned	to	the	variable	goodbye.</p>
            	<p>Alternatively	we	can create	a	named	function	expression	instead:</p>
        <div class="fun"> 
            <code> var	goodbye	=	function	bye() {		alert(“Goodbye	World!”); }</code>
        </div>
         <p>The	name	of	this	function	is	bye,	and	it	has	
        been	assigned	to	the	variable	goodbye. Notice	also	that	the	example	ends	with	a	semicolon.	This	finishes
            the	assignment statement,	whereas	a	normal	function	declaration	ends	in	a	block	(no	need	for	semicolons at	
            the	end	of	blocks).</p>
    
</section>

<section class="main-section" id="loops">
   <header><h2>Loops</h2></header>
    <p>Loops	will	repeat	a	piece	of	code	over	and	over	again	according	to	certain	conditions</p>
        <h4> <li>while	Loops</li></h4> <p>We’ll	start	by	looking	at	a	while	loop.	This	will	repeatedly	run	a	block	of	code	while
         	a certain	condition	is	true	and	takes	the	following	structure:</p>
    <div class="lope">
         <code>while	(condition)	{		do	something }</code>
    </div>
    <h4><li>Infinite	Loops</li></h4>
    <div class="lope">
        <code> var	n	=	1; while (n>0) {		alert(“Hello”);		n++; }</code>
    </div>
   <h4><li> do	…	while	Loops:</li></h4>
   <div class="lope">
        <code>do	{		do	something }	while(condition)</code>
  </div> 
  <p>This	means	that	the	block	of	code	will	always	be	run	at	least	once,
        regardless	of	the condition	being	true	or	not. </p>
 <h4><li>for Loops</li</h4>
   <p> for	loops	are	by	far	the	most	common	in	JavaScript	and	take	the	following	form:</p>
   <div class="lope">
        <code>for	(initialization	;	condition	;	after)	{	do	something	} </code>
     <code>for	(var	bottles	=	10	;	bottles	>	0	;	bottles—) {</code>
      <code>alert("bottles" + green bottles)</code>
    <code> }</code>
   </div>

</section>

<section class="main-section" id="dom">
   <header><h2>DOM</h2></header>
    <p> The	Document Object	Model,	or	DOM	for	short,	represents	an	HTML	document	as	a network	of	connected	nodes	that	
        form	a	tree-like	structure[1]. Everything	on	a	web	page	is	represented	by	a	node―HTML	tags,	the	text	
        inside	these tags,	even	the	attributes	of	a	tag	are	all	nodes.	The	HTML	tag	is	the	root	node	and	every other	part
            of	the	document	is	a	child	node	of	this.</p>
          <h4> <li> Getting	an	Element	by	Its	ID</li></h4>
              <div class="mod">
             <code><p>      title	=	document.getElementById(‘title’);</p>
                    <p> <<	h	id=“title” </p>
               </code>
              </div> 
          <h4> <li>Get	Elements	by	Their	Tag	Name</li></h4>
          <div class="mod">  
            <code>  <p> paragraphs	=	document.getElementsByTagName(‘p’);</p>
               <p> <<	HTMLCollection	[	p.swim,	p#bike,]</p>
             </code>
          </div>
                    
        <h4> <li> Get	Elements	by	Their	Class	Name</li></h4>
        <div class="mod">
             <code><p> swim	=	document.getElementsByClassName(‘swim’);</p>
                   <p>  <<	p	class=“swim”</p>
              </code>
        </div>
        <h4><li> Query	Selectors</li></h4>  
          <p>For	example,	the	following	could	be	used	instead	of	<em>document.getElementById():</em></p>
          <div class="mod">
              <code><p> bike	=	document.querySelector(‘#bike’);</p>
               <p> <<	p	id=“bike”</p>
                </code>

         </div>
         <p> And	this	could	be	used	instead	of<em>document.getElementsByClassName:</em></p>
         <div class="mod"> 
             <code><p>swim	=	document.querySelectorAll(‘.swim’); </p>
               <p> <<	NodeList	[	p.swima	]</p>
              </code>
         </div>
       
</section>
</main>
<footer>
  <a href="#main-doc">Back to top</a><br/>
    Made by jude-create 2020<br/>
    Reference book: NOVICE TO NINJA <br/>JavaScript AND jQuery
</footer>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>


              
            
!

CSS

              
                *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: auto;
}
body{
    background-color: black;
}

#main-head{
    background-color: black;
  
   
}
h1{
   
   font: 3em sans-serif;
   color: lemonchiffon;
   padding-top: 18px;
   
}
h4{
    padding-left: 50px;
}
ul{
   
    position: fixed;
    width: 100%;
   top: 40px;
   list-style: none;
   overflow: hidden;
    
}
.nav-link {
    color: lavenderblush;
    text-decoration: none;
    font: 1.4em sans-serif;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.5s ease-in;
    
}
@media only screen and (max-width:768px) {
    ul{
        position: sticky;
        overflow: hidden;
        padding-left: 10%;
    }
    h1{
        font:1.5em;
    
    }
    .nav-link li a{
        font: 1.5em sans-serif;
        
        
    }
}


.nav-link:hover{
   cursor: pointer;
    text-decoration: underline;
    color: violet; 
    
}

.main-section{
   
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: lavenderblush;
    border-bottom:0.6em solid gray;
   line-height: 250%;
    width: 80%;
   margin-left: 13%;
   font-size: 1.1em;
   font-family: Arial, Helvetica, sans-serif;
}
@media only screen and (max-width: 768px) {
   .main-section{
        font-size: 1.2em;
        line-height: 125%;
        
        width: 96%;
        margin-left: 2%;
     }
  header h2{
    margin-top: 8px;
    margin-bottom: 8%;
    }
   
  }
header h2{
  padding-top: 9px;
  padding-left: 10%;
  text-transform: uppercase;
  }
   


.com1{
    color:green;
    
}
.com2{
    background-color: cornsilk;
    color:blue;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.var{
    color:blue;
    background-color: cornsilk;
    display: flex;
  flex-direction: column;
    text-align: center;
 }
.fun2{
    color: green;
}
.fun{
     color: blue;
     text-align: center;
     background-color: cornsilk;
}
.lope{
    display: flex;
    text-align: center;
    flex-direction: column;
    background-color: cornsilk;
    color: blue;
}
.mod{
    display: flex;
   flex-direction: column;
    text-align: center;
    background-color: cornsilk;
    color: blue;
}
footer{
    background-color:goldenrod ;
    text-align: center;
    width: 100%;
    margin: auto;
    
}
a{
    color: rgba(220, 20, 60, 0.89);
    font-weight: bold;
    
}
@media  only screen and 
 (min-width: 768px)
 and (max-width: 1224px) {
   .main-section{
    margin-left: 10%;  
   }
   .nav-link{
     font-size: 1.5em;
     }
}
@media only screen and (max-width: 468px) {
  h1{
    padding-left: 23%;
    }
  h4{
    padding-left: 0px;
    }
  }


              
            
!

JS

              
                
              
            
!
999px

Console