<h1>
  Random Friendly Words
</h1>

<textarea id="words"></textarea>

<br>

<button id="get-button">
  Get Another
</button>
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
* {
  box-sizing: border-box;
}
body {
  text-align: center;
  background: #c5e1a5;
  font-family: Lora, sans-serif;
}
h1 {
  color: #388e3c;
}
textarea,
button {
  font-family: inherit;
}
textarea {
  padding: 0.5rem;
  max-width: 100%;
  font-size: 1.5rem;
}

const URL = `https://friendly-words.netlify.app/.netlify/functions/random`;

const textarea = document.querySelector("#words");

function getWords() {
  fetch(URL)
    .then((response) => response.text())
    .then((data) => {
      textarea.value = data;
    });
}

document.getElementById("get-button").addEventListener("click", getWords);

getWords();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.