Merge remote-tracking branch 'fw/main' into import-fibonacci-worker

Schalk Neethling · Schalk Neethling · commit e6dbc09920f0 · 2022-09-11T14:53:53.000+02:00
diff --git a/web-workers/fibonacci-worker/README.md b/web-workers/fibonacci-worker/README.md
@@ -1,2 +1,3 @@
 # fibonacci-worker
-A web worker that calculates fibonacci numbers. [See it live](https://mdn.github.io/fibonacci-worker/).
+
+A web worker that calculates fibonacci numbers. [See it live](https://mdn.github.io/dom-examples/web-workers/fibonacci-worker/).
diff --git a/web-workers/fibonacci-worker/fibonacci.js b/web-workers/fibonacci-worker/fibonacci.js
@@ -1,12 +1,14 @@
-self.onmessage = function(e) {
-  let userNum = Number(e.data);
+self.onmessage = function (event) {
+  const userNum = Number(event.data);
   fibonacci(userNum);
-}
+};
 
+function fibonacci(num) {
+  let a = 1;
+  let b = 0;
+  let temp;
 
-function fibonacci(num){
-let a = 1, b = 0, temp;
-  while (num >= 0){
+  while (num >= 0) {
     temp = a;
     a = a + b;
     b = temp;
diff --git a/web-workers/fibonacci-worker/index.html b/web-workers/fibonacci-worker/index.html
@@ -1,54 +1,57 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="UTF-8"  />
+    <meta charset="UTF-8" />
     <title>Fibonacci number generator</title>
     <style>
       body {
         width: 500px;
       }
 
-      div, p {
+      div,
+      p {
         margin-bottom: 20px;
       }
     </style>
   </head>
   <body>
-
-  <form>
-    <div>
-      <label for="number">Enter a number that is an index position in the fibonacci sequence to see what number is in that position (e.g. enter 5 and you'll get a result of 8 &mdash; fibonacci index position 5 is 8).</label>
-      <input type="number" id="number">
-    </div>
-    <div>
-      <input type="submit">
-    </div>
-  </form>
-
-  <p id="result"></p>
-
-  <script language="javascript">
-    var form = document.querySelector('form');
-    var input = document.querySelector('input[type="number"]');
-    var result = document.querySelector('p#result');
-    var worker = new Worker('fibonacci.js');
-
-    worker.onmessage = function(event) {
-      result.textContent = event.data;
-      console.log('Got: ' + event.data + '\n');
-    };
-
-    worker.onerror = function(error) {
-      console.log('Worker error: ' + error.message + '\n');
-      throw error;
-    };
-
-    form.onsubmit = function(e) {
-      e.preventDefault();
-      worker.postMessage(input.value);
-      input.value = '';
-    }
-
-  </script>
+    <form>
+      <div>
+        <label for="number"
+          >Enter a number that is an index position in the fibonacci sequence to
+          see what number is in that position (e.g. enter 5 and you'll get a
+          result of 8 &mdash; fibonacci index position 5 is 8).</label
+        >
+        <input type="number" id="number" />
+      </div>
+      <div>
+        <input type="submit" />
+      </div>
+    </form>
+
+    <p id="result"></p>
+
+    <script>
+      const form = document.querySelector("form");
+      const input = document.querySelector('input[type="number"]');
+      const result = document.querySelector("p#result");
+      const worker = new Worker("fibonacci.js");
+
+      worker.onmessage = function (event) {
+        result.textContent = event.data;
+        console.log("Got: " + event.data + "\n");
+      };
+
+      worker.onerror = function (error) {
+        console.log(`Worker error: ${error.message} \n`);
+        throw error;
+      };
+
+      form.onsubmit = function (event) {
+        event.preventDefault();
+        worker.postMessage(input.value);
+        input.value = "";
+      };
+    </script>
   </body>
 </html>
