Lab 9 4/9/21, 12:42 AM
Page 1 of 4
Lab 9
Due Sunday by 11:59pm Points 100 Submitting a file upload
Start Assignment
CS-546 Lab 9
Fibonacci & Prime Number Checker
For this lab, you will be using HTML, CSS, and JavaScript on the user's browser to make a simple
application that first calculates the Fibonacci (https://en.wikipedia.org/wiki/Fibonacci_number) of a
given index and then will check if that is a Prime Number.
The Fibonacci value of an index is the sum of the previous two Fibonacci values; the Fibonacci of
any number less than 1 is 0; the Fibonacci Value of 1 is 1; the Fibonacci value of all other
numbers is the sum of the previous two Fibonacci numbers.
Here is a sample list of the indexes (this will be what the user inputs) and the value (this is what you
are calculating). The values are NOT just limited to this list but for ALL Fibonacci index/values.
IndexValue Description
0 0 Fibonacci of anything less than 1 is 0
1 1 Fibonacci of 1 is 1
2 1 Fibonacci of 2 is Fibonacci(1) + Fibonacci(0)
3 2 Fibonacci of 3 is Fibonacci(2) + Fibonacci(1)
4 3 Fibonacci of 4 is Fibonacci(3) + Fibonacci(2)
5 5 Fibonacci of 5 is Fibonacci(4) + Fibonacci(3)
6 8 Fibonacci of 6 is Fibonacci(5) + Fibonacci(4)
7 13 Fibonacci of 7 is Fibonacci(6) + Fibonacci(5)
8 21 Fibonacci of 8 is Fibonacci(7) + Fibonacci(6)
9 34 Fibonacci of 9 is Fibonacci(8) + Fibonacci(7)
10 55 Fibonacci of 10 is Fibonacci(9) + Fibonacci(8)
11 89 Fibonacci of 11 is Fibonacci(10) + Fibonacci(9)
Lab 9 4/9/21, 12:42 AM
Page 2 of 4
11 89 Fibonacci of 11 is Fibonacci(10) + Fibonacci(9)
And so on.
You will create an express server with a single page at the location / that will provide the user with a
web page with a form to allow the user to enter an index (a number), when the form is submitted, the
system will then calculate the Fibonacci value for the index inputted and then also to check if the
returned Fibonacci value is a prime number. The entire checking operation will be done using
client-side JavaScript.
The Server
Your server this week should not do any of the processing or calculations. Your server only
exists to allow someone to get to the HTML Page and download the associated assets to run
the Fibonacci & prime number checking page.
/ The Whole Fibonacci & Prime Number Checker
Your page should have a few basic user interface elements:
A header tag, with an h1 naming your site, with a title for your page
A footer with your name, student ID, and any other info about yourself you wish to include
A single unordered list with an id of results . All of the results for each index the user inputted
and that has been calculated so far (until you refresh the page) will appear in this list as list items.
Numbers that are prime will be colored in green (see precise hex code below), while numbers that
are not will be colored in red (see precise hex code below).
. You must use the CSS classes below to color these items.
So for example, say the user entered index 4 the first time and then an index of 6 the 2nd time. It
would output displayed on the page would be: (You MUST write the output exactly as shown
below "The Fibonacci of X is Y." (No quotes and don't forget the period at the end.)
The Fibonacci of 4 is 3.
The Fibonacci of 6 is 8.
Since 3 is a prime number and 8 is not. Remember we are calculating if the Fibonacci Value is prime
(not the index)
Your page will have a form with the following:
A label with a for attribute referencing your input
Lab 9 4/9/21, 12:42 AM
Page 3 of 4
A label with a for attribute referencing your input
A input with a name and type of number
A button to submit the form
Using JavaScript in your browser only, you will listen for the form's submit event; when the form is
submitted, you will:
Get the value of the input text element (this will be the Fibonacci index)
Calculate the Fibonacci value for the given index
Determine whether or not the number is a prime number
Add a list item to the #results list of numbers you have checked. This list item should have a
class of is-prime if it is a prime number, or not-prime it is not.
If the user does not have a value for the input when they submit, you should not continue checking
and instead should inform them of an error somehow.
The style
You will style your page using at least 10 CSS selectors for general CSS styling. You will place the
CSS in its own file.
You must style the is-prime class to make text have a color of #00E676 for numbers that are prime
and not-prime class to make text have a color of #FF3D00 for numbers that are not prime
References and Packages
Basic CSS info can easily be referenced in the MDN CSS tutorial (https://developer.mozilla.org/enUS/docs/Web/Guide/CSS/Getting_started) .
Requirements
1. All previous requirements still apply.
2. You must remember to update your package.json file to set app.js as your starting script!
3. Your HTML must be valid (https://validator.w3.org/#validate_by_input) or you will lose points on the
assignment.
4. Your HTML must make semantical sense; usage of tags for the purpose of simply changing the
style of elements (such as i , b , font , center , etc) will result in points being deducted; think in
terms of content first, then style with your CSS.
5. You can be as creative as you'd like to fulfill front-end requirements; if an implementation is
Lab 9 4/9/21, 12:42 AM
Page 4 of 4
not explicitly stated, however you go about it is fine (provided the HTML is valid and semantical).
Design is not a factor in this course.
6. Your client side JavaScript must be in its own file and referenced from the HTML
accordingly.
7. All inputs must be properly labeled!