JavaScript Greeting Message Project

Hosted Project

JavaScript Greeting Message Project (Hosted on Github Pages)

Source Files

https://js-beginners.github.io/greeting-message-project/ (Hosted on Github)

Project Objective

This small JavaScript greeting message project simply writes a greeting message the browser using document.write().

It extracts the hour from the Date() object, and using the the local time it writes a message with your name.

The message is “Good morning, Good afternoon, or Good evening” depending on the time.

It also uses the document.prompt() method to retrieve the user's name.

JavaScript Used

• Document.write()
• Document.prompt()
• Date() Object
• Control Flow

My Personalize Summary

Just like the previous project, this project was pretty simple.

But, I did learn something new while watching the instructor's solution.

Since the solution was so short, I figured I'd check it out.

Come to find out, there was a bit of information that I learned after seeing him use the document.write() method.

I never used it before so I did some research to find what it was all about.

New Things Learned or Refreshed

It turns out the document.write() is a quick way to write a output message directly into your HTML document.

The method takes both HTML and JavaScript as arguments, according to W3School's HTML DOM write() method write-up:

Document.write() Definition and Usage

The write() method writes HTML expressions or JavaScript code to a document.

The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.

Note: When this method is not used for testing, it is often used to write some text to an output stream opened by the document.open() method.

Tip: The document.writeln() method is similar to write(), only it adds a newline character after each statement.

So, for quick testing, instead of creating a DOM element with document.createElement() and then appending the element to a DOM node, you can just use document.write() to add content to the browser.

The other thing I learned was that the Window.prompt() method actually takes a default value, like so:

prompt(‘text', ‘defaultText')

Time to Code

This project took me about ten minutes to code, including the HTML and CSS.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Greeting Message Project in action.

Need to see the video solution for this project?

Need to see the video solution for this project? Get Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!