Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.myButton {


}
</style>
</head>
<body>
  <button class='myButton' onclick="countClicks()">Click ME!</button>
  <p id='teacherClickCount'>Teacher Count</p>
<!--(1) Have the paragraph 'Student Count' show the number of clicks"-->
  <p id='studentClickCount'>Student Count</p>
  <p id='randomClickCount'>Random</p>
<!-- (2) Add a conditional so that a cow GIF shows up here at the bottom of the page when the user hits 50 clicks.-->
  <img id='cow'>
<script id="jsbin-javascript">
var clicks=0;
function countClicks() {
 clicks++;
// (1) Delete the alert function and make the 'Student Count' pargraph  the number of clicks instead. Hint:'get the element by its ID and change the inner text to the number of clicks'
  document.getElementById('studentClickCount').innerHTML=clicks;
// (2) Add a conditional so that a cow GIF shows up at the bottom of the page when the user hits 50 clicks. Hint: If the number of clicks equals 50 set the image attribute to a cow GIF.
}
</script>


<script id="jsbin-source-css" type="text/css">
.myButton {


}</script>

<script id="jsbin-source-javascript" type="text/javascript">var clicks=0;
function countClicks() {
 clicks++;
// (1) Delete the alert function and make the 'Student Count' pargraph  the number of clicks instead. Hint:'get the element by its ID and change the inner text to the number of clicks'
  document.getElementById('studentClickCount').innerHTML=clicks;
// (2) Add a conditional so that a cow GIF shows up at the bottom of the page when the user hits 50 clicks. Hint: If the number of clicks equals 50 set the image attribute to a cow GIF.
}


  </script></body>
</html>