Macro Assignment 02: Everything is Awesome!

For this assignment you will be creating a "randomized" web page that will give the user information that they can use in order to help their day progress in a more positive way.

This assignment focuses on your ability to write a simple JavaScript program that adds elements to an HTML page. In order to make this as simple as possible, focus on using the document.write method to add new elements to a page (i.e document.write('<p>Welcome to my page!</p>') will literally write a new p tag to your page). Note that this is certainly NOT the best way to add content to a page - we will learn better, more robust techniques in the near future. But for now stick with this and try and focus on the main idea of how we can dynamically add new content to a page using JavaScript.

With that said, your website should do the following:

  • Begin by downloading the following set of images: Macro Assignment 02 Images
  • Construct a "static" page that creates a layout that looks like the following. This portion of the assignment won't require any JavaScript - instead this can be done using HTML & CSS only (hint: use absolute positioning and the z-index property to layer images on top of one another). We will create a mock-up of this in class as well.
  • Next, we are going to set up the page so that it dynamically updates itself every time the page loads. Note that this program does not require the user to do anything that load the page - the action happens upon the initial page load by the browser.
  • To begin, set up the page so that the last word of the heading changes randomly every time the page reloads. Valid greetings are as follows:
    • Everything is Awesome
    • Everything is Fantastic
    • Everything is Fabulous
    • Everything is Superb
    • Everything is Perfect
    • Everything is Brilliant
    • Everything is Coming up Roses
    Hint: It might be helpful to use an array here! var words = ['Awesome', 'Fantastic', 'Fabulous', 'Superb', 'Perfect', 'Brilliant', 'Coming up Roses'];
  • Next, we are going to tell the user the current time of day in 12 hour format (i.e. 9:05am, 1:27pm). This information will be displayed in the box that is below the heading ("Everything is _____"). Hint: use a Date object to get the current date and time. You might need to use some of the date methods that are attached to this object (getHours, getMinutes, etc)
  • Greets the user based on the time of day. The greetings to be used are as follows:
    • 12:00am - 5:59am: "Good Night!"
    • 6:00am - 11:59am: "Good Morning!"
    • 12:00pm - 5:59pm: "Good Afternoon!"
    • 6:00pm - 11:59pm: "Good Evening!"
  • The page should also change the background image based on the time of day. Hint: use document.write to write the HTML tag for this element based on the time of day.
  • Next, the page should pick three lucky numbers between 1 and 9 for the user (i.e. 3, 1 and 7) and displays those numbers. Note that the same number cannot be picked twice (i.e. 1, 1 and 5 is an invalid set of lucky numbers since the number 1 was selected twice). Display those lucky numbers inside of the info box.
  • Finally, randomize the lego minifigure (pick a random head and a random body). An array might be helpful here as well!
  • Pick at least one of these two extra features to implement (implement both for a small amount of extra credit)
    • Create a series of "decals" that can be placed on top of the mini figure. Randomize those decals when the page loads
    • Display the user's lucky numbers using something other than text (i.e. find some graphics online or come up with another creative way to convey these numbers to the user)

Thoroughly test your work and make sure that it meets the requirements set forth above. When you are finished, post your project to the i6 server and link it from your main menu page. We should be able to visit your 'webdev' folder and click on the link to the second assignment and visit your page. Also create a ZIP archive of your work and submit it to NYU classes under the 'Macro Assignment 02' category.

Here are some sample screenshots of what your website could look like. Note that you are welcome to take creative liberty in terms of layout, color choices, etc.

Note: This assignment is being assigned before we covered how to isolate DOM elements using the various DOM query functions (i.e. document.getElementById() and document.querySelector()). At the very beginning of the semester the only way we had to write content to the page was to use document.write(), which essentially appends text to the <body> tag of the page.

You are welcome to use DOM queries here instead of document.write if you have read ahead in the book and know what you're doing. DOM queries are more "correct" anyway - using document.write() is a very 'hard-coded' way of approaching this assignment, but it's the only tool you had access to at the beginning of the semester!