<label for="name-field">Your name: </label><input type="text" id="name-field"><button id="personalize-button">Personalize</button>
<p>Glad you're here, <span class="name">_____</span>. This page was written just for you. You can tell because it has your name right on it!</p>
<p>As you spend your time today learning to be a web developer, give yourself a little pat on the back. This is hard stuff, and you're giving it your all to help you achieve your dreams. I'm happy to be a small part of that.</p>
<p>Have a great day!</p>
@import url('https://fonts.googleapis.com/css?family=Aleo&display=swap');

body {
  padding: 10px;
  max-width: 600px;
  line-height: 1.5;
}
body, input, button {
  font-size: 22px;
  font-family: 'Aleo', serif;
}
label {
  margin-right: 5px;
}
input {
  border: none;
  background: rgba(0, 100, 255, 0.1);
  padding: 10px;
}
input:focus {
  background: rgba(0, 100, 255, 0.05);
}
button {
  border: none;
  background: lightgreen;
  padding: 10px 20px;
  margin-top: 10px;
}
label, input, button {
  display: block;
}
const nameField = document.querySelector('#name-field');
const nameBlank = document.querySelector('.name');

document.querySelector('#personalize-button').addEventListener('click', (event) => {
  nameBlank.textContent = nameField.value;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.