<html lang="eng">
<head>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>DOM Manipulation: toggle</title>
</head>

<body>
  
  <header>
    <h1>Add me some style</h1>
    <h2 class="active">Remove my style</h2>
    <h3>Add me a new style</s>
    
  </header>  
  
  <section>
    <button class="btn1">Click me!</button>
    <button class="btn2">Click me!</button>
    <button class="btn3">Click me!</button>
  </section>  
  
 
  
  
 
  
  
  
  
</body>
  
</html>  
  


.active {
  font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
  background-color: coral;
  border-radius: 4px;
  padding: 5px 0;
  color: #C1EFFF;
}

.active2 {
  text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
   font-style: italic;
}




header, 
section {
  width: 90%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

button {
  margin: 3rem 0 0 5rem;
  padding: 4px 10px;
}


// Adds the class "active" to the H1
let firstButton = document.querySelector(".btn1");

firstButton.addEventListener("click", function addClass(){
  let headlineOne = document.querySelector("h1");
  return headlineOne.classList.toggle("active");            
})

// Removes the class "active" from the H2, as it already has it applied
let secondButton = document.querySelector(".btn2");

secondButton.addEventListener("click", function removeClass(){
  let headlineTwo = document.querySelector("h2");
  return headlineTwo.classList.toggle("active");            
})

// Adds the class "active2" to the H3
let thirdButton = document.querySelector(".btn3");

thirdButton.addEventListener("click", function addNewClass(){
  let headlineThree = document.querySelector("h3");
  return headlineThree.classList.toggle("active2");            
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.