<h2>Using <a href="https://www.jamapi.xyz/" target="_blank">Jam API</a> to fetch CSS Data from <a href="http://cssvalues.com/" target="_blank">cssvalues.com</a></h2>

<form>
  <p>Enter CSS Property: <input type="text"> 
  <input type="submit" value="Get Data!" class="btn" required>

  <p>This property accepts the following values: <output></output></p>
</form>

body {
  padding: 0 20px;
  font-family: 'Lato', sans-serif;
}

h2 {
  text-align: center;
}

form {
  width: 600px;
  margin: 0 auto;
}

form p {
  margin-top: 30px;
}

form p:last-child {
  margin-top: 70px;
}

output {
  font-weight: bold;
}

function getPropVals(prop) {
  let op = document.querySelector('output');
  fetch('https://www.jamapi.xyz', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      url: 'http://cssvalues.com',
      json_data: '{"values": "#' + prop + ' ul"}'
    })
  }).then(function(response) {
    return response.json();
  }).then(function(json) {
    if (!json.error) {
      op.textContent = json.values.replace(/\s\s+/g, ', ');
    } else {
      op.innerHTML = "<b>[Please enter a valid CSS property].</b>";
    }
  });
}

document.querySelector('.btn').addEventListener('click', function (e) {
  e.preventDefault();
  if (document.querySelector('input').value) {
    getPropVals(document.querySelector('input').value);
  } else {
    document.querySelector('output').innerHTML = "<b>[Please enter a CSS property].</b>";
  }
}, false);