www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Homework Assignment Help!

  1. #1
    Join Date
    Dec 2013
    Posts
    11

    Exclamation Homework Assignment Help!

    I'm really lost on this assignment and javascript in general. The simpler the code the better. Any help would be a blessing

    Build a combination stopwatch and countdown timer. The application will allow the user to start either a stopwatch or a countdown timer. Only one timer should be able to run at a time.

    These are the minimum required options for the full application:

    User option to select which type of timer to run.

    Stopwatch
    -Start/Stop Button that reflects current state
    -Reset button to restart
    -Visual indication of current time elapsed in proper time format 00:00:00
    -minutes, seconds, hundredths
    Countdown Timer
    -User input of time to countdown in proper time format
    -00:00:00
    -minutes, seconds, hundredths
    -validate with regex
    -Start/pause button
    -Some form of notification when time has elapsed to notify user
    -Visual indication of current time status in proper time format 00:00:00
    -minutes, seconds, hundredths
    -Maximum 10 minute countdown with entry validation for range
    Debug Mode
    -Visual output of states
    -When buttons are clicked
    -Time validation entry
    -Indication of when a function has been called
    on/off

  2. #2
    Join Date
    Nov 2013
    Posts
    10
    hi there,

    Thanks for this great info.

    Thank You.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,138
    Homework assignment eh? Seems pretty advanced for an homework assignment... RegEx, Debug, show function calls...
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Dec 2013
    Posts
    11
    Quote Originally Posted by \\.\ View Post
    Homework assignment eh? Seems pretty advanced for an homework assignment... RegEx, Debug, show function calls...
    Its the last one. I've struggled since the 3rd assignment.
    Don't know if the url will work for you without a password. I'd show you a screenshot if I could load one.
    http://ucdavisextension-onlinelearni...ew.php?id=9520

  5. #5
    Join Date
    Dec 2013
    Posts
    11
    Quote Originally Posted by \\.\ View Post
    Homework assignment eh? Seems pretty advanced for an homework assignment... RegEx, Debug, show function calls...
    I'd show you a screenshot if I could. The teacher is horrible at explaining or showing how to actually implement anything. Here's the URL, don't think you'll be able to see it without a passhttp://ucdavisextension-onlinelearni...ew.php?id=9520

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,138
    You need to break the whole in to manageable bits.

    Time is measured in milliseconds as you will no doubt be aware of.

    Therefore any time measurements would be best implemented on a millisecond basis.

    The use of hundredths is going to be a bit of a problem and that is due to the inherent lag in the JavaScript interpretation process. Realistically 1/10ths is manageable but you can display a counter that updates every 1/10th of a second with the milliseconds value to look like it is counting in 1/100ths.

    When using a display timer, best advice is to use the setInterval timer, each actuation of a setTimeout timer will induce some element of lag in to the program and won't be as accurate as a setInterval event timer.

    Most timers are set like this, handle = setInterval("callbackFunction(),1000); and thats because 1000 is a nice tidy number when the amount should be handle = setInterval("callbackFunction(),999); because all timers start at 0 and count to 999 which is 1000 milliseconds.

    You will find buried somewhere in this forum a version of a clock script that I created, mainly as an example, the format was a JSON style script like this:

    Code:
    clock = {
        id:false,
        updateDisplay:function(){
            clock.id.innerHTML = new Date().toUTCString().slice(16,25);
        },
        init:function(){
            if(!clock.id){
                clock.id = document.getElementById("clockDisplay");
                clearInterval(clock.auto);
                clock.auto = setInterval("clock.updateDisplay()",1000)
            }
        },
        auto:setInterval("clock.init()",1000)
    }
    the basics are simple in as far as the clock display does not need any kind of window.onload operation to start the process, this is if you like a backdoor way of making a JSON function group autonomous to needing invoking, the clock.init() function is called every 1000 milliseconds

    With the use of .getMilliseconds() method, you can add to the hours minutes and seconds the number of milliseconds fairly easily however padding is a different matter.

    Code:
    Number.prototype.padMilliseconds = function(){
    	return (""+(this/1000).toFixed(3)).slice(-3); 
    }
    
    clock = {
        id:false,
        updateDisplay:function(){
    		var dateObj = new Date()
            clock.id.innerHTML = dateObj.toUTCString().slice(16,25) + "." + dateObj.getMilliseconds().padMilliseconds();
        },
        init:function(){
            if(!clock.id){
                clock.id = document.getElementById("clockDisplay");
                clearInterval(clock.auto);
                clock.auto = setInterval("clock.updateDisplay()",10)
            }
        },
        auto:setInterval("clock.init()",1000)
    }
    The use of the prototype .padMilliseconds() is the simplest way I could think of to pad a number without any convoluted if(x<9) blahBlah = ... methods, however... if you are able to understand what is happening with it, you can try to explain it otherwise you would be best writing something that you know you can explain if questioned over it.

    Now adding a stop watch action...

    You would need to take a reference to when the clock started, subtract the current timer value from that which is stored and then display your time. The process for this is not the same as a clock with milliseconds. it involves the .getTime() method to get a time reference in milliseconds, a current time reference in milliseconds that has the initial start time deducted from it and a way of returning the time and slicing off the numbers you need and getting the milliseconds padded...

    for example...
    Code:
    stopwatch = {
    	id:false,
    	run:false,
    	startTime:0,
    	currentTime:0,
    	updateDisplay:function(){
    		if(stopwatch.run && stopwatch.id){
    			milliseconds = stopwatch.currentTime - stopwatch.startTime;
    			stopwatch.id.innerHTML = (milliseconds/1000).toFixed(3);
    			} 
    	},
    	startStop:function(){
    		if(stopwatch.run && !stopwatch.startTime){
    			stopwatch.intTimer = setInterval("stopwatch.updateDisplay()",10);
    			}else if(!stopwatch.run && stopwatch.startTime){
    				clearInterval(stopwatch.intTimer);
    				}
    	
    	},
    	current:function(){
    		stopwatch.currentTime = new Date().getTime();
    	},
    	start:function(){
    		stopwatch.start = new Date().getTime();
    	},
    	init:function(){
    		 if(!stopwatch.id){
    		 	stopwatch.id = document.getElementById("stopwatchDisplay");
    		 	clearInterval(stopwatch.auto);
    			stopwatch.auto = setInterval("stopwatch.current()",10);
    			}
    	},
    	auto:setInterval("stopwatch.init()",1000)
    }
    some HTML
    HTML Code:
    <div id="stopwatchDisplay"></div>
    <div id="buttons"><button id="start" onclick="stopwatch.run=true;stopwatch.startStop();">Start</button><br />
    <button id="start" onclick="stopwatch.run=false;stopwatch.startStop();">Stop</button></div>
    Gives you an idea on how you can use the system time without having to keep track in a variable.

    Hope that it gives you some inspiration to rough out a bit of code.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #7
    Join Date
    Dec 2013
    Posts
    11

    Need more than help

    So this is all I've gotten. Just the stopwatch. Somehow the Countdown timer has to be integrated into the stopwatch
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Final</title>
    	<style>
    		#output{
    			width:150px;
    			height:25px;
    			border:1px solid #999999;
    		}
    	</style>
    	<script>
    		// Stopwatch
    		var millisec = 0;
    		var seconds = 0;
    		var minutes = 0;
    		var timer;
    
    		function display(){
    		
    			if (millisec>=9){
    				millisec=0
    				seconds+=1
    			}
    			else
    				millisec+=1
    				document.d.d2.value = seconds + ".0" + millisec;
    				timer = setTimeout("display()",100);
    			}	
    			
    			if (seconds>=59){
    				seconds=0
    				minutes+=1
    			}
    			
    		function starttimer() {
    			
    			if (timer > 0) {
    			return;
    			}
    			display();	
    			}
    		
    		function stoptimer() {
    			  clearTimeout(timer);
    			  timer = 0;
    			}
    		
    
    		function startstop() {
    			if (timer > 0) {
    				clearTimeout(timer);
    				timer = 0;
    			} else {
    				display();
    		  }
    		}
    
    		function resettimer() {
    			stoptimer();
    			millisec = 0;
    			seconds = 0;
    		}
    	
    	//countdown
    	</script>
    </head>
    
    
    
    <body>
    		
    	<form name="d">
    		<input type="text" size="8" name="d2">
    		<input type="button" value="Start/Stop" onclick="startstop()">
    		<input type="reset" onclick="resettimer()">
    	</form>
    		
    </body>
    </html>

  8. #8
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    238
    This is my try of making the Stopwatch. I''m letting you to try to do the rest...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <title>Untitled</title>
    	<style type='text/css'>
    		body {position: relative; margin: 0 auto; width: 900px; font-size: 100%;}
    		.wrapper {position: relative; margin: 0 auto; padding-top: 50px; width: 510px;}
    		.stopwatch {
    			border: 2px solid black;
    			position: relative;
                width: 150px;
    			height: 150px;
    			border-radius: 25px;
    		}
    		.btn_cont {position: absolute; top: -27px; left: 25px; width: 100px; height: 27px;}
    		.btn1, .btn2, .btn3 {border: 1px solid black; position: absolute; width: 25px; height: 25px;}
    		.btn3 {right: 0px; background: gray}
    		.btn2 {left: 37px; background: red;}
    		.btn1 {background: green;}
    		.sw_disp {position: relative; top: 55px; height: 40px; font-size: 180%; text-align: center; line-height: 1.3}
    		.countdown {
    			position: absolute;
    			top: 50px;
    			left: 250px;
    			width: 250px;
    			height: 150px;
    		}
    		.opt_btns {
    			border: 1px solid black; 
    			position: absolute; 
    			margin: 15px 0px;
                margin-left: 3px;
    			width: 50px; 
    			height: 20px;
    			font-size: 90%;
    			font-weight: bold;
    			text-align: center;
    			line-height: 1.4;
    			background: green;
    			color: yellow;
    		}
    		.stop_button {margin: 15px 0; left: 73px; background: red;}
            .reset_button {margin: 15px 0; left: 143px; background: gray;}
    		.cd_disp {position: relative; top: 55px; height: 40px; font-size: 180%; text-align: center; line-height: 1.3}
    		td {font-size: 110%; color: red;}
    	</style>
    </head>
    <body>
    	<div class='wrapper'>
    		<div id='stopwatch' class='stopwatch'>
    			<div id='sw_disp' class='sw_disp'></div>
    			<div class='btn_cont'>
    				<div id='btn1' class='btn1' onclick="sw.start()"></div>
    				<div id='btn2' class='btn2' onclick="sw.stop()"></div>
    				<div id='btn3' class='btn3' onclick="sw.reset()"></div>
    			</div>
    		</div>
    		<div id='countdown' class='countdown'>
    			<div class='options'>
    				<table>
    					<tr>
    						<td>Set time</td>
    						<td><input id='time' type='text' /></td>
    					</tr>
    				</table>
    				<div class='opt_btns'>START</div>
    				<div class='opt_btns stop_button'>STOP</div>
                    <div class='opt_btns reset_button'>RESET</div>
    			</div>
    			<div id='cd_disp' class='cd_disp'></div>
    		</div>
        </div>
        <script type='text/javascript'>
            var sw = {
                init: function() {
                    document.getElementById('sw_disp').innerHTML = "00:00:00:00";
                    this.state = "ready";
                    return;
                },
                start: function() {
                    if (cd.state !== "ready") {
                        alert("Countdown timer has to be stopped before starting the Stopwatch!!");
                        return;
                    }
                    
                    var date = new Date();
                    
                    switch (this.state) {
                        case "ready": {
                            this.timerId = setInterval(function() {sw.disp(date); return;},10);
                            this.state = "running";
                            break;
                        };
                        case "stopped": {
                            this.timerId = setInterval(function() {sw.disp(date); return;},10);
                            this.state = "resumed";
                            break;
                        }
                        default: break; //prevents multiple timers from getting started 
                    }
                    
                    return;
                },
                disp: function(d) {
                    var date = new Date(new Date() - d.valueOf()), h, m, s, hs //hs - hundredth of a second
                    
                    this.x = new Date(date.getTime()); //store elapsed time 
                    //on resume get reference time and add it to the time since the stopwatch has been started
                    if (this.state === "resumed") date.setTime(this.snapshot.getTime() + date.getTime());
                    
                    h = date.getUTCHours();
                    m = date.getUTCMinutes();
                    s = date.getUTCSeconds();
                    hs = Math.floor((date.getUTCMilliseconds()) / 10);
                    
                    if (h < 10) h = "0" + h
                    if (m < 10) m = "0" + m
                    if (s < 10) s = "0" + s
                    
                    document.getElementById('sw_disp').innerHTML = h + ":" + m + ":" + s + ":" + hs;
                    return;
                },
                stop: function() {
                    clearInterval(this.timerId);
                    //prevents user from setting the stopwatch into the incorrect state
                    //if the stop button is the first button that has been pressed
                    this.state = (this.state === "ready") ? "ready" : "stopped";
                    //on each stop button press update the snapshot time
                    this.snapshot.setTime(this.snapshot.getTime() + this.x.getTime());
                    return;
                },
                reset: function() {
                    clearInterval(this.timerId);
                    this.snapshot = this.x = new Date(0);
                    this.init();
                    return;
                },
                timerId: null,
                state: null,
                snapshot: new Date(0),
                x: new Date(0)
            },
            
            cd = {
                state: "ready"
            }
            
            sw.init();
    	</script>
    </body>
    </html>
    Last edited by tech_soul8; 12-17-2013 at 10:19 AM.

  9. #9
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    238
    Replace the

    Code:
     stop: function() {
                    clearInterval(this.timerId);
                    //prevents user from setting the stopwatch into the incorrect state
                    //if the stop button is the first button that has been pressed
                    this.state = (this.state === "ready") ? "ready" : "stopped";
                    //on each stop button press update the snapshot time
                    this.snapshot.setTime(this.snapshot.getTime() + this.x.getTime());
                    return;
                }
    with

    Code:
    stop: function() {
                    clearInterval(this.timerId);
                    if (this.state === "resumed" || this.state === "running")
                        this.snapshot.setTime(this.snapshot.getTime() + this.x.getTime());
                    //prevents user from setting the stopwatch into the incorrect state
                    //if the stop button is the first button that has been pressed
                    this.state = (this.state === "ready") ? "ready" : "stopped";
                    return;
                }

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,138
    Quote Originally Posted by 6SIX View Post
    So this is all I've gotten. Just the stopwatch. Somehow the Countdown timer has to be integrated into the stopwatch
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Final</title>
    	<style>
    		#output{
    			width:150px;
    			height:25px;
    			border:1px solid #999999;
    		}
    	</style>
    	<script>
    		// Stopwatch
    		var millisec = 0;
    		var seconds = 0;
    		var minutes = 0;
    		var timer;
    
    		function display(){
    		
    			if (millisec>=9){
    				millisec=0
    				seconds+=1
    			}
    			else
    				millisec+=1
    				document.d.d2.value = seconds + ".0" + millisec;
    				timer = setTimeout("display()",100);
    			}	
    			
    			if (seconds>=59){
    				seconds=0
    				minutes+=1
    			}
    			
    		function starttimer() {
    			
    			if (timer > 0) {
    			return;
    			}
    			display();	
    			}
    		
    		function stoptimer() {
    			  clearTimeout(timer);
    			  timer = 0;
    			}
    		
    
    		function startstop() {
    			if (timer > 0) {
    				clearTimeout(timer);
    				timer = 0;
    			} else {
    				display();
    		  }
    		}
    
    		function resettimer() {
    			stoptimer();
    			millisec = 0;
    			seconds = 0;
    		}
    	
    	//countdown
    	</script>
    </head>
    
    
    
    <body>
    		
    	<form name="d">
    		<input type="text" size="8" name="d2">
    		<input type="button" value="Start/Stop" onclick="startstop()">
    		<input type="reset" onclick="resettimer()">
    	</form>
    		
    </body>
    </html>
    That is the wrong way of going about counting time, you already have a suite of methods and access to the system timer and event timers as demonstrated, why spend time adding and padding when you can be getting and slicing out of a time string what you need?


    In my example the only padding needed was on the milliseconds, the rest of the timer functions were based on the Date object and getting accurate system times, using event timers to run functions at set intervals to update a display rather than a cumbersome method of using counters and testing them to see if they are in or out of range.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #11
    Join Date
    Dec 2013
    Posts
    11
    This is really the 11th hour of my class. I still don't understand how to do much of anything. This is the regex I tried to adapt from a previous assignment on phone numbers.

    Code:
    function validateDate() {
    			var uName = document.getElementById("startStop").value;
    			var regex = /^\d{2}-\d{2}-\d{4}$/;
    			
    			if (regex.test(startStop)) { // true - validates
    				document.getElementById("dateprompt").innerHTML = 
    					""
    			} else { //false - not valid input
    				document.getElementById("dateprompt").innerHTML =
    					"<Date must be in MM/DD/YYYY format";
    				return (false);
    			}

  12. #12
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,138
    I am not a regex person, for something that professes to be "Regular" expressions, it is anything but regular.
    Code:
    var regex = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/;
    This will do the job to a degree in as far as it will allow 11/12/2013 but also will allow 99/01/1212 but not allow 1/1/2014 because it is looking for a prefix of 0 to single digits.

    In short, this is [0-9]{2} allows any number 00 to 99 the {2} indicates 2 digits if you want to allow single digits you need to indicate this with {1,2} in english it will allow 1 of 2 digits.

    Code:
    var regex = /^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{4}$/;
    that allows 1/1/2014, etc.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  13. #13
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,138
    Also note that dates are DD / MM / YYYY format not MM / DD / YYYY that MM / DD / YYYY is not an ISO standard date which you should be programming to in the world of computers and your tutor should be shot for it and please feel free to quote me on that.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  14. #14
    Join Date
    Dec 2013
    Posts
    11
    Quote Originally Posted by \\.\ View Post
    Also note that dates are DD / MM / YYYY format not MM / DD / YYYY that MM / DD / YYYY is not an ISO standard date which you should be programming to in the world of computers and your tutor should be shot for it and please feel free to quote me on that.
    This guy doesn't care about standards. He just wants what is required for the assignment. Real world applications will get 0 credit.

  15. #15
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,138
    WTF is wrong with the guy?

    How can he claim to be teaching a class in a standard that does not exist beyond the class room?

    IMHO the education board need to be informed of his rigid uncompromising attitudes, educators are supposed to encourage individualism, he / she sounds more like a totalitarian dictator.

    If you are to conform to that method then you need to adapt the Reg Expression and also any scripts because it is normal to expect a DD MM YYYY format.

    Code:
    	var regex = /^[0-1]{0,1}[0-9]{1}\/[0-3]{0,1}[0-9]{1}\/[0-9]{4}$/;
    is in the MM DD YYYY format and more specifically you are limited to inputting a date beginning 0 or 1 and 0 to 9 which means you can't input 99 but could input 19 for months. Code does exist as a RegEx that would check that you could only enter 1 to 12 I would suggest a second RegEx for a 2nd pass check to ensure that any date references can't begin for example 19/39/****

    Like I said, I am not really a RegExp person, they really do irritate the hell out of me, if I really wanted to learn about hieroglyphics then I would have taken ancient history and languages.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles