Greeting

Greeting based on Date()

Page 1 of 1

4 Replies - 1154 Views - Last Post: 09 October 2009 - 10:47 AM

#1 JDUenas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 14-May 09

Greeting

Posted 08 October 2009 - 10:19 AM

Ok, so bellow is my HTML code with the script located in the body. I am trying to get it to show a greeting according to the time of day. I have tried it with my .js file being called via src, (my preferred way of doing it), and I couldn't get it to work, so I placed it in the HTML code, and still can't get it to work. Can someone tell me what I am doing wrong. I know it is probably something very simple, but I can't see it. 

<html>
	<head>
		<title>Assignment 2 </title>
		<link rel="stylesheet" href="style.css" type="text/css" >
		
	</head>

<body>

	<script language="Javascript" type="text/javascript">
		
		var d = new Date();
		var time = d.getHours();

			if (time < 12) 
				  {
					  document.write("Good morning");
				  }
			  else if (time >12 && < 18 )
				  {
					  document.write("Good Afternoon");
				  }
			  else (time >18 && <24)
				  {
					  document.write("Good Evening");
				  }
	</script>

<p>Assignment 2 demonstrates a 'Greeting'.</p>

<p>If the time on your browser is less than 1200, you will get a "Good morning" greeting. If it is greater than 1200 but less than 1800, you will get a "Good Afternoon". If it is greater that 1800 and less than 2400, you will get a "Good Evening". </p>

</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Greeting

#2 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Greeting

Posted 08 October 2009 - 10:25 AM

When you want to test two values in and if, you muct write the value that you're testing both times:
if (time < 12)
{
   document.write("Good morning");
}
else if (time >12 && time < 18 )
{
   document.write("Good Afternoon");
}
else (time >18 && time < 24)
{
   document.write("Good Evening");
}

Notice in the two else if's I use the time variable twice.
Was This Post Helpful? 1
  • +
  • -

#3 Christopher Elison  Icon User is offline

  • D.I.C Head

Reputation: 38
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: Greeting

Posted 08 October 2009 - 10:41 AM

Be careful, you need to add >= for 12 and 18, I tried running your script at 18:30 I couldn't work out why it wasn't displaying anything, until I noticed this:

else (time >18 && <24) {
  document.write("Good Evening");
}


If it was 12pm or 6pm ish (18:00) then it wouldn't work, so, you really wanted something like:
if ((time >= 18) && (time < 24)) {
  document.write("Good Evening");
}


Working script:
<html>
	<head>
		<title>Assignment 2</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<script type="text/javascript">
			var d = new Date();
			var time = d.getHours();
			
                        if (time < 12) {
				document.write("Good morning");
			}
			
			if ((time >= 12) && (time < 18)) {
				document.write("Good Afternoon");
			}
			
			if ((time >= 18) && (time < 24)) {
				document.write("Good Evening");
			}
    </script>
  </head>
	<body>
		<p>Assignment 2 demonstrates a 'Greeting'.</p>
		<p>
			If the time on your browser is less than 1200, you will get a "Good morning" greeting. 
			If it is greater than 1200 but less than 1800, you will get a "Good Afternoon". 
			If it is greater that 1800 and less than 2400, you will get a "Good Evening".
		</p>
	</body>
</html>

This post has been edited by Christopher Elison: 08 October 2009 - 10:43 AM

Was This Post Helpful? 1
  • +
  • -

#4 JDUenas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 14-May 09

Re: Greeting

Posted 08 October 2009 - 11:43 AM

Ahhhhhhh!!!!!


I new it was something simple like that. Thanks for the help guys. Thats what I love about coding every little thing counts, and it can be so frustrating, but once you get it, very rewarding.
Was This Post Helpful? 0
  • +
  • -

#5 brianarn  Icon User is offline

  • New D.I.C Head

Reputation: 11
  • View blog
  • Posts: 27
  • Joined: 02-October 09

Re: Greeting

Posted 09 October 2009 - 10:47 AM

I know you already have an answer, but I thought it'd be worth cleaning on the code just a little bit more, to do things a bit more cleanly.

<html>
	<head>
		<title>Assignment 2</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
		<body>
			<p>Assignment 2 demonstrates a 'Greeting'.</p>
			<p>
					If the time on your browser is less than 1200, you will get a "Good morning" greeting. 
					If it is greater than 1200 but less than 1800, you will get a "Good Afternoon". 
					If it is greater that 1800 and less than 2400, you will get a "Good Evening".
			</p>
			<p id="greeting"></p>
			<script type="text/javascript">
				var d = new Date();
				var time = d.getHours();
				var greeting = "";

				if (time < 12) {
					greeting = "Good morning";
				}
				else if ((time >= 12) && (time < 18)) {
					greeting = "Good Afternoon";
				}
				else {
					// No need to test against values - time to be <= 18 by this point
					greeting = "Good Evening";
				}

				// Put the greeting into the document
				document.getElementById("greeting").innerHTML = greeting;
			</script>
		</body>
</html>


The major differences here:
  • The script is moved out of the head. Using document.write in the head may technically work, but it's creating invalid markup in the process, and one definitely wants to get in the habit of not using document.write in the head. Also, because of a shift to using document.getElementById, the code needs to come after the element itself is defined, as JS executes immediately, not waiting for the rest of the DOM to load.
  • There's no document.write in this version. Writing out directly can be handy at times, but it's not strictly necessary. Moving it into setting the inner HTML of an object you identify by ID means that you have more control over where the text winds up. This way, you can alter the location of the content without having to move the JS itself to write out in exactly that spot. It's a very handy trick to be able to rewrite the contents of an element like that.
  • Using if/else instead of just if statements means less conditional checking. The three if statements did hit every possible legitimate condition, but no matter the time of day, all three checks were being hit every time. Using if/else, anything in the morning portion will only hit the first if-check and then move on. It's not a necessary optimization, but it's generally a better practice -- it can save you pain later if the conditions aren't quite right, ensuring that only one of the potential blocks of code will ever be entered.
  • The third condition doesn't really need to be checked for time's value. The first two conditions ensure that the value will always be greater than 18, and that's the key piece here, so you don't need to do another check, using the if/else setup. If you hit that point, you know you're in the evening condition and can save the step of re-validating the value.

None of the changes are for important optimization's sake - one can argue that premature optimization can really bite you later - but it's a bit more up-to-snuff with what are considered respected standards in JS (and really, code practices in general with the if/else stuff) today, and it seems worth learning. :)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1