Objects and Functions

The goal of this assignment is to improve your skills with JavaScript. Specifically, you will get practice using the following JavaScript concepts:
  • variables
  • conditional statements
  • date object
  • functions

Forming teams

This assignment will be completed in pairs.

Use this team-forming shared document to form and declare teams.

Requirements

Task 0: Set up and preparation

Click on this link to download a zipped copy of the hw03 starting folder onto your Desktop and open it by double-clicking on it. The hw03 folder contains materials you will use for the assignment, including an HTML-only page assign3.html, and a JavaScript file myJSCode.js. Note that you can open assign3.html in a browser and see how it simply prints "No calculation yet" when you click on the first button. Your code will change that so that when you click on each button the right calculation is performed. You can also see how the final program would behave by trying out an sample solution.

Starting with the myJSCode.js file, you'll add code to the empty functions created for you, to solve the tasks specified below. Examine the contents of this file to understand how it is set up and where you should be inserting your code.

Important Note

You may not modify the assign3.html file. It's just there to help you test your JS code. You should only modify myJSCode.js.
Also, make sure that the top of the file comments include your name.

Task 1: Conditionals over the time of day

In this task, you will write a program than reports to the user the meal served in the dining hall according to the provided time of day.

Fill in the code in function MealTime() {} to do the following:

  • Prompt the user for the current time by asking for:
    • Hour which is the hour of the day, using a 24-hour clock, where 0 is the hour just after midnight, 1 is 1am, ... 12 is noon, 13 is 1pm ... 22 is 10pm, and 23 is 11pm. In the U.S., this is often called military time, but this is the system that most of the world uses.
    • Minute which is the minute of the hour, an integer from 0 to 59.
  • Decide on the message to show the user according to the time of day:
    • The "Kitchen is closed" message appears on the web page starting at 12:00 AM, up to but not including 8:00 AM.
    • The "Breakfast is being served" message appears when visited during breakfast hours, starting at 8:00 AM, up to but not including 11:30 AM.
    • The "Lunch is being served" message appears when the page is visited during lunch hours, starting at 11:30 AM, up to but not including 4:00 PM.
    • The "Dinner is being served" message appears when the page is visited during dinner hours, starting at 4:00 PM, up to but not including 12:00 AM of the next day.
  • Report that message to the user via the console.log() function.
  • Report that message to the user via the document.getElementById('hungry').innerHTML property.

You can test your code by clicking on the Feed Me! button in the html file.

Testing, testing...

In Task 1, there are a number of situations you should test, so that all the paths through your code are tested. You should consider testing at least all of the following times.

  • 7:59
  • 8:00
  • 10:45
  • 11:29
  • 11:30
  • 15:59
  • 16:00

Conditionals make code harder to test, because there are more paths through the code and so more scenarios need to be tested. We expect you to think about these as your skills develop.

Task 2: More on file calculations

Fill in the code in function ImageSize() {} to do the following:

  • Prompt the user for the image details by asking for:
    • the height and width of the image to calculate pixNum, which is the total number of pixels in the image.
    • colorNum which is the total number of colors in the image.
  • Calculate the bit depth of the colors in the image by using a cascading if statement to assign the bit depth based on the number of colors (as if you were reading the bit depth from the table below):
    # colorsbit-depth (bits/pixel)
    1 - 2 1
    3 - 4 2
    5 - 8 3
    9 - 164
    17 - 325
    33 - 646
    65 - 1287
    129 - 2568
  • Calculate the total size of the compressed image. Remember that the file size is the sum of the image size and the color table size (in bytes). The image size (in bits) is the product of the number of pixels by the bit depth. The color table size is determined by the number of colors, but each color needs 3 bytes to be represented (one for each R, G and B component).
  • Report those values in the console (so that you can check your work).
  • Decide on the message to show the user according to the compressed image size:
    • The "Image is too large" message must show if the file size is larger than 100KB.
    • The "Image is just fine" message must show if the file size is less than or equal to 100KB.

You can test your code by clicking on the How Big? button in the html file. Think about how best to test your code and determine some appropriate test cases.

Task 3: Finding the day you were born

Do you know which day of the week you were born?

You can use a new Date() object to figure out which day you were born.

Fill in the code in function DayIWasBorn() {} to do the following:

  • Prompt the user for the birth date by asking for:
    • Month which is a value between 1 and 12.
    • Day which is a value between 1 and 31.
    • Year which is a four-digit representation of the birth year.
  • Compute the corresponding day of the week by invoking the appropriate methods in the Date object you created.
  • Report the day of your birth in both English and French.

Test the code you have written using both partners' birthdays. Write the results of these tests in the comments in the code.

Submission

Your folder should contain the assign3.html and the myJSCode.js files. Please remember that both partners must submit the assignment.

Important Note

You and your partner must both upload your hw03 folder to your cs115-assignments folder, which is a subfolder of your public_html folder, on the cs server. Your cs115-assignments folder has permissions set so that only you and the instructors/graders can see your work.

Make sure you check the page using the URL once you've uploaded:

http://cs.wellesley.edu/~myname/cs115-assignments/hw03/assign3.html

When you visit the page, because it is protected, you will be prompted for a username and password. You should use your own account name and password for the CS server.

Due Date/Time

Remember that assignments may not be turned in late. They are due at 11:59PM on the due date (check the schedule). Furthermore, remember that this policy means that you should not modify turned in work after the due time has passed, so that when we grade it, it's not time-stamped late.

Honor Code

The Honor Code applies to this course. You are encouraged to discuss assignments with other students, the tutors, and with your instructors. However, you must solve, write up, debug, test and document the assignment on your own. In other words, it is acceptable to talk with other students in English (or any other human language), but not acceptable to use any formal language and especially not HTML, CSS or JavaScript. You should not be looking at other peoples' code or showing them yours. If you worked with others or you have obtained help from any source, you must acknowledge their contribution in writing.

Homework assignments must be your own work. You may not look at solutions from other students, either from the current offering or from past offerings.

Grading

These are the criteria we use to grade the homework:

  • Homework was submitted on the server by the due date. Late submissions receive 0 points.
  • Folders and files have the required names and are uploaded to the proper location.
  • Your files have comments at the top and as necessary interspersed in the code.
  • You have not modified the original HTML page.
  • The JS code produces correct results for any input.