Tacoma.js Demo

index.html

<div class="center">
  <h1 id="myHeader" contenteditable="true" spellcheck="true">This is a heading</h1>
  <div class="button__group">
    <button class="btn" id="result">Change Text</button>
    <button class="btn" id="yellow">Change Color</button>
  </div>
</div>

script.js

var header = document.getElementById('myHeader');
var myResult = document.getElementById('result');
var color  = document.getElementById('yellow');


myResult.addEventListener('click', function(){
  header.innerHTML = 'Have a nice day!';
});

color.addEventListener('click', function() {
  header.classList.toggle('yellow-lg');
});

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'SF UI Display';
  font-weight: 300;
}

h1 { transition: all 375ms linear; padding: 2rem 1.5rem; }


.center { text-align: center; }



.yellow-lg {
  background: #ffba00;
  font-size: 7.5rem;
  color: white;
  padding: 5rem inherit;
}

.btn {
  appearance: none;
  border-radius: .5rem;
  border: 0;
  background: #ffba00;
  padding: .5rem;
  font-family: 'SF UI Text';
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  margin: .5rem;
  padding: .5rem 1rem;
  display: inline-block;
  color: #2F6A92;
}

Tacoma.js Demo.markdown

Tacoma.js Demo

A Pen by Charles Peters on CodePen.

License.