Lab on JS Date Object
Goals
- Practice using the JavaScript Date Object.
- Practice with conditionals
Set up
Download the lab07
folder.
Examine the html files in there.
Task 0
Think about the following questions. Discuss with your partner. Use your notebooks to keep notes.
- How do you create a new Date object in JavaScript?
- Using that object:
- How would you get the current day of the month?
- How would you get the current seconds?
- When creating a new Date object, it defaults to the current time. How could you make it reflect another date, for example, Halloween of this year?
- How can you answer the question: "Is Halloween this year on a weekend or week day?"
- How would you determine if the seconds of the current time is even or odd? (Think how you determine whether a number, any number, is even or odd, first.)
Task 1: Fortune Teller
Specifications
- Each time you refresh the page you're shown a new fortune on the page. The
fortune will either be...
- Optimistic:
Sunshine and rainbows are in your future.
, or - Pessimistic:
Uh oh, bad luck is heading your way. Hide!
- Optimistic:
Which fortune you get on each page refresh depends on the current time.
- If the seconds of the current time is even (for example at
2:45:06
), show the optimistic fortune. - If the seconds of the current time is odd (for example at
2:45:07
), show the pessimistic fortune.
You may want to try to use some JS to change the text color of the page depending on whether the optimistic or pessimistic message is presented. Where could you go to figure that out?
Task 2: Birthday Wisher
Specifications
-
When you load the page...
- The use should get a prompt asking for their numerical birth month. e.g. if user
was born in August they should enter
8
or08
. - Next they'll get another prompt, asking for the day of the month they were born.
- Using the data you collect from these prompts figure out if today is the user's birthday.
- If it is the user's birthday, display the message
Happy Birthday!
- If it is not, display the message
Today is not your birthday.
The page should work correctly any day of the year, without having to change the js code!
- The use should get a prompt asking for their numerical birth month. e.g. if user
was born in August they should enter
Once you get the above working, amend your code to add this:
- If it is the user's birthday, figure out whether today (their birthday) is a weekday or weekend.
- If it is the weekend, append
Lucky it's on a weekend this year. :-)
to their message. - If it is a weekday, append
Too bad it's on a weekday this year. :-('
to their message.
- If it is the weekend, append
Tip:
- The
.getDay()
method can be used on the Date object to get the current day of the week where 0 is Sunday, 1 is Monday, etc.
Testing
Here are three ways you can test your code:
- Pretend the user's birthday is today.
-
Create the Date object with a certain date, like the user's birth date.
Example:
var d = new Date("10/14/2018");
- Wait until your birthday rolls around. This is potentially the most time consuming testing method and is therefore not suggested. :-)