<button id="red"> Red</button>
<button id="green"> Green </button>
<button id="blue"> Blue</button>
<button id="purple">Purple</button>
<button id="clear"> Clear</button>
 
<p id="sentence">
  My color is going to change once you clik the buttons <br>
  Just Choose the color you want and you <br> are going to see the change
</p>

#red{
  border: 1px solid black;
  color: black;
  background-color: red;
  font-family: Helvetica;
  font-size: 200%;
  pading:5px;
}

#green{
  border: 1px solid black;
  color: black;
  background-color: green;
  font-family: Helvetica;
  font-size: 200%;
  padding: 5px;
}

#blue{
  border: 1px solid black;
  color: black;
  background-color: blue;
  font-family: Helvetica;
  font-size: 200%;
  pading:5px;
}

#purple{
  border: 1px solid black;
  color: black;
  background-color: purple;
  font-family: Helvetica;
  font-size: 200%;
  pading:5px;
}

#clear{
  border: 1px solid black;
  color: black;
  background-color: lightcyan;
  font-family: Helvetica;
  font-size: 200%;
  pading:5px;
}

#sentence{
  font-family: arial;
  font-size: 150%;
   margin-left: 15px;
}

var colorRed = document.getElementById('red');

var colorGreen = document.getElementById('green');

var colorBlue = document.getElementById('blue');


var colorPurple = document.getElementById('purple');

var clear = document.getElementById('clear');


var sentence = document.getElementById('sentence');

colorRed.addEventListener('click', changeRed);

function changeRed(){
  sentence.style.color ='red';
}

colorGreen.addEventListener('click', changeGreen);

function changeGreen(){
  sentence.style.color ='green';
}

colorBlue.addEventListener('click', changeBlue);

function changeBlue(){
  sentence.style.color ='blue';
}

colorPurple.addEventListener('click', changePurple);

function changePurple(){
  sentence.style.color = 'purple';
}

clear.addEventListener('click', clearColor);

function clearColor(){
  sentence.style.color ='black';
}