pasela/fizzbuzz.html

## fizzbuzz.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>FizzBuzz</title>

  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" />

  <style>
  h1 {
    margin-bottom: 1em;
    font-size: 125%;
    border-bottom: 2px solid #ccc;
  }

  #fizzbuzz span {
    font-size: large;
  }

  #fizzbuzz #number,
  #fizzbuzz #result {
    padding: 5px 1em;
    border: 1px solid #468847;
    background-color: #DFF0D8;
  }

  #fizzbuzz .arrow {
    margin-left: 0.5em;
    margin-right: 0.5em;
  }

  #list {
    margin-left: 1em;
    list-style-type: none;
  }

  #list .active {
    font-weight: bold;
    color: #468847;
  }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
  <script>
  function fizzbuzz(number) {
    if (number % 15 == 0) {
      return 'FizzBuzz';
    } else if (number % 3 == 0) {
      return 'Fizz';
    } else if (number % 5 == 0) {
      return 'Buzz';
    } else {
      return number;
    }
  }

  var Paginator = {
    init: function (container, size) {
      this.container = $(container);
      this.size = size;
      this.build();

      this.container.find('ul').on('click', '.active, .disabled', function (event) {
        event.preventDefault();
      });
    },

    build: function () {
      var ul = $('<ul />');
      ul.append($('<li />').addClass('previous').append($('<a />').html('&laquo;')));
      for (var i = 0; i < this.size; i++) {
        ul.append($('<li />').append($('<a />')));
      }
      ul.append($('<li />').addClass('next').append($('<a />').html('&raquo;')));
      this.container.append(ul);
    },

    set: function (page) {
      var range = this.getRange(page);
      if (range.current == 1) {
        this.container.find('li.previous').addClass('disabled').find('a').attr('href', '#');
      } else {
        this.container.find('li.previous').removeClass('disabled').find('a').attr('href', '#' + (range.current - 1));
      }
      this.container.find('li.next a').attr('href', '#' + (range.current + 1));

      this.container.find('li:not(.previous, .next)').each(function (index) {
        var num = range.start + index;
        $(this).removeClass('active disabled').find('a').attr('href', '#' + num).text(num);
        if (num == range.current) {
          $(this).addClass('active');
        }
      });
    },

    getRange: function (page) {
      var current = page < 1 ? 1 : page, start, end;
      start = current - Math.floor((this.size - (1 - this.size % 2)) / 2);
      if (start < 1) {
        start = 1;
      }
      end = start + this.size - 1;

      return {
        current: current,
        start: start,
        end: end
      };
    }
  };

  function updateList(num) {
    var range = Paginator.getRange(num);

    $('#list').empty();
    for (var num = range.start; num <= range.end; num++) {
      var li = $('<li />').text(num + ' → ' + fizzbuzz(num));
      if (num == range.current) {
        li.addClass('active');
      }
      $('#list').append(li);
    }
  }

  function display() {
    var num = getNumber();
    Paginator.set(num);

    $('#number').text(num);
    $('#result').text(fizzbuzz(num));
    updateList(num);
  }

  function getNumber() {
    if (!window.location.hash) {
      return 1;
    }
    var number = parseInt(window.location.hash.substr(1));
    return (isNaN(number) || number < 1) ? 1 : number;
  }

  $(function () {
    Paginator.init('.pagination', 10);
    display();

    $(window).on('hashchange', display);
  });
  </script>
</head>
<body>
  <div class="container-fluid">
    <h1>FizzBuzz</h1>

    <div id="fizzbuzz">
      <span id="number"></span>
      <span class="arrow">→</span>
      <span id="result"></span>
    </div>

    <div class="pagination"></div>

    <ul id="list">
    </ul>
  </div>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>FizzBuzz</title>

	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" />

	<style>
	h1 {
	margin-bottom: 1em;
	font-size: 125%;
	border-bottom: 2px solid #ccc;
	}

	#fizzbuzz span {
	font-size: large;
	}

	#fizzbuzz #number,
	#fizzbuzz #result {
	padding: 5px 1em;
	border: 1px solid #468847;
	background-color: #DFF0D8;
	}

	#fizzbuzz .arrow {
	margin-left: 0.5em;
	margin-right: 0.5em;
	}

	#list {
	margin-left: 1em;
	list-style-type: none;
	}

	#list .active {
	font-weight: bold;
	color: #468847;
	}
	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
	<script>
	function fizzbuzz(number) {
	if (number % 15 == 0) {
	return 'FizzBuzz';
	} else if (number % 3 == 0) {
	return 'Fizz';
	} else if (number % 5 == 0) {
	return 'Buzz';
	} else {
	return number;
	}
	}

	var Paginator = {
	init: function (container, size) {
	this.container = $(container);
	this.size = size;
	this.build();

	this.container.find('ul').on('click', '.active, .disabled', function (event) {
	event.preventDefault();
	});
	},

	build: function () {
	var ul = $('<ul />');
	ul.append($('<li />').addClass('previous').append($('<a />').html('«')));
	for (var i = 0; i < this.size; i++) {
	ul.append($('<li />').append($('<a />')));
	}
	ul.append($('<li />').addClass('next').append($('<a />').html('»')));
	this.container.append(ul);
	},

	set: function (page) {
	var range = this.getRange(page);
	if (range.current == 1) {
	this.container.find('li.previous').addClass('disabled').find('a').attr('href', '#');
	} else {
	this.container.find('li.previous').removeClass('disabled').find('a').attr('href', '#' + (range.current - 1));
	}
	this.container.find('li.next a').attr('href', '#' + (range.current + 1));

	this.container.find('li:not(.previous, .next)').each(function (index) {
	var num = range.start + index;
	$(this).removeClass('active disabled').find('a').attr('href', '#' + num).text(num);
	if (num == range.current) {
	$(this).addClass('active');
	}
	});
	},

	getRange: function (page) {
	var current = page < 1 ? 1 : page, start, end;
	start = current - Math.floor((this.size - (1 - this.size % 2)) / 2);
	if (start < 1) {
	start = 1;
	}
	end = start + this.size - 1;

	return {
	current: current,
	start: start,
	end: end
	};
	}
	};

	function updateList(num) {
	var range = Paginator.getRange(num);

	$('#list').empty();
	for (var num = range.start; num <= range.end; num++) {
	var li = $('<li />').text(num + ' → ' + fizzbuzz(num));
	if (num == range.current) {
	li.addClass('active');
	}
	$('#list').append(li);
	}
	}

	function display() {
	var num = getNumber();
	Paginator.set(num);

	$('#number').text(num);
	$('#result').text(fizzbuzz(num));
	updateList(num);
	}

	function getNumber() {
	if (!window.location.hash) {
	return 1;
	}
	var number = parseInt(window.location.hash.substr(1));
	return (isNaN(number) \|\| number < 1) ? 1 : number;
	}

	$(function () {
	Paginator.init('.pagination', 10);
	display();

	$(window).on('hashchange', display);
	});
	</script>
	</head>
	<body>
	<div class="container-fluid">
	<h1>FizzBuzz</h1>

	<div id="fizzbuzz">
	<span id="number"></span>
	<span class="arrow">→</span>
	<span id="result"></span>
	</div>

	<div class="pagination"></div>

	<ul id="list">
	</ul>
	</div>
	</body>
	</html>