<div class="controls">
  <button id="reset" class="reset">Reset</button>
  <button id="add5">+5</button>
  <button id="add10">+10</button>
  <button id="sub1">-1</button>
  <button id="sub5">-5</button>
</div>

<h1 id="currentTotal">0</h1>
body {
  font-family: sans-serif;
  margin: 3em;
  padding: 0;
}

button {
  background-color: #FFD800;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  border: 3px solid transparent;
}

button:focus {
  outline: none;
  border: 3px solid #e51b24;
}

.reset {
  background-color: #ff9db6;
}

h1 {
  text-align: center;
}

.controls {
  text-align: center;
}
// Fix the score keeper so that the +10 and -5 buttons work. The +5, -1 and reset buttons already work.
// We want to print out the total number of points when the user clicks one of the buttons
var result = 0; 


$('#reset').on('click', function () {
  result = 0;
  $('#currentTotal').html(result);
});

$('#add5').on('click', function () {
  result += 5;
  $('#currentTotal').html(result);
});

$('#add10').on('click', function () {
  result += 10;
  
  $('#currentTotal').html(result);
});

$('#sub1').on('click', function () {
  result -= 1; 
  
  $('#currentTotal').html(result);
});

$('#sub5').on('click', function () {
  // add code here
  result -= 5;
  
  $('#currentTotal').html(result);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js