{ "key_pair_value_system": true, "answer_rating_count": "", "question_feedback_html": { "html_star": "", "html_star_feedback": "" }, "answer_average_rating_value": "", "answer_date_js": "2024-09-26T00:02:27-04:00", "answer_date": "2024-09-26 00:02:27", "is_docs_available": "", "is_excel_available": "", "is_pdf_available": "", "count_file_available": 0, "main_page": "student_question_view", "question_id": "13561027", "url": "\/study-help\/questions\/im-really-stuck-on-this-javascript-assignment-the-clocks-app-13561027", "question_creation_date_js": "2024-09-26T00:02:27-04:00", "question_creation_date": "Sep 26, 2024 12:02 AM", "meta_title": "[Solved] I'm really stuck on this JavaScript assig | SolutionInn", "meta_description": "Answer of - I'm really stuck on this JavaScript assignment. The clock's app stopwatch has to be enhanced. I already added the read | SolutionInn", "meta_keywords": "m,stuck,javascript,assignment,clock,s,app,stopwatch,enhanced,added,read-,property", "question_title_h1": "I'm really stuck on this JavaScript assignment. The clock's app stopwatch has to be enhanced. I already added the read-only property in the library_stopwatch.js file,", "question_title": "I'm really stuck on this JavaScript assignment. The clock's app stopwatch has", "question_title_for_js_snippet": "I'm really stuck on this JavaScript assignment The clock's app stopwatch has to be enhanced I already added the read only property in the library stopwatch js file, but I'm not even sure if I added it correctly Here are the steps below Note that there is 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 theres a new span tag for the hours value of the stopwatch with a default value of 00 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, youll need to return an object that contains copies of the values in the elapsed objects properties 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 the previous step, add an hours property to it, calculate the number of elapsed hours, adjust the number of elapsed minutes, and return the adjusted object 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 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 INDEX HTML Clock Digital clock with stopwatch Clock Stop Watch 00 00 00 000 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) )() 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 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", "question_description": "
I'm really stuck on this JavaScript assignment. The clock's app stopwatch has to be enhanced. I already added the read-only property in the library_stopwatch.js file, but I'm not even sure if I added it correctly. Here are the steps below:<\/p>
- Note that there is 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 theres a new span tag for the hours value of the stopwatch with a default value of 00.<\/p>
- 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, youll need to return an object that contains copies of the values in the elapsed objects properties.<\/p>
- 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 the previous step, add an hours property to it, calculate the number of elapsed hours, adjust the number of elapsed minutes, and return the adjusted object.<\/p>
- 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.<\/p>
CLOCK.CSS<\/p>
body {<\/p>
font-family: Arial, Helvetica, sans-serif;<\/p>
background-color: white;<\/p>
margin: 0 auto;<\/p>
width: 450px;<\/p>
border: 3px solid blue;<\/p>
padding: 0 2em 1em;<\/p>
}<\/p>
h1 {<\/p>
color: blue;<\/p>
}<\/p>
label {<\/p>
float: left;<\/p>
width: 11em;<\/p>
text-align: right;<\/p>
padding-bottom: .5em;<\/p>
}<\/p>
input {<\/p>
margin-right: 1em;<\/p>
margin-bottom: .5em;<\/p>
}<\/p>
fieldset {<\/p>
margin-bottom: 1em;<\/p>
}<\/p>
#date {<\/p>
margin-left: 2em;<\/p>
}<\/p>
INDEX.HTML<\/p>
<\/p>
<\/p>
<\/p><\/p>
<\/p>