The purpose of our introductory CS275 assignment is two-fold:
- Set up your client side environment
Part 1: Selection and Configuration of Development Environment
In this course we are developing cross-compatible sites, so developing on your local machine will be both acceptable and convenient
All you will need for our client side applications is:
- A modern web browser (we recommend Chrome)
- A basic text editor (like Notepad or Textpad)
- Using something like Microsoft World would add additional formatting and therefore most likely would result in issues with your code.
Part 2: Developing a Simple HTML Page
Now that you have decided on your client-side setup, let’s start developing!
In this assignment we are going to create a webpage that shows information about Fibonacci numbers. You may want to refresh yourself about them here:
In our first iteration of our webpage we will create a pure HTML page.
Do the following:
- Open up a text editor (your choice!)
- Create a simple HTML web page that has
- A title in the title bar
- A paragraph about the history behind the Fibonacci sequence.
- An appropriate image representing this topic (just Google “Fibonacci images”; there are plenty of example images.
- Save your page as “<studentID>_HW1.html”
- Open your file in a web browser to see the result.
Now add to your page:
- A text field
- A button
- An empty div
The behavior should be as follows:
- The user types some non-negative number in the text box
- The user clicks the button
- On this event, get the string stored in the text field and convert it to an integer.
- Compute the value of this number in the Fibonacci sequence.
- Display the result in the (previously) empty div.
- Although there’s=0, no=actual1 consensus, for consistency let’s consider the Fibonacci sequence to
start at 0 1 . Therefore if the user entered 2 into the text field you could output the 2nd number in the Fibonacci sequence, 1, etc..
Part 4: Handling More Cases
What would happen if there’s nothing in the text box? If there’s a negative number? If there’s non-integer text?
Use this information to make your program more robust:
- If it can’t convert the text to an integer, display “Invalid Input” in the div
- If the integer is negative, display “Cannot compute Fib of a negative integer”
- Otherwise do what you did in Part 3
Part 5: Make a Table
Now it would be really cool if we were given a non-negative integer then we create a table of the Fibonacci sequence up to an included the integer entered.
Change your program so that if there’s a non-negative integer in the text box when the button is clicked that we generate this sort of table.
- This will be a good opportunity for you to play with loops and string concatenation.
- You may want to construct a single long string that is the table and then set the div’s content to that.
What to submit
For submission you are to submit:
- A screen cast video to Blackboard detailing a thorough code review of your program along with a demo execution of the application.
- Your source code, well internally documented.
- README file on how to run your code.
Grading (50) Points
- 40 points : program correctness and along with adherence to the stated requirements
- 5 points : quality of internal documentation and code style
- 5 points : README file