Extra 15-2  Enhance the Clock app's stopwatch solved

Extra 15-2 Enhance the Clock app's stopwatch solved

Extra 15-2  Enhance the Clock app's stopwatch

1.       Open the HTML and JavaScript files

2.       Notice that there's a new library file named library_stopwatch_augment.js. In the HTML file, note that the script tag for this new library comes after the script tag for the stopwatch library. Also note that there's a new span tag for the hours value of the stopwatch with a default value of "00".Notice that there's a new library file named library_stopwatch_augment.js. In the HTML file, note that the script tag for this new library comes after the script tag for the stopwatch library. Also note that there's a new span tag for the hours value of the stopwatch with a default value of "00".

3.       Change the library_stopwatch.js file so the module object has a read-only property that exposes the values of the private elapsed object. NOTE: Because elapsed is an object, if you return it directly, its properties can be changed even if the property that returns it is non-configurable. Thus, you'll need to return an object that contains copies of the values in the elapsed object's properties.

4.       In the library_stopwatch_augment.js file, add code that augments the stopwatch module by adding a method named getElapsedTimeWithHours. Within this new method, get the object from the read-only property from step 2, add an hours property to it, calculate the number of elapsed hours, adjust the number of elapsed minutes, and return the adjusted object.

5.       Change the code in the clock.js file so the displayTick callback function uses the getElapsedTimeWithHours function from step 3 to display the hours in the s_hours span tag. Be sure to reset this span tag in the resetStopwatch callback function.

 

Files:

clock.css

body {

  font-family: Arial, Helvetica, sans-serif;

  background-color: white;

  margin: 0 auto;

  width: 450px;

  border: 3px solid blue;

  padding: 0 2em 1em;

}

h1 {

  color: blue;

}

label {

  float: left;

  width: 11em;

  text-align: right;

  padding-bottom: .5em;

}

input {

  margin-right: 1em;

  margin-bottom: .5em;

}

fieldset {

  margin-bottom: 1em;

}

#date {

  margin-left: 2em;

}

 

clock.js

"use strict";

(function() {

  // aliases 

  var t = myapp.time;

  var u = myapp.utility;

 

  // callback function for displaying clock time 

  var displayTime = function(now) {

    u.$("hours").firstChild.nodeValue = now.hours;

    u.$("minutes").firstChild.nodeValue = u.padSingleDigit(now.minutes);

    u.$("seconds").firstChild.nodeValue = u.padSingleDigit(now.seconds);

    u.$("ampm").firstChild.nodeValue = now.ampm;

 

    // display date in "m/d/yyyy" format - correct for zero-based month

    var date = (now.getMonth() + 1) + "/" + now.getDate() + "/" + now.getFullYear();

    u.$("date").firstChild.nodeValue = date;

  };

  // callback function for displaying stopwatch elapsed time 

  var displayTick = function(elapsed) {

    u.$("s_minutes").firstChild.nodeValue = u.padSingleDigit(elapsed.minutes);

    u.$("s_seconds").firstChild.nodeValue = u.padSingleDigit(elapsed.seconds);

    u.$("s_ms").firstChild.nodeValue = elapsed.milliseconds;

  };

  // callback function for clearing stopwatch elapsed time display

  var resetStopwatch = function() {

    u.$("s_minutes").firstChild.nodeValue = "00";

    u.$("s_seconds").firstChild.nodeValue = "00";

    u.$("s_ms").firstChild.nodeValue = "000";

  };

 

  // onload event handler

  window.onload = function() {

    // start clock

    t.clock.start(displayTime);

 

    // set up stopwatch event handlers

    u.$("start").onclick = function() {

      t.stopwatch.start(displayTick);

    };

    u.$("stop").onclick = function() {

      t.stopwatch.stop();

    };

    u.$("reset").onclick = function() {

      t.stopwatch.reset(resetStopwatch);

    };

  };   

})();

 

index.html

<!DOCTYPE html

<html

<head

  <meta charset="UTF-8"

  <titleClock</title

  <link rel="stylesheet" href="clock.css"

  <script src="library_namespace.js"</script

  <script src="library_utility.js"</script

  <script src="library_clock.js"</script

  <script src="library_stopwatch.js"</script

  <script src="library_stopwatch_augment.js"</script

  <script src="clock.js"</script

</head

<body

  <main

    <h1Digital clock with stopwatch</h1

    <fieldset

      <legendClock</legend

      <span id="hours" </span:

      <span id="minutes" </span:

      <span id="seconds" </span 

      <span id="ampm" </span

      <span id="date" </span

    </fieldset

     

    <fieldset

      <legendStop Watch</legend

      <input type="button" id="start" value="Start"

      <input type="button" id="stop" value="Stop"

      <input type="button" id="reset" value="Reset"

      <span id="s_hours"00</span:

      <span id="s_minutes"00</span:

      <span id="s_seconds"00</span:

      <span id="s_ms"000</span

    </fieldset 

  </main

</body

</html

 

library_clock.js

"use strict";

 

myapp.time.clock = (function() {

  // private state

  var displayTimeCallbackFunction; 

   

  var displayCurrentTime = function() {

    var now = new Date();

     

    // add own properties to instance of Date object

    now.hours = now.getHours();

    now.minutes = now.getMinutes();

    now.seconds = now.getSeconds();

    now.ampm = "AM"; // set default value

 

    // correct hours and AM/PM value for display

    if (now.hours 12) { // convert from military time

      now.hours = now.hours - 12;

      now.ampm = "PM";

    } else { // adjust 12 noon and 12 midnight

       switch (now.hours) {

        case 12: // noon

          now.ampm = "PM";

          break;

        case 0: // midnight

          now.hours = 12;

          now.ampm = "AM";

      }

    }

    // use callback function to display time

    if (displayTimeCallbackFunction && typeof displayTimeCallbackFunction === 'function') {

      displayTimeCallbackFunction(now);

    }

  };

   

  // public methods

  return {

    start: function(callback) {

      displayTimeCallbackFunction = callback; // store callback for later use by timer

      displayCurrentTime();

      setInterval(displayCurrentTime, 1000);

    }

  };

 

})();

 

library_namespace.js

"use strict";

 

// create the namespace and nested namespace creator method

var myapp = myapp || {};

 

myapp.addNamespace = function (namespace) {

  var currentName;

  var parent = this;

  var names = namespace.split(".");

 

  for (var i in names) {

    currentName = names[i];

    parent[currentName] = parent[currentName] || {};

    parent = parent[currentName];

  }

  return this;

}.bind(myapp);

 

// add the namespaces the application will use

myapp.addNamespace("time.clock").addNamespace("time.stopwatch")

    .addNamespace("utility");

 

library_stopwatch_augment.js

"use strict";

 

library_stopwatch.js

"use strict";

 

myapp.time.stopwatch = (function() {

  // private state

  var timer;

  var elapsed = { minutes:0, seconds:0, milliseconds:0 }; 

  var displayTickCallbackFunction;

   

  var tickStopwatch = function() {   

    // increment milliseconds by amount of interval

    elapsed.milliseconds = elapsed.milliseconds + 10;

 

    // roll over milliseconds to seconds, seconds to minutes

    if (elapsed.milliseconds === 1000) {

      elapsed.seconds++;

      elapsed.milliseconds = 0;

    }

    if (elapsed.seconds === 60) {

      elapsed.minutes++;

      elapsed.seconds = 0;

    }

 

    // use callback to display new stopwatch time

    if (displayTickCallbackFunction && typeof displayTickCallbackFunction === 'function') {

      displayTickCallbackFunction(elapsed);

    }

  };

   

  // public methods

  return {

    start: function(callback) {

      displayTickCallbackFunction = callback; // store callback for later use by timer

      tickStopwatch();

      timer = setInterval(tickStopwatch, 10);

      return this;

    },

    stop: function() {

      clearInterval(timer);

      return this;

    },

    setMinutes: function(min) {

      if (!isNaN(min)) {

        if (min = 0 && min <= 60) {

          elapsed.minutes = min;

        }

      } 

      return this;

    },

    reset: function(callback) {

      clearInterval(timer);

      elapsed = { minutes:0, seconds:0, milliseconds:0 }; 

       

      // use callback to reset stopwatch display

      if (callback && typeof callback === 'function') {

        callback();

      }

      return this;

    }

  };

})();

 

library_utility.js

"use strict";

 

myapp.utility.padSingleDigit = function(num) {

  return (num < 10) ? "0" + num : num;

};

myapp.utility.$ = function(id) { return document.getElementById(id); };

 
Powered by