<div class="container">
  <h1 class="title">Abc</h1>

  <input class="slider" type="range" min="0" max="20" value="0" autofocus/>
  <p>Use the ◀︎ or ▶︎ keys to tab through the OpenType variations in this <a href="https://color.typekit.com/">color font</a></p>
  
  <code class='code'><pre>h1 {
  font-family: "trajan-color";
  font-feature-settings: "<span class="feature">ss00</span>";
}</pre></code>
</div>

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

* {
  box-sizing: border-box;
}

h1 {
  font-family: "trajan-color";
  font-size: 200px;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  font-weight: 400;
  margin-bottom: 0;
}

input {
  font-size: 20px;
  &:hover {
    cursor: pointer;
  } 
}

.container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #222222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background-color .5s ease;
}

p {
  margin-bottom: 30px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
font-family: -apple-system, Helvetica, sans-serif;
}

a {
  color: rgba(255,255,255,0.9);
  transition: .3s color ease;
  
  &:hover {
    color: rgba(255,255,255,1);
  }
}

.code {
  padding: 10px 30px;
  border-radius: 2px;
  right: 0;
  top: 0;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid rgba(0,0,0,.4);
  background-color: rgba(0,0,0,.1);
}

pre {
  font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
}

const slider = document.querySelector('.slider');
const title = document.querySelector('.title');
const container = document.querySelector('.container');
const colors = [
  '#222222', 
  '#777777', 
  '#b3857f',
  '#8fa9b5',
  '#873e35',
  '#dcd8ce',
  '#f0f0f0',
  '#404040',
  '#ddecec',
  '#2a6cd1',
  '#555',
  '#754428',
  '#a5d1cf',
  '#6c8e9e',
  '#fde3d8',
  '#888',
  '#222',
  '#afafaf',
  '#111',
  '#fab59a',
  '#ccc'
];

// title.setAttribute('style', 'font-feature-settings: "ss08"');

slider.addEventListener('input', function(e){
  let val = fixString(this.value);
  let fontFeature = `font-feature-settings: "${val}"`;
  let color = getColor(this.value);
  let backgroundColor = `background-color: ${color}`;
  title.setAttribute('style', fontFeature);
  container.setAttribute('style', backgroundColor);
  code(val);
});


function fixString(sliderValue){
  // if slider is less than ten add a '0' to the beginning
  if(sliderValue < 10) { 
    sliderValue = `0${sliderValue}`;
  }
  // prepend 'ss' to the string
  return `ss${sliderValue}`;
}

function getColor(num){
  return colors[num];
}

function code(variant) {
  const feature = document.querySelector('.feature');
  feature.innerText = variant;
}