IT-202: Assignment #5, Spring Quarter 2025

Friendly Reminder

I will probably also be sending this out via News posting as well.

I do not feel that this reminder is necessary for your section as you folks have been doing a really terrific job. Your focus in the classroom has been -- and I don't use this term lightly -- outstanding. While there have been a couple of people doing so, it has been very rare for me to see people checking phones, doing unrelated things on laptops etc during lecture.

But I do want to send out a friendly reminder that these assignments are for YOU to learn, and to establish for yourself how well you understand the material. In other words, while it is certainly possible to cheat via all the usual methods (using AI, have a friend "help", Chegg, etc, etc) remember that in this course, the assignments are only worth a relatively small percentage of your grade. The major determining factor of your grade is the exams.

The purpose of these assignments is to really push you to go back and ensure you understand and consolidate the course material. DOING PROBLEMS is how we learn to code! Plus, it is what will enable you to do very well on the tests!

Again, this is just a reminder. It has not been a big problem in this course. Keep up the great effort!

Overview

You are going to create a simple page that determines whether or not the current day is the user's birthday. To do this, you will need to use conditionals, at least one logical operator, and the Date() object. All of this was demonstrated and practiced with in lecture.

Your page should look like the following although the styling (e.g. borders, etc) may be somewhat different:

Items

• Day of month: (textfield) - We expect the user to enter an integer such as 18, 22, 31, etc. (More on this later).

• Month (select box)

• A button (must use the <button> tag) that says: "Is it My Birthday?"

Calculation:

Determining whether or not it is the user's birthday will involve the following:

1. Determine the current day of the month (e.g. 22nd, 18th, 30th, etc) by using the Date() object as shown in lecture. I also provide some partial reminders on this below. Store this value in a variable.

2. Determine the month by using the Date() object. Store this value in a variable. Again, I have some reminders on this below.

3. From the form, determine the user's birth day and birth month, and store both of those in variables.

Results

Output (to a div section) whether or not it is the user's birthday.

Here is an example that I tested on May 22nd. Note that I specify the user's birthdate as January 22nd. In other words, it is NOT the user's birthday:

Here is an example that I tested on May 22nd. Note that I specify the user's birthdate as May 22nd. In other words, it IS the user's birthday:

Styling

In an external stylesheet, do the following:

• Create a class with at least two styles, and apply that class to <label> tags.

• Create a contextual selector (reviewed in a previous lecture) with at least one style, and apply it to whatever ID you gave to the div section where you output the string benerated by your function.

   

Tips & Reminders

• REMEMBER: Use lots of outputting to test your code as your proceed. In other words, lots of alert() boxes to check your work as you are going along.

• Obtaining the current day of the month from the Date() object. To obtain the day of the month using the Date() object, you need to use the function: getDate(). For example, if your date object is called today, then you would invoke: today.getDate(). Store this value in a variable. Remember to ALWAYS ALWAYS ALWAYS output this (and other) values in an alert() box (or into a div if you prefer) to make sure you are reading it in correctly. ALWAYS do this before moving on to any other thing.

• Obtaining the current month from a Date() object: This function is called getMonth().

  • IMPORTANT: Note that the month returns a value between 0 and 11. That is, January is NOT 1, rather the Date() object would report January as the value 0. Similarly, February is reported as a 1, March is reported as a 2, and so on. You'll need to pay attention to this!

• To ask the user for their birth month, you will want to use a select box. To save you a bunch of typing, I will give you the code to create this select box below. You can simply paste that HTML into your own page.

• To determine whether or not it is the user's birthday, you will need an if / else block. For the logical expression to be true, the current day of the month must match the user's birth day of the month AND (hint hint!) the current month must match the user's birth month.

  • HINT: Remember to start simple. For exmaple, first simply check if the current day of the month matches the day of the month that the user entered. Once you've got that working, check if the months match. Then check for both together.

Code for the month select box

As mentioned above, here is the code to create the select box. To save you some typing, I've done it for you. Copy this code into your own assignment.

  <label for="selMonth">Month:</label> 
   <select id="selMonth">
    <option value="none">Select One</option>
    <option value="jan">January</option>
    <option value="feb">February</option>
    <option value="mar">March</option>
    <option value="apr">April</option>
    <option value="may">May</option>
    <option value="jun">June</option>
    <option value="jul">July</option>
    <option value="aug">August</option>
    <option value="sep">September</option>
    <option value="oct">October</option>
    <option value="nov">November</option>
    <option value="dec">December</option>
   </select>

Research

As a JavaScript comment, briefly explain why it is preferable to use a select box for the user to enter their birth month than, say, a text field. Again, this can be brief. You don't have to spend a lot of time on it.

Checking for NaN

Remember: Start small and build. For example, don't worry about including this functionality until all the other stuff is working properly!

In our lecture on built in functions, we discussed how to check for NaN. When you try to parse the value for the user's day of the month, if they did not enter a valid numeric value, an NaN error will be generated. Using an if block (a separate block -- not the same one you used previously), check for this error. If the user entered a non numeric value, output: You must enter a valid day. Output this message to the div section.

This message should be in a contrasting color (e.g. red).

New Code: To make this work, the final line of your if block where you do this error checking should be the statement return; (That's the entire line). In other words, your if block will look like this:

xxxxxxxxxx
if (.......)
{
  statements
  statements
  return;  //BE SURE TO HAVE THIS LINE at the end of the if block
}

A return statement immediately terminates the function. The reason you want to terminate the function, is that you do NOT want the function to continue along it's merry way generating various errors when there is something already broken in the user's input.

Submission Requirements

• Upload all documents to the D2L submissions folder.

• Upload the pages to the web server. Don't forget to also upload any accessory files such as external CSS files, videos, images, etc., etc as needed.

• Don't forget to submit the URL to your file.