Hw #11

Assignment #11: jQuery with HTML and CSS

Highlight, copy, and paste the following code into your editor:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Samples2.css">
  <title>jQuery with HTML and CSS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    /* <![CDATA[ */
    var the_timeout;
    
    function writeTime()
    {
      //get a Date object
      var today = new Date();
      //get some info from the Date object
      var hours = today.getHours();
      var AMPM;
      if (hours <= 11 && hours > 0)
      {
        AMPM = "AM";
      }
      else if (hours == 0)
      {
        hours = 12;
        AMPM = "AM";
      }
      else if (hours == 12)
      {
        AMPM = "PM";
      }
      else
      {
        AMPM = "PM";
        hours -= 12;
      }
      var minutes = today.getMinutes();
      var seconds = today.getSeconds();
      //make the minutes and seconds look right
      minutes = fixTime(minutes);
      seconds = fixTime(seconds);
      //put the time string together and display it
      
      var the_time = hours + ":" + minutes + ":" + seconds + " " + AMPM;
      
      /*****
       *
       * Put some jQuery code here, which puts/displays the contents of the_time
       * in the div with the id of "newContentsDiv".  Include (add) some <p> ... </p>
       * tags around the_time.
       *
       ******/
       
      //run this function again in 1 second
      the_timeout = setTimeout("writeTime();", 1000);
    }
    
    function fixTime(the_time)
    {
      if (the_time < 10)
      {
        the_time = "0" + the_time;
      }
      return the_time;
    }
    /* ]]> */
  </script>
  <style type="text/css">
    body
    {
      font-family: Arial,sans-serif;
    }
  </style>
</head>

<body onload="writeTime();">
  <div id="mainDiv">
    <h2>The current time is:</h2>
    <div id="newContentsDiv">
      <p>
        (The time goes here.)
      </p>
    </div>
  </div>
</body>

</html>

Also highlight, copy, and paste the following stylesheet into your editor. Save it as Samples2.css

body {
  font-family: Arial, sans-serif;
  font-size: 1.3em;
}

#mainDiv {
  width: 600px;
  border: 1px solid gray;
  border-radius: 20px;
  padding: 20px;
  margin: 0 auto;
}

.attention {
  font-weight: bold;
  color: #F00;
}

#newContentsDiv {
  border: 1px solid gray;
  border-radius: 10px;
  margin: 20px;
  padding: 10px;
}

p {
  color: #3C3;
}

Add some jQuery code in the marked (comments) section of the html page which you copied and pasted, which puts the time value (which is in the variable the_time) into the div which has the id value of "newContentsDiv". Or you can put the time value into the paragraph that is in that div tag. In either case, make sure the paragraph tag remains in the page.
That last statement ("make sure the paragraph tag remains in the page") means that if you replace/set the contents of the div tag, you will probably need to add some paragraph (<p>...</p>) tags to/around the the_time variable before you set/replace the div tag's contents.
In any case, when you are testing your changes, look for two indicators that you got it right:
1. The time updates every second. In other words, the page acts like a real clock.
2. The time display is in light-green text (unless you have changed the style, which is perfectly okay. But make sure the time is displayed in the font and text color that you intend!).
Add a hypertext link to the index.html file that is in your class folder. Make this hypertext link display the html page that you made for this assignment.
Validate your page using the W3C HTML Validator. (The Validator will automatically detect whether you have an XHTML or an HTML5 document.)
Upload your file to your class folder. You will need to use an FTP program to upload the files. You will find some general FTP instructions on a page called "FTP Instructions".
Test your page on the server to make sure it has no errors in it. (You should turn on the display of script errors in your browser!) Here are some instructions on how to turn on JavaScript error messages.

Richland College Multimedia Learning Center

Assignment #11: jQuery with HTML and CSS