FizzBuzz

In this example below you will see how to do a FizzBuzz with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by TdeBooij, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright TdeBooij ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FizzBuzz</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body ng-app="MyApp" ng-controller="MyController as ctrl">	
	<pre class="console">
{{ctrl.log}}    
	</pre>	
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/TdeBooij/fizzbuzz-aBBYwg */
pre.console{
  background-color: #000;
  width: 700px;
  min-height: calc(100vh - 20px);
  margin: 10px auto;  
  color: #ddd;
  padding: 10px;
  overflow-y: scroll;
}



/*Downloaded from https://www.codeseek.co/TdeBooij/fizzbuzz-aBBYwg */
angular
	.module('MyApp', ['ui.bootstrap'])
	.controller('MyController', MyController);

function MyController($uibModal) {
	var vm = this;	  
  vm.log = "";  
  
  fizzBuzz(25);
  
  function fizzBuzz(times){
    for (var i = 1; i <= times; i++){
      if (i % 15 == 0) {
        log('FizzBuzz');
      } else if (i % 3 == 0){
        log('Fizz');
      } else if (i % 5 == 0){
        log('Buzz');
      } else {
        log(i);
      }
      
    }
  }
  
  function log(log){
    vm.log += log + "\n";
  }
}

Comments