Fibonacci Sequence

by kirupa (https://www.kirupa.com/about/whatiskirupa.htm) | filed under Coding Exercises (https://www.kirupa.com/codingexercises/index.htm)

There is a famous sequence of numbers that looks as follows:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...

This is the Fibonacci sequence, and the rule behind it is pretty simple. We start with 0 and 1. Every number after that is the sum of the two numbers that came right before it. 0 + 1 gives us 1. 1 + 1 gives us 2. 1 + 2 gives us 3. 2 + 3 gives us 5. You get the idea.

What makes this sequence so popular is that it shows up in nature all the time. Count the spirals on a pinecone, and you'll often find 8 going one way and 13 going the other. Sunflower seeds commonly form 34 and 55 spirals. If we draw squares whose sides match the Fibonacci numbers and connect their corners with quarter circles, we get a spiral that looks a whole lot like a snail's shell.

For this exercise, the goal is to print the Fibonacci sequence to the console. The rules are:

1. Print the first 20 numbers of the Fibonacci sequence, starting with 0 and 1
2. Each number must be calculated by your code. No typing the numbers in by hand!
3. If everything works, the last number you print will be 4181

An example of the output could look as follows:

0
1
1
2
3
5
8
13
...
4181

Looking for some extra credit? Here are two ideas:

- Divide each Fibonacci number by the one that came before it. As the numbers get larger, the result gets closer and closer to 1.618, a number known as the golden ratio. Print these ratios out and watch it happen.
- Write a version that uses recursion, where a fibonacci(n) function calls itself to calculate the nth number. Then, ask it for the 45th number and see what happens. Things may get a bit...snail-like.

Onwards!

Starting Point

Create a new HTML document in your favorite code editor (like Visual Studio Code) and copy/paste the following starting content into it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fibonacci Sequence</title>
</head>
<body>
  <script>
    
  </script>
</body>
</html>

The HTML you see here is just the bare minimum content needed to help us get our web page up and running. The rest of the content is what you will add entirely on your own! Since our output is printed to the console, be sure to bring up your browser's developer tools to see the results.

Hint: Some Learning Resources

The following tutorials may provide some helpful tips and techniques to help you with this exercise: Console Logging Basics (https://www.kirupa.com/html5/console.htm), Looping in JavaScript (https://www.kirupa.com/html5/loops_in_javascript.htm), Numbers (https://www.kirupa.com/html5/numbers_in_javascript.htm), A Visual Introduction to Arrays (https://www.kirupa.com/javascript/visual_guide_arrays.htm), Fibonacci and Going Beyond Recursion (https://www.kirupa.com/data_structures_algorithms/fibonacci_going_beyond_recursion.htm)

Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection (https://forum.kirupa.com/badges/):

[Image: Fibonacci Sequence badge] (https://www.kirupa.com/codingexercises/images/fibonacci_sequence_badge.png)

To claim it, head over to the forums and respond in the Fibonacci Sequence topic (https://forum.kirupa.com/t/fibonacci-sequence-frontend-coding-exercise/683592). Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:

[Image: ] (https://www.kirupa.com/codingexercises/images/create_forum_topic.webp)

Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

Stuck? Need Help? Want a Code Review?

We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums (https://forum.kirupa.com). Please explain your problem in detail and one of the many helpful forum members will help you out.

Similarly, if you want feedback on your code, please also ask in the forums. This would be an excellent chance for you to learn how you can improve your solution from other web developers!