A Pen by Pauline

Thumbnail
This awesome code was written by -Pey, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -Pey ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Pauline</title>
  
  
  
  
  
</head>

<body>

  <body>
    <h1>
        THE TITLE OF YOUR WEBPAGE
    </h1>
    <div id="container">
        <div class="content">
            This is the glorious text-content!
        </div>
    </div>
  <button id="btn">Click Me</button>
  
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-Pey/a-pen-by-pauline-zpNEeR */
        var container = document.querySelector("#container");
        var newEl = document.createElement("p");
        newEl.textContent = "Hey I'm red!";
        newEl.style.color = "red";
        container.appendChild(newEl);

        var container = document.querySelector("#container");
        var secondEl = document.createElement("h3");
        secondEl.textContent = "I am a blue h3";
        secondEl.style.color = "blue";
        container.appendChild(secondEl);

        var container = document.querySelector("#container");
        var thirdEl = document.createElement("div");
        thirdEl.style = "backgroundColor: pink; border: 1px solid black";

        var child1 = document.createElement("h1");
        child1.textContent = "I'm in a div";
        thirdEl.appendChild(child1);

        var child2 = document.createElement("p");
        child2.textContent = "ME TOO";
        thirdEl.appendChild(child2);

        container.appendChild(thirdEl);


var btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
  alert("Hello World");
});


const buttons = document.querySelectorAll('button');

// we use the .forEach method to iterate through each button
buttons.forEach(function (button) {
  
  // and for each one we add a 'click' listener
  button.addEventListener('click', function(e)  {
    alert(button.id);
  });
});

Comments