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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <!-- 

Hello Camper!

Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->

<!-- Content from: https://reactjs.org/docs/introducing-jsx.html -->

<nav id="navbar" aria-label="Main Navigation">
  <header>
    <h1>React.js + JSX</h1>
  </header>
  
  <ul class="nav-settings">
    <li><a class="nav-link" href="#Introducing_JSX">Introducing JSX</a></li>
    <li><a class="nav-link" href="#Why_JSX?">Why JSX?</a></li>
    <li><a class="nav-link" href="#Embedding_Expressions_in_JSX">Embedding Expressions in JSX</a></li>
    <li><a class="nav-link" href="#JSX_is_an_Expression_Too">JSX is an Expression Too</a></li>
    <li><a class="nav-link" href="#Specifying_Attributes_with_JSX">Specifying Attributes with JSX</a></li>
    <li><a class="nav-link" href="#Reference">Reference</a></li>
  </ul>
</nav>

<main id="main-doc">
  <section id="Introducing_JSX" class="main-section offset">
    <header>
      <h2>Introducing JSX</h2>
    </header>
    <p>Consider this variable declaration:</p>
    <pre class="code-big"><code><span class="code-aqua">const</span> element = &lt;<span class="code-orange">h1</span>&gt;Hello, world!&lt;/<span class="code-orange">h1</span>&gt;;</code></pre>
    <p>This funny tag syntax is neither a string nor HTML.</p>
    <p>It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.</p>
    <p>JSX produces React “elements”. We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.</p>
  </section>
  
  <section id="Why_JSX?" class="main-section offset">
    <header>
      <h2>Why JSX?</h2>
    </header>
    <p>React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.</p>
    <p>Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, <a class="link-website" href="https://www.youtube.com/watch?v=x7cQ3mrcKaY" target="_blank" rel="noopener noreferrer">this YouTube video about React</a> might convince you otherwise.</p>
    <p>React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.</p>
    <p>With that out of the way, let’s get started!</p>
  </section>
  
  <section id="Embedding_Expressions_in_JSX" class="main-section offset">
    <header>
      <h2>Embedding Expressions in JSX</h2>
    </header>
    <p>In the example below, we declare a variable called <code class="code-tiny">name</code> and then use it inside JSX by wrapping it in curly braces:</p>
    <pre class="code-big"><code><span class="code-aqua">const</span> name = <span class="code-yellow">'Josh Perez'</span>;
<span class="code-aqua">const</span> element = &lt;<span class="code-orange">h1</span>&gt;Hello, {name}&lt;/<span class="code-orange">h1</span>&gt;;

ReactDOM<span class="code-green">.render</span>(
  element,
  document<span class="code-green">.getElementById</span>(<span class="code-yellow">'root'</span>)
);</code></pre>
    <p>You can put any valid JavaScript expression inside the curly braces in JSX. The following examples are all valid JavaScript expressions:</p>
    <ul>
      <li class="code-small"><span><code>2 + 2</code></span></li>
      <li class="code-small"><span><code>7 - 4</code></span></li>
      <li class="code-small"><span><code>9 * 5</code></span></li>
      <li class="code-small"><span><code>user.firstName</code></span></li>
      <li class="code-small"><span><code>formatName(user)</code></span></li>
    </ul>
    <p>In the example below, we embed the result of calling a JavaScript function, <code class="code-tiny">formatName(user)</code>, into an <code class="code-tiny">&lt;h1&gt;</code> element.</p>
    <pre class="code-big"><code><span class="code-aqua">function</span> formatName(user) {
  <span class="code-green">return</span> user.firstName <span class="code-orange">+</span> <span class="code-yellow">' '</span> <span class="code-orange">+</span> user.lastName;
}

<span class="code-aqua">const</span> user = {
  firstName: <span class="code-yellow">'Harper'</span>,
  lastName: <span class="code-yellow">'Perez'</span>
};

<span class="code-aqua">const</span> element = (
  &lt;<span class="code-orange">h1</span>&gt;
    Hello, {formatName(user)}!
  &lt;/<span class="code-orange">h1</span>&gt;
);

ReactDOM<span class="code-green">.render</span>(
  element,
  document<span class="code-green">.getElementById</span>(<span class="code-yellow">'root'</span>)
);</code></pre>
    <p>We split JSX over multiple lines for readability. While it isn’t required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.</p>
  </section>
  
  <section id="JSX_is_an_Expression_Too" class="main-section offset">
    <header>
      <h2>JSX is an Expression Too</h2>
    </header>
    <p>After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.</p>
    <p>This means that you can use JSX inside of <code class="code-tiny">if</code> statements and <code class="code-tiny">for</code> loops, assign it to variables, accept it as arguments, and return it from functions:</p>
    <pre class="code-big"><code><span class="code-aqua">function</span> getGreeting(user) {
  <span class="code-green">if</span> (user) {
    <span class="code-green">return</span> &lt;<span class="code-orange">h1</span>&gt;Hello, {formatName(user)}!&lt;/<span class="code-orange">h1</span>&gt;;
  }
  <span class="code-green">return</span> &lt;<span class="code-orange">h1</span>&gt;Hello, Stranger.&lt;/<span class="code-orange">h1</span>&gt;;
}</code></pre>
  </section>
  
  <section id="Specifying_Attributes_with_JSX" class="main-section offset">
    <header>
      <h2>Specifying Attributes with JSX</h2>
    </header>
    <p>You may use quotes to specify string literals as attributes:</p>
    <pre class="code-big"><code><span class="code-aqua">const</span> element = &lt;<span class="code-orange">div</span> <span class="code-green">tabIndex</span>=&quot;0&quot;&gt;&lt;/<span class="code-orange">div</span>&gt;;</code></pre>
    <p>You may also use curly braces to embed a JavaScript expression in an attribute:</p>
    <pre class="code-big"><code><span class="code-aqua">const</span> element = &lt;<span class="code-orange">img</span> <span class="code-green">src</span>={user.avatarUrl}&gt;&lt;/<span class="code-orange">img</span>&gt;;</code></pre>
    <p>Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.</p>
  </section>
  
  <section id="Reference" class="main-section offset">
    <header>
      <h2>Reference</h2>
    </header>
    <p><a class="link-website" href="https://reactjs.org/docs/introducing-jsx.html" target="_blank" rel="noopener noreferrer">All the documentation in this page</a> is taken from Reactjs.org.</p>
  </section>
</main>
              
            
!

CSS

              
                body {
  font-family: Helvetica, Lucida Console;
  color: #d3d3d3;
  background-color: #1F1B24;
  font-size: 1.5em;
  display: grid;
  grid-template-columns: auto 500px;
}

.nav-settings {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
}

.nav-link {
  text-decoration: none;
  display: flex;
  padding: 10px 40px 10px 20px;
  color: #B5B0B0;
}

.nav-link:hover, .nav-link:focus {
  background-color: #363333;
  color: white;
  border-left: 6px solid #D0ABFC;
  padding-right: 34px; /* To keep the solid right border from moving */
}

#navbar {
  position: fixed;
  background-color: #272121;
  border-right: solid;
  border-width: normal;
  top: 0;
  left: 0;
  height: 100%;
  box-shadow: 3px 0 rgba(0, 0, 0, 0.7);
}

main {
  position: relative;
  left: 420px;
  grid-row-start: 2;
  grid-row-end: 3;
}

h1 {
  position: relative;
  left: 40px;
  color: #D0ABFC;
}

h2 {
  color: #D0ABFC;
}

.link-website {
  color: #03DAC6;
}

.code-big {
  background-color: #363333;
  color: white;
  border-radius: 10px;
  padding: 20px;
  margin: 30px;
}

.code-tiny {
  background-color: #363333;
  color: white;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 8px;
}

.code-small span {
  background-color: #363333;
  color: white;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 8px;
}

.code-aqua {
  color: #03DAC6;
}

.code-orange {
  color: #FECB01;
}

.code-green {
  color: #00FF00;
}

.code-yellow {
  color: #F1F536;
}

.code-blue {
  color: #A7C6FE;
}

@media (max-width: 1075px) {
  #navbar {
    max-height: 500px;
    height: 130px;
    border-right: none;
    border-bottom: solid;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;
    width: 100%;
    transition: top 1s;
    box-shadow: 0 3px rgba(0, 0, 0, 0.7);
  }
  
  .nav-link {
    padding: 4px 40px 4px 20px;
  }
  
  main {
    left: 25px;
    top: 130px;
    width: 95%;
  }
  
  body {
    font-size: 1.2em;
    grid-template-columns: auto auto;
  }
  
  h1 {
    margin-top: 5px;
    margin-bottom: 0px;
  }
  
  /*Offset the page when jumping to section with nav-link to prevent being coverd by navbar*/
  .offset:before { 
    display: block; 
    content: " "; 
    height: 120px;
    margin-top: -120px;
    visibility: hidden;
  }
}

@media (max-width: 600px) {
  main {
    left: 5px;
  }
  
  body {
    font-size: 1.03em;
  }
}
              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

/*To make the menu disappear when scrolling down*/

let lastScrollTop = 0;

window.addEventListener("scroll", () => {  
  if (window.innerWidth < 1000) {
    let st = window.pageYOffset || document.documentElement.scrollTop;  
    if (st > lastScrollTop){
      document.getElementById("navbar").style.top = "-100%";
    } else {
      document.getElementById("navbar").style.top = "0";
    }
    lastScrollTop = st;
}});

/* To prevent navbar from disappearing when it's retracted and window resized to big window view */

const expand = () => {
	if (window.innerWidth > 1000) {
		if (document.getElementById("navbar").style.top === "-100%") {
			document.getElementById("navbar").style.top = "0"; 
		}
	} 
}

window.addEventListener("resize", expand);
              
            
!
999px

Console