www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 21 of 21

Thread: Homework Assignment Help!

  1. #16
    Join Date
    Dec 2013
    Posts
    11

    Don't know what the*___ I'm doing

    The regex isn't really that big of a deal, it's really getting the stopwatch and countdown timer on the same 00:00:00 appearance with a button to switch between. We have to do some stupid output tracking.

    I adapted the code to make it look the way he wants. Now its getting the stopwatch/countdown timer to work.

    html:
    Code:
    <head>
    	
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>Final</title>
    	
    	<script type="text/javascript" src="final4.js"></script>
    	<link rel="stylesheet" type="text/css" href="final4.css">
    
    </head>
    
    
    
    <body>
    	
    	<p>
    		<span id="switch" style="visibility:visible">Switch to Countdown timer</span>
    	</p> 
    	
    	<p>
    		<input id="startStop" type="text" size="10" /><br/>
    		User Input
    	</p>
    	
    	<p>
    		<span id="startStop" style="visibility:visible">Start/Stop</span>
    		<span id="clearOutput" style="visibility:visible">Reset Output</span>
    		<span id="debugOnOff" style="visibility:visible">Debug On/Off</span>
    		<span id="hideDebug" style="visibility:visible">Hide Debug</span>
    	</p>
    
    	<div id="eventOutput" style="visibility;visible">
    		<p id="firstP"> This space is reserved for even output information</p>
    	</div>
    CSS:
    Code:
    #output{
    			width:150px;
    			height:25px;
    			border:1px solid #999999;
    		}
    
    span {
    	padding: 5px 10px 5px 10px;
    	background-color: #0FF;
    }
    
    .grayspan {
    	padding: 5px 10px 5px 10px;
    	background-color: #CCC;
    	color: #999;
    }
    
    #eventOutput {
    	border: 1px solid red;
    	width: 620px;
    	padding: 10px;
    	font-size: small;
    	color: blue;
    	background-color: #FF9;
    }
    
    #firstP {
    	font-style: italic;
    }
    JAVASCRIPT
    Code:
    var showDebug = true;
    
    window.onload = function() {
    	
    	if (showDebug) document.getElementById("debugOnOff").innerhtml = "Debug is On";
    		else document.getElementById("debugOnOff").innerhtml = "Debug is Off";
    	
    	
    	function validateDate() {
    		var uName = document.getElementById("startStop").value;
    		var regex = /^\d{2}:\d{2}:\d{2}$/;
    		
    		if (regex.test(startStop)) { // true - validates calls starttimer
    			starttimer()
    		} else { //false - not valid input
    			document.getElementById("dateprompt").innerHTML =
    				"<Time must be in 00:00:00 format";
    			return (false);
    	}
    	
    	// 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
    		
    	document.getElementById("clearOuput").onclick = function(evt) {
    	resetOutput();
    	} //clearOutput onclick
    	
    	document.getElementById("debugOnOff").onclick = function(evt) {
    		if (showDebug) { //debug on, turn it off
    			showdebug = false;
    			document.getElementById("debugOnOff").innerHTML = "Debug is Off";
    			addEventOutputTracking("onclick", "debugOnOff","-Debugging turned OFF");
    			document.getElementById("clearOutput").className = "grayspan";
    		} else { //debug off turn it on
    			showdebug = true;
    			document.getElementById("debugOnOff").innerHTML = "Debug is On";
    			addEventOutputTracking("onclick", "debugOnOff","-Debugging turned ON");
    			document.getElementById("clearOutput").className = "";
    			}
    	}
    	
    	document.getElementById("hideDebug").onclick = function(evt) {
    		showDebug = false;
    		document.getElementById("eventOutput").style.visibility = "hidden"; //hide output div
    		document.getElementById("clearOutput").style.visibility = "hidden"; //hide output span
    		document.getElementById("hideDebug").style.visibility = "hidden"; //hide debug button
    		document.getElementById("debugOnOff").style.visibility = "hidden"; //hide dedbug onclick
    	}
    }
    
    function addEventOutputTracking (eventName, outputText, extraText) {
    	var node; // add child lmnt
    	var pChildNode = document.createElement("p"); 
    	
    	node = document.getElementById("eventOutput");
    	node.appendChild(pChildNode);
    	pChildNode.appendChild(document.createTextNode("User Event: " + eventName + " - " + outputText " " + extraText));
    } //end eventoutput tracking
    
    function resetOutput() {
    	if (showDebug) {
    		var node = document.getElementById("eventOutput");
    		while (node.firstChild)
    			node.removeChild(node.firstChild);
    		
    		node.appendChild(document.createTextNode("Recently Clearded - Space is reserved for more output information"));
    	}
    } //end resetOutput

  2. #17
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    225
    This probably could be done much better especially the debugger but... I didn't finished debugger section, instead I gave you simple example of one possible way how you can do it. If you like it, you can update the code...

    I hope that something like this is what you have been looking for and hope it works fine.

    Note: the code is too long so I had to split it up into three distinct sections. You'll have to merge them together (just copy-paste code in order how it appears here in the thread).
    Also you can check first if you like it at: http://www.ts-programs.eu5.org

    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;}
            
    		.stopwatch {
    			border: 2px solid black;
                margin: 0 auto;
    			position: relative;
                width: 200px; height: 200px;
    			border-radius: 25px;
    		}
            
    		.btn_cont {position: absolute; top: -27px; left: 50px; 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;}
            
            #switch_btn {
                border: 1px solid black;
                position: absolute;
                top: 114px; left: 152px;
                width: 25px; height: 25px;
                background: blue;
            }
            
            table {table-layout: fixed; width: 198px; display: none;}
            tr, td {margin: 0; padding: 2px;}
            td {height: 25px; line-height: 0;}
            .caption {font-size: 40%; color: red;}
            .cd_input {width: 30px; font-size: 40%; line-height: 0;}
    		.disp_cont {position: relative; top: 65px; height: 70px; font-size: 180%; text-align: center; line-height: 2.3;}
            
            #log {font-size: 80%; margin: 0 auto; line-height: 0.6;}
    	</style>
    </head>
    <body>
    	<div class='wrapper'>
    		<div id='stopwatch' class='stopwatch'>
    			<div class='disp_cont'>
                    <div id="sw_disp"></div>
                    <table id="cd_disp">
                        <tr>
                            <td class="caption">hh</td>
                            <td class="caption">mm</td>
                            <td class="caption">ss</td>
                            <td class="caption">hs</td>
                        </tr>
                        <tr>
                            <td><input id="hh" class="cd_input" type="text" maxlength="2" value="" /></td>
                            <td><input id="mm" class="cd_input" type="text" maxlength="2" value="" /></td>
                            <td><input id="ss" class="cd_input" type="text" maxlength="2" value="" /></td>
                            <td><input id="hs" class="cd_input" type="text" maxlength="3" value="" /></td>
                        </tr>
                    </table>
                </div>
    			<div class='btn_cont'>
    				<div class='btn1' title='Start' onclick="sw.start()"></div>
    				<div class='btn2' title='Stop' onclick="sw.stop()"></div>
    				<div class='btn3' title='Reset' onclick="sw.reset()"></div>
                    <div id="switch_btn" title='Switch display' onclick="sw.switchDisp()"></div>
    			</div>
    		</div>
            <hr style="margin-top: 50px"/>
            <div id="log"></div>
        </div>
    Last edited by tech_soul8; 12-21-2013 at 05:31 AM.

  3. #18
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    225
    Code:
        <script type='text/javascript'>
            var sw = {
                init: function() {
    				var sw_disp = document.getElementById('sw_disp'), cd_disp = document.getElementById('cd_disp');
                    
                    this.log("The stopwatch initialization process started at " + new Date().toLocaleTimeString());
                    if (this.state === null && this.display === null) {
                        sw_disp.innerHTML = "00:00:00:00";
                        this.display = "stopwatch";
                    } else {
                        if (this.display === "stopwatch") {
                            sw_disp.style.display = "none";
                            cd_disp.style.display = "table";
                            this.display = "countdown";
                            this.cd.state = "ready";
                        } else {
                            cd_disp.style.display = "none";
                            sw_disp.style.display = "block";
    						sw_disp.innerHTML = "00:00:00:00";
                            this.display = "stopwatch"
    						this.cd.state = "ready";
                        }
    				}
                    this.state = "ready";
                    this.log("Initialization process finished successfully.");
                    this.log("Display: " + this.display);
                    if (this.display === "stopwatch") this.log("State: " + this.state);
                    else this.log ("State: " + this.cd.state);
                    return;
    			},
                start: function() {
                    var date = new Date(), cd = this.cd, self = this;
                    var state = (this.display === "stopwatch") ? this.state : cd.state;
                    
                    switch (this.display) {
                        case "countdown": {
                            if (state === null || state === "ready") {
                                cd.validate();
                            }
                            else if (state === "stopped") {
                                clearInterval(cd.timerId); //clears timer that updates snapshot time
                                cd.snapshot.setTime(cd.snapshot.getTime() + cd.timeToAdd.getTime());
                                cd.state = "resumed";
                                cd.timerId = cd.setTimer(cd.countDown,cd.snapshot);
                            }
                            if (state === "ready" || state === "stopped")
                                this.log("Start function called at: " + date.toLocaleTimeString());
                            break;
                        }
                        case "stopwatch": {
                            if (state === "ready") {
                                this.state = "running";
                                this.timerId = setInterval(function() {self.update(date); return;},10);
                            }
                            else if (state === "stopped") {
                                this.state = "resumed";
                                this.timerId = setInterval(function() {self.update(date); return;},10);
                            }
                            if (state === "stopped" || state === "ready")
                                this.log("Start function called at: " + date.toLocaleTimeString());
                            break;
                        }
                        default: break;
                    }
                    return;
                },
                update: 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() {
    				var cd = this.cd, state = (this.display === "stopwatch") ? this.state : cd.state;
                    
                    if (state === "running" || state === "resumed") {
                        if (this.display === "stopwatch") {
                            clearInterval(this.timerId);
                            this.state = "stopped";
                            this.log("Stopwatch stopped at: " + new Date().toLocaleTimeString());
                            this.snapshot.setTime(this.snapshot.getTime() + this.x.getTime());
                        } else {
                            clearInterval(cd.timerId);
                            cd.x = new Date();
                            cd.state = "stopped";
                            this.log("Countdown timer stopped at: " + new Date().toLocaleTimeString());
                            cd.timerId = cd.setTimer(cd.updateSnapshot);
                        }
                    }
                    return;
                },
                reset: function() {
                    var sw_disp = document.getElementById('sw_disp');
                    
                    if (this.display === "countdown") {
                        clearInterval(this.cd.timerId);
                        this.cd.state = "ready";
                        sw_disp.innerHTML = "00:00:00:00";
                        sw_disp.style.display = "none";
                        document.getElementById('cd_disp').style.display = "table";
                        return;
                    } else {
                        clearInterval(this.timerId);
                        this.snapshot = this.x = new Date(0);
                        sw_disp.innerHTML = "00:00:00:00";
                        this.state = "ready";
                    }
                    return;
                },
                switchDisp: function() {
                    var state = (this.display === "stopwatch") ? this.state : this.cd.state;
                    
                    if (state === "running" || state === "resumed") {
                        if (this.display === "stopwatch") 
    						alert("Please stop the Stopwatch first!!");
    					else
    						alert("Please stop the Countdown timer first!!");
    					return;
    				} else {
    					if (state === "stopped" && this.display === "countdown") {
    						clearInterval(this.cd.timerId); //clears the timer that updates the snapshot time
    						this.init();
    						return;
    					}
    				}
                    this.init()
                    return;
                },
                display: null,
                log: function(txt) {
                    var e = document.createElement('p'), t = document.createTextNode(txt);
                    var parElem = document.getElementById('log');
                    
                    e.appendChild(t);
                    parElem.appendChild(e);
                    return;
                },
                timerId: null,
                state: null,
                snapshot: new Date(0),
                x: new Date(0),
    Last edited by tech_soul8; 12-21-2013 at 05:47 AM.

  4. #19
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    225
    Code:
    cd: {
                    validate: function() {
                        var hh, mm, ss, hs, ctTime;
                        
                        hh = document.getElementById('hh');
                        mm = document.getElementById('mm');
                        ss = document.getElementById('ss');
                        hs = document.getElementById('hs');
                        
                        if (!(hh.value && mm.value && ss.value && hs.value)) {
                            alert("Please fill up all fields!!");
                            return;
                        } else {
                            if (mm.value > 59) {
                                alert("Please input the value between 0-59");
                                mm.value = "";
                                mm.focus();
                                return;
                            }
                            else if (ss.value > 59) {
                                alert("Please input the value between 0-59");
                                ss.value = "";
                                ss.focus();
                                return;
                            }
                            else if (hs.value > 100) {
                                alert("Please input the value between 0-100");
                                hs.value = "";
                                hs.focus();
                                return;
                            }
                            else {
                                ctTime = hh.value + ":" + mm.value + ":" + ss.value + ":" + hs.value;
                                
                                if (!(/(\d{2,2}:){3,3}\d{1,3}/.test(ctTime))) {
                                    alert("Please specify the time in hh:mm:ss:hs format!!");
                                    return;
                                }
                            }
                        }
                        this.setCdTime(hh,mm,ss,hs);
                        return;  
                    },
                    setCdTime: function(hh,mm,ss,hs) {
                        var time, self = this, date = new Date()
                    
                        hh = hh.value * 3600000;
                        mm = mm.value * 60000;
                        ss = ss.value * 1000;
                        hs = Math.floor(hs.value * 10);
                        
                        time = hh + mm + ss + hs;
                        date.setTime(date.getTime() + time);
                        this.snapshot = new Date(date.getTime());
                        document.getElementById('cd_disp').style.display = "none";
                        document.getElementById('sw_disp').style.display = "block";
                        this.state = "running";
                        this.timerId = this.setTimer(this.countDown,date);
                        return;
                    },
                    countDown: function(d) {
                        var date = new Date(d.getTime() - new Date().getTime()), h, m, s, hs;
                        var sw_disp = document.getElementById('sw_disp'), self = sw.cd;
                        
                        if (date.getTime() <= 0) {
                            sw_disp.innerHTML = "Time's up!!";
                            clearInterval(self.timerId);
                            self.state = "ready";
                            return;
                        } else {
                            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;
                          
                            sw_disp.innerHTML = h + ":" + m + ":" + s + ":" + hs;
                        }
                        return;
                    },
                    setTimer: function(fn,p) {
                        return setInterval(function() {fn(p);},10);
                    },
                    state: null,
                    snapshot: null,
                    timerId: null,
                    timeToAdd: new Date(0),
                    x: null,
                    updateSnapshot: function() {
                        var self = sw.cd, date = new Date();
          
    					date.setTime(date.getTime() - self.x.getTime());
                        self.timeToAdd.setTime(date.getTime());
                        return;
                    }
                }
            }
            
            sw.init();
    	</script>
    </body>
    </html>

  5. #20
    Join Date
    Dec 2013
    Posts
    11

    I have no idea what I'm doing

    The regex isn't really the problem, It's the switch - stopwatch, countdown timer.

    this is the way he wants it too look. I put the debug mode in, but it's sketchy.
    html:

    Code:
    <head>
    	
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>Final</title>
    	
    	<script type="text/javascript" src="final4.js"></script>
    	<link rel="stylesheet" type="text/css" href="final4.css">
    
    </head>
    
    <body>
    	
    	<p>
    		<span id="switch" style="visibility:visible">Switch to Countdown timer</span>
    	</p> 
    	
    	<p>
    		<input id="startStop" type="text" size="10" /><br/>
    		User Input
    	</p>
    	
    	<p>
    		<span id="startStop" style="visibility:visible">Start/Stop</span>
    		<span id="clearOutput" style="visibility:visible">Reset Output</span>
    		<span id="debugOnOff" style="visibility:visible">Debug On/Off</span>
    		<span id="hideDebug" style="visibility:visible">Hide Debug</span>
    	</p>
    
    	<div id="eventOutput" style="visibility;visible">
    		<p id="firstP"> This space is reserved for even output information</p>
    	</div>
    Code:
    #output{
    			width:150px;
    			height:25px;
    			border:1px solid #999999;
    		}
    
    span {
    	padding: 5px 10px 5px 10px;
    	background-color: #0FF;
    }
    
    .grayspan {
    	padding: 5px 10px 5px 10px;
    	background-color: #CCC;
    	color: #999;
    }
    
    #eventOutput {
    	border: 1px solid red;
    	width: 620px;
    	padding: 10px;
    	font-size: small;
    	color: blue;
    	background-color: #FF9;
    }
    
    #firstP {
    	font-style: italic;
    }
    js

    Code:
    var showDebug = true;
    
    window.onload = function() {
    	
    	if (showDebug) document.getElementById("debugOnOff").innerhtml = "Debug is On";
    		else document.getElementById("debugOnOff").innerhtml = "Debug is Off";
    	
    	
    	function validateDate() {
    		var uName = document.getElementById("startStop").value;
    		var regex = /^\d{2}:\d{2}:\d{2}$/;
    		
    		if (regex.test(startStop)) { // true - validates calls starttimer
    			starttimer()
    		} else { //false - not valid input
    			document.getElementById("dateprompt").innerHTML =
    				"<Time must be in 00:00:00 format";
    			return (false);
    	}
    	
    	// 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
    		
    	document.getElementById("clearOuput").onclick = function(evt) {
    	resetOutput();
    	} //clearOutput onclick
    	
    	document.getElementById("debugOnOff").onclick = function(evt) {
    		if (showDebug) { //debug on, turn it off
    			showdebug = false;
    			document.getElementById("debugOnOff").innerHTML = "Debug is Off";
    			addEventOutputTracking("onclick", "debugOnOff","-Debugging turned OFF");
    			document.getElementById("clearOutput").className = "grayspan";
    		} else { //debug off turn it on
    			showdebug = true;
    			document.getElementById("debugOnOff").innerHTML = "Debug is On";
    			addEventOutputTracking("onclick", "debugOnOff","-Debugging turned ON");
    			document.getElementById("clearOutput").className = "";
    			}
    	}
    	
    	document.getElementById("hideDebug").onclick = function(evt) {
    		showDebug = false;
    		document.getElementById("eventOutput").style.visibility = "hidden"; //hide output div
    		document.getElementById("clearOutput").style.visibility = "hidden"; //hide output span
    		document.getElementById("hideDebug").style.visibility = "hidden"; //hide debug button
    		document.getElementById("debugOnOff").style.visibility = "hidden"; //hide dedbug onclick
    	}
    }
    
    function addEventOutputTracking (eventName, outputText, extraText) {
    	var node; // add child lmnt
    	var pChildNode = document.createElement("p"); 
    	
    	node = document.getElementById("eventOutput");
    	node.appendChild(pChildNode);
    	pChildNode.appendChild(document.createTextNode("User Event: " + eventName + " - " + outputText " " + extraText));
    } //end eventoutput tracking
    
    function resetOutput() {
    	if (showDebug) {
    		var node = document.getElementById("eventOutput");
    		while (node.firstChild)
    			node.removeChild(node.firstChild);
    		
    		node.appendChild(document.createTextNode("Recently Clearded - Space is reserved for more output information"));
    	}
    } //end resetOutput

  6. #21
    Join Date
    Dec 2013
    Posts
    11
    sorry for the previous post browser didn't load mine, when I looked

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