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

<body>
  
  <header>
    <h1>Change my style</h1>
  </header>  
  
  <button id="addbutton">Add class</button>
  <button id="removebutton">Remove class</button>
  
  
  
  
</body>
  
</html>  
  


.classStyling {
  font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
  text-transform: uppercase;
  background-color: coral;
  width: 700px;
  text-align: center;
  border-radius: 4px;
  padding: 5px 0;
  color: #C1EFFF;
}

button {
  margin-top: 3rem;
}

let addButton = document.querySelector("#addbutton");

addButton.addEventListener("click", function addClass(){
  let headlineBox = document.querySelector("header");
  return headlineBox.classList.add("classStyling");
                        
})

let removeButton = document.querySelector("#removebutton");

removeButton.addEventListener("click", function addClass(){
  let headlineBox = document.querySelector("header");
  return headlineBox.classList.remove("classStyling");
                        
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.