In this exercise, you’ll modify an application that uses a timer to display the
ID: 3920458 • Letter: I
Question
In this exercise, you’ll modify an application that uses a timer to display the elapsed minutes and seconds in a text box so it displays the elapsed time in a Progressbar widget. Estimated time: 10 to 15 minutes to research the widget and another 10 to 15 minutes to implement the changes.
2. Go to the jQuery UI website at http://jqueryui.com and display the documentation for the Progressbar widget. Review the code for one or more of the examples, then review the API documentation.
3. Modify the HTML for the application so it uses a Progressbar widget to display the elapsed time instead of a text box. Be sure to give the widget an id of “progressbar” so the CSS for the application works correctly.
4. Add a statement to the JavaScript file that activates the widget with a starting value of 0.
5. Modify the code that’s executed if the two entries are valid so it uses the widget. When you do that, you can delete the code that calculates and displays the elapsed minutes and seconds since it’s no longer needed. Then, you can add code that calculates and changes the value of the Progressbar widget.
index.html
main.css
timer.js
Personal Timer Please enter the total time and interval for the timer in seconds Total time: 15 nterval Start Timer Elapsed time:Explanation / Answer
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Personal timer</title>
<link rel="stylesheet" href="http//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link href="main.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="timer.js"></script>
</head>
<body>
<main>
<h1>Personal Timer</h1>
<h2>Please enter the total time and interval for the timer in seconds</h2>
<label for="time">Total time:</label>
<input type="text" id="time">
<span id="time_error">*</span><br>
<label for="interval">Interval:</label>
<input type="text" id="interval">
<span id="interval_error">*</span><br>
<label> </label>
<input type="button" id="start_timer" value="Start Timer"><br><br>
<div id="progressbar"></div>
</main>
</body>
</html>
timer.js
$(document).ready(function() {
$("#start_timer").click(
function () {
var totalTime = $("#time").val();
var interval = $("#interval").val();
var isValid = true;
// validate the time
if (totalTime == "") {
$("#time_error").text("This field is required.");
isValid = false;
} else if (isNaN(totalTime)) {
$("#time_error").text("Time must be a number.");
isValid = false;
} else {
$("#time_error").text("");
}
// validate the interval
if (interval == "") {
$("#interval_error").text("This field is required.");
isValid = false;
} else if (isNaN(interval)) {
$("#interval_error").text("Interval must be a number.");
isValid = false;
} else {
$("#interval_error").text("");
}
if (isValid) {
totalTime = totalTime * 1000;
interval = interval * 1000;
totalTime= totalTime / interval;
var progressbar = $( "#progressbar" );
$( "#progressbar" ).progressbar({
value: 0,
max:totalTime
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
}
});
$("#totalTime").focus();
});
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.