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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <!-- A brief overview of HTML: -->
<!-- This will not be too detailed of an overview of HTML, as we are only discussing its use with JavaScript and invoking JavaScript functions.  -->


<!-- HTML stands for Hyper Text Markup Language -->

<!-- HTML allows us to create our own websites by writing code in a way that can be read by a browser and translated into the images and designs you see on web pages. 

     - All text, images, etc. present on a website are there because they were coded into the website's HTML. 

     - Good websites make use of at least 3 languages: HTML for structure, CSS for design, and JavaScript for interactability/making web pages dynamic. 

     - HTML is responsible for laying out the structure of the site. 

     - An actual HTML file contains the following lines of code that you won't see present in HTML code on codepen, and that is because codepen allows us to begin at the body tag of the HTML: 

      <!DOCTYPE html>
      <html>
        <head>
          <title>Page Title</title>
        </head>
        <body>
          <h1>My First Heading</h1>
          <p>My first paragraph.</p>
        </body>
      </html>

     - If you were to copy lines 19-28, open up a txt file on your computer, paste the code into the text file and save the file as "index.html", you will be able to double click the file and open it in a web browser, where you will see the two sentences "My First Heading" and "My first paragraph.". 

     - Codepen makes this task easier by rendering our HTML in the white space below. 

     - Once we add our first element, you will see it display in the white space. 

     - This white space is the equivalent to a website, what you would see when you opened this HTML file.

     - You don't need to concern yourself with memorizing or being able to completely understand, or even reproduce lines 15-19 of that sample code. 

     - All we are concerning ourselves with is the concept of an HTML element and the content we place within the body, so we will be focused on the type of code on lines 24-27.
-->


<!-- Content is placed onto a web page by placing elements within the page's HTML. 

     - There are a variety of elements with different uses, such as headings, paragraphs, sections, images, videos, tables, etc. all with their own unique start and end tags. 

     - All HTML elements begin with a start tag and end with an end tag. 

     - Any content that the element will hold goes between these two tags. 

     - A start tag consists of the element's tagname, wrapped in carats <___> , while an end tag has a foreward slash before the tagname </___>, as you can see on the body element: <body> </body> . 

     - Most often, an element's tag name will be predictable, such as the body element's tagname simply being 'body'. 

     - However, some elements' tagnames are shortened, such as heading 1, heading 2, heading 3, heading 4, and heading 5 simply being reduced to h1, h2, h3, h4, and h5. 

     - You can check that you are using the correct tagname for an element simply by googling "HTML 5 __(element)__ tagname"
-
     - It is important to always remember to include a closing/end tag for an element at the correct position. 

     - HTML elements can be nested within each other, so misplacing or forgetting an ending tag can cause errors in the format and appearance of your website, with elements accidentally being placed inside of one another or ending up in the wrong place entirely. -->



<!--  The first element we will dissect is the body element. 

     - The body element contains all of the content that is visible on the web page. 

     - All of the content containing paragraphs, text, images, etc. are placed within elements that are all nested within the start and end body tag. 

     - Anything placed outside of the body element will not be visibly rendered on the page, so it is important to make sure all of your content is within the body tags. -->



<!-- The next line of code contains our body's start tag. 

     - Any content we want to display on our web page will be placed before the body's end tag. 

     - These elements will be nested within the body tag. 

     - To keep our code organized and so that the nesting is easy to see, we will indent each element's starting tag within the body element. 

     - If an element within the body also has nested elements, these elements will have two indentions 

     - (you can consider 1 tab = 1 indention, or 4 spaces = 1 indentation)   -->

<body>
  
  <div id="textArea"> 
    <p class = "field1">This paragraph is in the first div and has the class "field1".</p>
    <p class = "field2">This paragraph is in the first div and has the class "field2".</p>
  </div>
  
  <div id="blankArea"> 
    <p class = "field1">This paragraph is in the second div and has the class "field1"</p>
    <p class = "field2">This paragraph is in the second div and has the class "field2"</p>
  </div>
    <!-- The line above, line 89, contains a div element. A div is an element used to specify a division or section on our web page.

        - Within the div element's start tag, you can see the id attribute.

        - HTML elements can be given attributes in their start tag that can be used in HTML, CSS, and JavaScript.

        - There are a number of different attributes we can give HTML elements, from style attributes, event attributes, identifier attributes, etc. 

        - The id attribute is how we will be able to access the HTML element from our JavaScript code.
  
  
  <!-- We do not need to go in depth into editing HTML with JavaScript, but we do need to be familiar with two main concepts. 1. Attributes, and 2. querySelector
  
       - Any attribute of an HTML element can be retrieved using JavaScript. 

       - We can also manipulate attributes of an HTML element via Javascript, but first we have to select the HTML element *through* JavaScript.
        
       - The attribute on our div's start tag, the id attribute, is an identifier. We use the id attribute to give our element a unique name that will be used to call upon that element and select it for editing or manipulation in CSS or JavaScript. 

       - We use the id attribute to select the element by using the HTML Dom methods.

       - We have already discussed JavaScript objects and using their methods. HTML Dom methods are used in JavaScript to select and edit elements from within JavaScript.

       - There are a few different methods we can use:

        1. document.querySelector("")
          
           - querySelector() is used to access the first element matching the attribute provided within the quotations. 

           - The attribute within the quotations must be a CSS selector. A CSS selector literally lets us *select* the element we want to work with.

           - There are a number of CSS selectors, which can be found here: https://www.w3schools.com/cssref/css_selectors.asp

           - We are going to focus on using querySelector with the element, ID, and Class attributes 


              - Element: in our JavaScript code, we would access the div from line 44 by saying 

                  var textArea = document.querySelector("div");

              - this would make the variable textArea reference the first div element in the HTML. If there were another div after the first, the textArea variable would only reference the first div.

              - we use 'document' so that we can access the methods associated with the JavaScript document object, such as .querySelector("")
             


              - ID: in our JavaScript code, we would access the div from line 44 by its ID attribute, by saying:

                  var textArea = document.querySelector("#textArea");

              - this would make the variable textArea reference the div element in the HTML with the id "textArea". Even if there were divs before or after that div, only the textArea div is referenced.

              - The ID attribute is used to single out and give an element an explicity unique identifier.



              - Class: in our JavaScript code, we would access the paragraphs from both line 45 and 49 by their class attribute, by saying:

                  var textArea = document.querySelector(".field1");

              - this would make the variable textArea reference ALL paragraph elements with the class attribute "field1", so both of the paragraphs with the class field1 in both divs will be selected.

              - The class attribute is used to apply the same code to multiple elements at once, unlike the id attribute which ensures only one element is being edited.

       
  <!-- You'll notice that the paragraphs in the divs appear on our webpage preview below. 

       Our first exercise will be to create a button that clears the preview of our webpage, so that the text is no longer there.

       This will give us experience with event invocation of functions as well as integrating HTML and JavaScript.
  

First I will walk us through the steps to complete this exercise, then I will provide the code to do so: 

     1. Add a button element
        - the tagname for a button is simply button. 

     2. Give the button element an id attribute, set it equal to "erase" 
        - values of attributes always need to be in quotations

     3. Give the button element an onClick attribute, set it equal to "eraseContent()" 
        - this tells our JavaScript to run the eraseContent() function that we will write in our JS next, whenever the button has been clicked

     4. Finally, set the text of the button to "Erase Website Content" by placing the text between the button's start and end tags.
    
This is what your button should result to: -->
  
  <button id="erase" onClick="eraseContent('fill it with this text')"> Erase Website Content</button> 

  <!-- Now we are going to go back to our JavaScript (line 23) to create the eraseContent function and learn about using onClick events in JS. -->
</body> 

              
            
!

CSS

              
                
              
            
!

JS

              
                // Next, lets discuss function invocation by events.

// JavaScript is typically used in coordination with HTML. Because of this, events that occur within or to HTML elements can trigger the invocation of a JavaScript function.

// HTML is the language used for developing and designing web pages. I've provided a brief overview of HTML in the HTML tab of this codepen so you have a greater understanding of how we use events to trigger a JavaScript function to run.

// In this case, consider an event to be any action, property, or change that can be tested for, such as when something on a web page is clicked or hovered over. Events work the same way logically that they do in real life. Say, for example, if you were to insert your house key into your front door. On the event that you turn your key to unlock it, your door will become unlocked. If we were to replicate this event through programming, we would run a function that would probably be called unlockDoor() on the event that a key is inserted and turned.

// There are numerous different types of events that can happen to an HTML element that triggers the invocation of a JavaScript function, such as:
// onClick : when a user clicks an element
// onLoad : when the webpage finishes loading
// onMouseOver : when a user hovers over an element
// etc! Resources: https://www.w3schools.com/js/js_events.asp , https://www.w3schools.com/jsref/dom_obj_event.asp

// onClick is the main event we will focus on.

// onClick is an HTML attribute that runs a specified JavaScript function whenever the element is clicked.

// You may first think of a button when you're thinking of putting this event to use, but the onClick event can be applied to any HTML element.

// Before we go further, if you have not already, please read the brief overview of HTML and buttons in the HTML section on the left.

// After you've read the content in the HTML section, we can continue with our eraseContent() function that the erase button will trigger.

// The onClick attribute allows us to execute a JavaScript function when the element with the attribute is clicked. The onClick attribute logically works with buttons, but any element can be given an onClick attribute that executes a function, including a paragraph or image.

// We have already coded the onClick attribute in our HTML on the button element, so now we need to declare the eraseContent() function. This function does not need to take any parameters.

function eraseContent(text) {
  console.log(text);
  let bodyVar = document.querySelector("body");
  bodyVar.innerHTML = text;
}

// To cover the next method of achieving our goal of clearing the websites content, I will create a new function named eraseContent2:

function eraseContent2() {
  // instead of clearing the entire body, we will clear each of the divs.
  // first we must select the divs using querySelector and their id's:
  let div1 = document.querySelector("#textArea");
  let div2 = document.querySelector("#blankArea");
  // Note that we could have also used: var divs = document.querySelectorAll("div"); to select all of the div elements in the body
  // now we will clear the contents of the two divs using the same method as the prior function:
  div1.innerHTML = "Div 1 has been cleared";
  div2.innerHTML = "Div 2 has been cleared";
  //to test this method, simply change the function that is set to execute at the onClick on line 113 of the HTML from "eraseContent()" to eraseContent2().
}

const button = document.createElement('button');
button.innerText = 'Login'
document.querySelector('body').appendChild(button)

///////////////////////// Exercises /////////////////////////
// 1. Create an HTML button that displays the text "Login". 
// The button needs an id of "login".
// 2. Add an event listner of "click" to the button then call the logout with it
// "logout()"
// 3. Create the logout function in JavaScript. 
// The function should select the login button, 
// and change the text of the button from "Login" to "Logout"
// 4. Add an if statement to the login function that changes the text of 
// the button to "Logout" if it was previously "Login" and changes it to "Login" otherwise
// 5. Click the login button repeatedly to ensure that the button changes to logout when "Login" is clicked, and to login when "Logout" is clicked

              
            
!
999px

Console