{ "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>

Clock<\/title><\/p> <p> <link rel=\"stylesheet\" href=\"clock.css\"><\/p> <p> <script src=\"library_namespace.js\"><\/script><\/p> <p> <script src=\"library_utility.js\"><\/script><\/p> <p> <script src=\"library_clock.js\"><\/script><\/p> <p> <script src=\"library_stopwatch.js\"><\/script><\/p> <p> <script src=\"library_stopwatch_augment.js\"><\/script><\/p> <p> <script src=\"clock.js\"><\/script><\/p> <p><\/head><\/p> <p><body><\/p> <p> <main><\/p> <p> <h1>Digital clock with stopwatch<\/h1><\/p> <p> <fieldset><\/p> <p> <legend>Clock<\/legend><\/p> <p> <span id=\"hours\"> <\/span>:<\/p> <p> <span id=\"minutes\"> <\/span>:<\/p> <p> <span id=\"seconds\"> <\/span> <\/p> <p> <span id=\"ampm\"> <\/span><\/p> <p> <span id=\"date\"> <\/span><\/p> <p> <\/fieldset><\/p> <p> <\/p> <p> <fieldset><\/p> <p> <legend>Stop Watch<\/legend><\/p> <p> <input type=\"button\" id=\"start\" value=\"Start\"><\/p> <p> <input type=\"button\" id=\"stop\" value=\"Stop\"><\/p> <p> <input type=\"button\" id=\"reset\" value=\"Reset\"><\/p> <p> <span id=\"s_hours\">00<\/span>:<\/p> <p> <span id=\"s_minutes\">00<\/span>:<\/p> <p> <span id=\"s_seconds\">00<\/span>:<\/p> <p> <span id=\"s_ms\">000<\/span><\/p> <p> <\/fieldset> <\/p> <p> <\/main><\/p> <p><\/body><\/p> <p><\/html><\/p> <p>CLOCK.JS<\/p> <p>\"use strict\";<\/p> <p>(function() {<\/p> <p> \/\/ aliases <\/p> <p> var t = myapp.time;<\/p> <p> var u = myapp.utility;<\/p> <p> <\/p> <p> \/\/ callback function for displaying clock time <\/p> <p> var displayTime = function(now) {<\/p> <p> u.$(\"hours\").firstChild.nodeValue = now.hours;<\/p> <p> u.$(\"minutes\").firstChild.nodeValue = u.padSingleDigit(now.minutes);<\/p> <p> u.$(\"seconds\").firstChild.nodeValue = u.padSingleDigit(now.seconds);<\/p> <p> u.$(\"ampm\").firstChild.nodeValue = now.ampm;<\/p> <p> <\/p> <p> \/\/ display date in \"m\/d\/yyyy\" format - correct for zero-based month<\/p> <p> var date = (now.getMonth() + 1) + \"\/\" + now.getDate() + \"\/\" + now.getFullYear();<\/p> <p> u.$(\"date\").firstChild.nodeValue = date;<\/p> <p> };<\/p> <p> \/\/ callback function for displaying stopwatch elapsed time <\/p> <p> var displayTick = function(elapsed) {<\/p> <p> u.$(\"s_minutes\").firstChild.nodeValue = u.padSingleDigit(elapsed.minutes);<\/p> <p> u.$(\"s_seconds\").firstChild.nodeValue = u.padSingleDigit(elapsed.seconds);<\/p> <p> u.$(\"s_ms\").firstChild.nodeValue = elapsed.milliseconds;<\/p> <p> };<\/p> <p> \/\/ callback function for clearing stopwatch elapsed time display<\/p> <p> var resetStopwatch = function() {<\/p> <p> u.$(\"s_minutes\").firstChild.nodeValue = \"00\";<\/p> <p> u.$(\"s_seconds\").firstChild.nodeValue = \"00\";<\/p> <p> u.$(\"s_ms\").firstChild.nodeValue = \"000\";<\/p> <p> };<\/p> <p> <\/p> <p> \/\/ onload event handler<\/p> <p> window.onload = function() {<\/p> <p> \/\/ start clock<\/p> <p> t.clock.start(displayTime);<\/p> <p> <\/p> <p> \/\/ set up stopwatch event handlers<\/p> <p> u.$(\"start\").onclick = function() {<\/p> <p> t.stopwatch.start(displayTick);<\/p> <p> };<\/p> <p> u.$(\"stop\").onclick = function() {<\/p> <p> t.stopwatch.stop();<\/p> <p> };<\/p> <p> u.$(\"reset\").onclick = function() {<\/p> <p> t.stopwatch.reset(resetStopwatch);<\/p> <p> };<\/p> <p> }; <\/p> <p>})();<\/p> <p>LIBRARY_CLOCK.JS<\/p> <p>\"use strict\";<\/p> <p>myapp.time.clock = (function() {<\/p> <p> \/\/ private state<\/p> <p> var displayTimeCallbackFunction; <\/p> <p> <\/p> <p> var displayCurrentTime = function() {<\/p> <p> var now = new Date();<\/p> <p> <\/p> <p> \/\/ add own properties to instance of Date object<\/p> <p> now.hours = now.getHours();<\/p> <p> now.minutes = now.getMinutes();<\/p> <p> now.seconds = now.getSeconds();<\/p> <p> now.ampm = \"AM\"; \/\/ set default value<\/p> <p> <\/p> <p> \/\/ correct hours and AM\/PM value for display<\/p> <p> if (now.hours > 12) { \/\/ convert from military time<\/p> <p> now.hours = now.hours - 12;<\/p> <p> now.ampm = \"PM\";<\/p> <p> } else { \/\/ adjust 12 noon and 12 midnight<\/p> <p> switch (now.hours) {<\/p> <p> case 12: \/\/ noon<\/p> <p> now.ampm = \"PM\";<\/p> <p> break;<\/p> <p> case 0: \/\/ midnight<\/p> <p> now.hours = 12;<\/p> <p> now.ampm = \"AM\";<\/p> <p> }<\/p> <p> }<\/p> <p> \/\/ use callback function to display time<\/p> <p> if (displayTimeCallbackFunction && typeof displayTimeCallbackFunction === 'function') {<\/p> <p> displayTimeCallbackFunction(now);<\/p> <p> }<\/p> <p> };<\/p> <p> <\/p> <p> \/\/ public methods<\/p> <p> return {<\/p> <p> start: function(callback) {<\/p> <p> displayTimeCallbackFunction = callback; \/\/ store callback for later use by timer<\/p> <p> displayCurrentTime();<\/p> <p> setInterval(displayCurrentTime, 1000);<\/p> <p> }<\/p> <p> };<\/p> <p> <\/p> <p>})();<\/p> <p>LIBRARY_STOPWATCH.JS<\/p> <p>\"use strict\";<\/p> <p>myapp.time.stopwatch = (function() {<\/p> <p> \/\/ private state<\/p> <p> var timer;<\/p> <p> var elapsed = { minutes:0, seconds:0, milliseconds:0 }; <\/p> <p> var displayTickCallbackFunction;<\/p> <p> <\/p> <p> var tickStopwatch = function() { <\/p> <p> \/\/ increment milliseconds by amount of interval<\/p> <p> elapsed.milliseconds = elapsed.milliseconds + 10;<\/p> <p> <\/p> <p> \/\/ roll over milliseconds to seconds, seconds to minutes<\/p> <p> if (elapsed.milliseconds === 1000) {<\/p> <p> elapsed.seconds++;<\/p> <p> elapsed.milliseconds = 0;<\/p> <p> }<\/p> <p> if (elapsed.seconds === 60) {<\/p> <p> elapsed.minutes++;<\/p> <p> elapsed.seconds = 0;<\/p> <p> }<\/p> <p> <\/p> <p> \/\/ use callback to display new stopwatch time<\/p> <p> if (displayTickCallbackFunction && typeof displayTickCallbackFunction === 'function') {<\/p> <p> displayTickCallbackFunction(elapsed);<\/p> <p> }<\/p> <p> };<\/p> <p> <\/p> <p> \/\/ public methods<\/p> <p> return {<\/p> <p> start: function(callback) {<\/p> <p> displayTickCallbackFunction = callback; \/\/ store callback for later use by timer<\/p> <p> tickStopwatch();<\/p> <p> timer = setInterval(tickStopwatch, 10);<\/p> <p> return this;<\/p> <p> },<\/p> <p> stop: function() {<\/p> <p> clearInterval(timer);<\/p> <p> return this;<\/p> <p> },<\/p> <p> setMinutes: function(min) {<\/p> <p> if (!isNaN(min)) {<\/p> <p> if (min >= 0 && min <= 60) {<\/p> <p> elapsed.minutes = min;<\/p> <p> }<\/p> <p> } <\/p> <p> return this;<\/p> <p> },<\/p> <p> reset: function(callback) {<\/p> <p> clearInterval(timer);<\/p> <p> elapsed = { minutes:0, seconds:0, milliseconds:0 }; <\/p> <p> <\/p> <p> \/\/ use callback to reset stopwatch display<\/p> <p> if (callback && typeof callback === 'function') {<\/p> <p> callback();<\/p> <p> }<\/p> <p> return this;<\/p> <p> }<\/p> <p> };<\/p> <p> \/\/read-only<\/p> <p> Object.defineProperties(stopwatch, {<\/p> <p> \"getElapsed\": {<\/p> <p> get: function() { return <\/p> <p> minutes = elapsed.minutes;<\/p> <p> seconds = elapsed.minutes;<\/p> <p> milliseconds = elapsed.milliseconds }<\/p> <p> }<\/p> <p> }); <\/p> <p> return: stopwatch;<\/p> <p>})();<\/p> <p>LIBRARY_STOPWATCH_AUGMENT.JS<\/p> <p>\"use strict\";<\/p> <p> <\/p> <p>LIBRARY_NAMESPACE.JS<\/p> <p>\"use strict\";<\/p> <p> <\/p> <p>\/\/ create the namespace and nested namespace creator method<\/p> <p>var myapp = myapp || {};<\/p> <p> <\/p> <p>myapp.addNamespace = function (namespace) {<\/p> <p> var currentName;<\/p> <p> var parent = this;<\/p> <p> var names = namespace.split(\".\");<\/p> <p> <\/p> <p> for (var i in names) {<\/p> <p> currentName = names[i];<\/p> <p> parent[currentName] = parent[currentName] || {};<\/p> <p> parent = parent[currentName];<\/p> <p> }<\/p> <p> return this;<\/p> <p>}.bind(myapp);<\/p> <p> <\/p> <p>\/\/ add the namespaces the application will use<\/p> <p> myapp.addNamespace(\"time.clock\").addNamespace(\"time.stopwatch\")<\/p> <p> .addNamespace(\"utility\");<\/p> <p> <\/p> <p>LIBRARY_UTILITY.JS<\/p> <p>\"use strict\";<\/p> <p>myapp.utility.padSingleDigit = function(num) {<\/p> <p> return (num < 10) ? \"0\" + num : num;<\/p> <p>};<\/p> <p>myapp.utility.$ = function(id) { return document.getElementById(id); };<\/p>", "transcribed_text": "", "related_book": { "title": "Essentials of Database Management", "isbn": "133405680, 9780133547702 , 978-0133405682", "edition": "1st edition", "authors": "Jeffrey A. Hoffer, Heikki Topi, Ramesh Venkataraman", "cover_image": "https:\/\/dsd5zvtm8ll6.cloudfront.net\/si.question.images\/book_images\/1792.jpg", "uri": "\/textbooks\/essentials-of-database-management-1st-edition-1792", "see_more_uri": "\/textbooks\/computer-science-visual-objects-2530" }, "question_posted": "2024-09-26 00:02:27", "step_by_step_answer": "The Answer is in the image, click to view ...", "students_also_viewed": [ { "url": "\/study-help\/entrepreneurship\/what-alternatives-did-drawquest-have-for-generating-income-for-its-2121069", "description": "What alternatives did DrawQuest have for generating income for its app? Why do you think the company didnt try any of these alternatives before shutting down?", "stars": 0 }, { "url": "\/h-k-electronic-warehouse-sells-a-12pack-of-aaa", "description": "H & K Electronic Warehouse sells a 12-pack of AAA batteries, and this is a very popular item. Demand for this is normally distributed, with an average of 50 packs per day and a standard deviation of...", "stars": 3 }, { "url": "\/study-help\/questions\/im-really-stuck-on-this-javascript-assignment-the-clocks-app-13561027", "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...", "stars": 3 }, { "url": "\/study-help\/questions\/hw-13-help-save-exit-submit-12-points-1-1859651", "description": "HW 13 Help Save & Exit Submit 12 points 1 24 TufStuff, Incorporated, sells a wide range of drums, bins, boxes, and other containers that are used in the chemical industry. One of the company's...", "stars": 3 }, { "url": "\/study-help\/questions\/alicia-garcia-owns-the-mineral-right-in-a-property-in-3106422", "description": "Alicia Garcia owns the mineral right in a property in Texas and leases the mineral right with a royalty of 1\/8. Sand Oil Company owns 70% of the working interest and Scorpio Energy Co. owns the...", "stars": 3 }, { "url": "\/study-help\/questions\/a-lawyer-is-flying-across-the-country-on-a-business-2983142", "description": "A lawyer is flying across the country on a business trip for client A. She has brought along client B's file and intends to work on client B's matter while on the plane. If the plane trip is four...", "stars": 3 }, { "url": "\/study-help\/questions\/highperforming-organizations-with-strong-cohesive-cultures-tend-to-group-3207384", "description": "High-performing organizations with strong cohesive cultures tend to ______. Group of answer choices encourage learning and development among a clan or team environment adopt a market culture that...", "stars": 3 }, { "url": "\/study-help\/questions\/you-are-a-help-desk-support-technician-and-are-working-3202515", "description": "You are a help desk support technician and are working on your third call of the day. As you speak to the customer you realize that this call will take much more time than was scheduled. As a result,...", "stars": 3 }, { "url": "\/study-help\/questions\/what-are-legally-enforceable-rules-issued-by-the-regulator-to-3222158", "description": "What are legally enforceable rules issued by the regulator to correct an unsafe condition?The process of designing a new aircraft is a hugely complex, time-consuming, and expensive undertaking....", "stars": 3 }, { "url": "\/study-help\/cost-of-capital-in-managerial-finance\/what-are-the-variable-columns-settings-available-in-the-mining-2132181", "description": "What are the Variable columns settings available in the Mining Models Tab?", "stars": 3 }, { "url": "\/study-help\/cost-of-capital-in-managerial-finance\/what-does-the-mining-content-viewer-in-visual-studio-show-2132180", "description": "What does the Mining Content Viewer in Visual Studio show in terms of Probabilities?", "stars": 3 }, { "url": "\/study-help\/cost-of-capital-in-managerial-finance\/how-are-continuous-variables-normally-handled-in-decision-tree-algorithms-2132179", "description": "How are continuous variables normally handled in Decision Tree Algorithms?", "stars": 3 } ], "next_back_navigation": { "previous": "\/study-help\/questions\/question-1-0-5-points-how-are-13561026", "next": "\/study-help\/questions\/select-the-correct-loops-to-simplify-the-given-function-in-13561028" }, "breadcrumbs": [ { "name": "Study help", "link": "https:\/\/www.solutioninn.com\/study-help\/questions-and-answers" }, { "name": "Computer Science", "link": "https:\/\/www.solutioninn.com\/study-help\/questions-and-answers\/computer-science" }, { "name": "Databases", "link": "https:\/\/www.solutioninn.com\/study-help\/questions\/computer-science-databases" }, { "name": "I'm really stuck on this JavaScript assignment. The clock's app stopwatch has", "link": "https:\/\/www.solutioninn.com\/study-help\/questions\/im-really-stuck-on-this-javascript-assignment-the-clocks-app-13561027" } ], "skill_details": { "skill_id": "656", "skill_name": "Databases", "parent_id": "8" } }