Lee-js-1

by David Kyle

HTML

<div class="my-inputs">
  <label for="name-input">Name:</label>
  <input type="text" name="name-input" id="name-input" class="text-input" />
  <br />
  <br />
  <button type="button" name="click-button" id="click-button" onclick="countClicks()">Count</button>
</div>
<h1>
  Output
</h1>
<div class="output">
  Hello,
  <span id="name-output"></span>. You've clicked the count button
  <span id="count-output"></span> times.
</div>

CSS

.output {
  border: solid 1px #000000;
  width: 100%;
  height: 200px;
  padding: .2rem;
}

h1 {
  margin-bottom: 0;
}

JavaScript

let counter = 0;

function updateDisplay() {
  document.getElementById('name-output').innerText = document.getElementById('name-input').value;
  let countDisplay = '';

  if (counter > 30) {
    countDisplay = 'a lot of';
  } else {
    countDisplay = counter;
  }
  document.getElementById('count-output').innerText = countDisplay;
}

function countClicks() {
  counter = counter + 1;
  updateDisplay();
}