FizzBuzz Demo for AVC Position

by Ian Sanders

HTML

<div class='centeredContents'>
  <button onClick='fizzBuzz()' id='countButton'>
    Click Me
  </button>
  <div>
    Clicks:&nbsp;<span id='counter'>0</span>
  </div>
</div>

CSS

body {
  font-family: Helvetica;
}
.centeredContents {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: lightgrey;
  flex-direction: column;
}
#countButton {
  padding: 1em;
  margin: 1em;
  border-radius: 1em;
  border: 1px solid gray;
  cursor: pointer;
  transition: background-color 0.2s;
  background: #ccc;
}
#countButton:hover {
  background: #ddd;
}
#countButton:active {
  background: #eee;
}
#counter {
  font-family: monospace;
  font-weight: bold;
}

JavaScript

var clickCount = 0;

function fizzBuzz() {
	var counterElement = document.getElementById('counter'),
  		fizzBuzzString = '';
      
  clickCount++;
  
  if(counterElement) {
   
    if(clickCount % 5 == 0) fizzBuzzString += 'Fizz';
    if(clickCount % 3 == 0) fizzBuzzString += 'Buzz';
    
    // Add parentheses if the string has any content
    fizzBuzzString =
    	`${fizzBuzzString && '('}${fizzBuzzString}${fizzBuzzString && ')'}`;
    
    counterElement.textContent = `${clickCount} ${fizzBuzzString}`;

  } else {
  	console.error('Error: No target element found to display number.');
  }
}