AndrewBarfield/Fibonacci-Sequence-in-a-Web-Worker.markdown

## Fibonacci-Sequence-in-a-Web-Worker.markdown

      
    Raw
  

              Fibonacci-Sequence-in-a-Web-Worker.markdown
            
          
    Fibonacci Sequence in a Web Worker

Generates the Fibonacci Sequence in a Web Worker.
A Pen by Andrew Mitchell Barfield on CodePen.
License.

  
## index.html
<html>
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <h2><img alt="" src="https://mdn.mozillademos.org/files/3831/HTML5_Performance_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;">Fibonacci Sequence in a Web Worker</h2>
    <div id="Info_Output"></div>
    <div id="Fib_Output">0, 1</div>

    <!-- To see the Web Worker script, look here: -->
    <!-- http://codepen.io/AndrewBarfield/pen/MYpOpd -->

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  </body>
</html>

## script.js
$(function() {
  if (window.Worker) {
    var WEB_WORKER_URL = "http://s.codepen.io/AndrewBarfield/pen/MYpOpd.js";
    var worker = new Worker(WEB_WORKER_URL);

    worker.onmessage = function(e) {
      $("#Fib_Output").append(e.data[0]);
      $("#Info_Output").append(e.data[1]);
    }

    // Start the worker
    worker.postMessage("");
  }
  else {
    $("#Fib_Output").html("<h1>Your browser does not support Web Workers.<br/>Please use a modern browser.</h1>");
  }
});

## style.css
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v14/fg2nPs59wPnJ0blURyMU3PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body {
    margin: 20px 40px 40px 20px;
    font-family: 'Roboto', sans-serif;
}

#Info_Output {
  color: gray;
  margin-bottom: 30px;
}

#Fib_Output {
  word-wrap: break-word;
  font-size: normal;
  line-height: 200%;
}
	<html>
	<head>
	<meta charset="utf-8" />
	</head>

	<body>
	<h2><img alt="" src="https://mdn.mozillademos.org/files/3831/HTML5_Performance_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;">Fibonacci Sequence in a Web Worker</h2>
	<div id="Info_Output"></div>
	<div id="Fib_Output">0, 1</div>

	<!-- To see the Web Worker script, look here: -->
	<!-- http://codepen.io/AndrewBarfield/pen/MYpOpd -->

	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	</body>
	</html>
	$(function() {
	if (window.Worker) {
	var WEB_WORKER_URL = "http://s.codepen.io/AndrewBarfield/pen/MYpOpd.js";
	var worker = new Worker(WEB_WORKER_URL);

	worker.onmessage = function(e) {
	$("#Fib_Output").append(e.data[0]);
	$("#Info_Output").append(e.data[1]);
	}

	// Start the worker
	worker.postMessage("");
	}
	else {
	$("#Fib_Output").html("<h1>Your browser does not support Web Workers.<br/>Please use a modern browser.</h1>");
	}
	});
	/* latin */
	@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Regular'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v14/fg2nPs59wPnJ0blURyMU3PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	body {
	margin: 20px 40px 40px 20px;
	font-family: 'Roboto', sans-serif;
	}

	#Info_Output {
	color: gray;
	margin-bottom: 30px;
	}

	#Fib_Output {
	word-wrap: break-word;
	font-size: normal;
	line-height: 200%;
	}