First test

first attempt of using jsfiddle with gist author(s): Mohan Gupta

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Kitchen Sink Example</title>
    </head>
    <body lang="en">
      <p>This paragraph WILL NOT be styled by CSS or changed by javascript.</p>
      <p id="secondpara">This paragraph will be styled by CSS using its <b>id</b>attribute using CSS selector.</p>
      <p class="thirdpara">This paragraph will be styled by CSS using its <b>class</b>attribute using CSS selector.</p>
      <p id="willchange">This paragraph will be changed by javascript</p>
      <p> Only <span>this portion</span> will be styled by CSS </p>
      <div>
          <p class="first makemepurple">first child p of div</p>
          <p class="makemepurple">second child p of div</p>
      </div>
      <a target="_blank" href="https://gist.github.com/raspberrypisig/f1eb115b5da77cfbe5e9b7d510cb5efd">source code</a>
      <hr>
        <h1>walk the DOM using javascript</h1>
        <p> 
          document title:
          lang attribute on body element:
          number of children that div has on this page:
          what is the value of class for the first child of div:
        </p>
      
        <p>NOTE: use of b and hr tags are frowned upon, accomplish the same with CSS</p>
    </body>
</html>

JavaScript

function changeContent () {
    //old way before document.querySelector became the new normal
    //var myelement = document.getElementById("willchange");
    const myelement = document.querySelector("#willchange");
    myelement.textContent = "Replaced with javascript";
    
}

window.onload = changeContent ;