2017-04-19
Apr 19 In-Class Exercise.
Please post your solutions to the Apr 19 In-Class Exercise here.
Best,
Chris
Please post your solutions to the Apr 19 In-Class Exercise here.
Best,
Chris
<code>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Callbacks</title>
</head>
<body>
<h1>Enter Email to: </h1>
<form>
<label>Email</label>
<input name='email' id='user-email' />
<input type='button' value='Enter' id='btn'/>
</form>
<div>
<p id="timer"><span id="time">15</span> Seconds Left!</p>
</div>
<script type="text/javascript">
// DOM Element Retrival
var d = document,
timer = d.getElementById('timer'),
time = Number(d.getElementById('time').innerHTML),
btn = d.getElementById('btn'),
input = d.getElementById('user-email'),
iter = setInterval(updateTime, 1000);
// On load, fire updateTime function
window.onload = updateTime();
iter;
// Updates time every second
function updateTime() {
iter;
setTimeout(function() {
if (time > 0) {
// Decrement time; update text on element
time--;
timer.innerHTML = time + ' Seconds Left!';
} else if (time === 0) {
timer.innerHTML = 'You missed the drawing!';
d.body.style.background = '#FF0000';
}
}, 1000);
}
// On Click Event
btn.onclick = function() {
var inputVal = input.value;
if (inputVal.length === 0) {
timer.innerHTML = 'Please Enter your Email!';
// Reset the timeout if no email
clearTimeout(iter);
time = 15, iter = setInterval(updateTime, 1000);
}
// If time > 0, display Winner message
else if (time > 0 && input.value !== 0) {
clearTimeout(iter);
timer.innerHTML = 'You Won!';
}
}
</script>
</body>
</html>
</code>
<pre>
<code>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Callbacks</title>
</head>
<body>
<h1>Enter Email to: </h1>
<form>
<label>Email</label>
<input name='email' id='user-email' />
<input type='button' value='Enter' id='btn'/>
</form>
<div>
<p id="timer"><span id="time">15</span> Seconds Left!</p>
</div>
<script type="text/javascript">
// DOM Element Retrival
var d = document,
timer = d.getElementById('timer'),
time = Number(d.getElementById('time').innerHTML),
btn = d.getElementById('btn'),
input = d.getElementById('user-email'),
iter = setInterval(updateTime, 1000);
// On load, fire updateTime function
window.onload = updateTime();
iter;
// Updates time every second
function updateTime() {
iter;
setTimeout(function() {
if (time > 0) {
// Decrement time; update text on element
time--;
timer.innerHTML = time + ' Seconds Left!';
} else if (time === 0) {
timer.innerHTML = 'You missed the drawing!';
d.body.style.background = '#FF0000';
}
}, 1000);
}
// On Click Event
btn.onclick = function() {
var inputVal = input.value;
if (inputVal.length === 0) {
timer.innerHTML = 'Please Enter your Email!';
// Reset the timeout if no email
clearTimeout(iter);
time = 15, iter = setInterval(updateTime, 1000);
}
// If time > 0, display Winner message
else if (time > 0 && input.value !== 0) {
clearTimeout(iter);
timer.innerHTML = 'You Won!';
}
}
</script>
</body>
</html>
</code>
</pre>
<!DOCTYPE html>
<html>
<head> <title> Let's Build Something </title> </head>
<body>
<h1> We'll Send You Money!! </h1>
<form>
<label for="Email"> Email:</label>
<input type="text" id="Email" placeholder="example@gmail.com">
<input type="button" value="Enter" onclick=display()>
</form>
<div id = "timer"> </div>
<script>
var seconds = 15;
document.getElementById("timer").innerHTML = seconds + " Seconds Left!";
var interval = setInterval(function(){
seconds = seconds - 3;
document.getElementById("timer").innerHTML = seconds + " Seconds Left!";
if(seconds <= 0) {
document.getElementById("timer").innerHTML = 'You missed the drawing!';
clearInterval(interval);
}
},3000);
function display(){
if(seconds > 0)
{
var email = document.getElementById("Email").value;
if(!email)
alert("Please Enter Your Email");
else {
clearInterval(interval);
document.getElementById("timer").innerHTML = "You won!";
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head> <title> Let's Build Something </title> </head>
<body>
<h1> We'll Send You Money!! </h1>
<form>
<label for="Email"> Email:</label>
<input type="text" id="Email" placeholder="example@gmail.com">
<input type="button" value="Enter" onclick=display()>
</form>
<div id = "timer"> </div>
<script>
var seconds = 15;
document.getElementById("timer").innerHTML = seconds + " Seconds Left!";
var interval = setInterval(function(){
seconds = seconds - 3;
document.getElementById("timer").innerHTML = seconds + " Seconds Left!";
if(seconds <= 0) {
document.getElementById("timer").innerHTML = 'You missed the drawing!';
clearInterval(interval);
}
},3000);
function display(){
if(seconds > 0)
{
var email = document.getElementById("Email").value;
if(!email)
alert("Please Enter Your Email");
else {
clearInterval(interval);
document.getElementById("timer").innerHTML = "You won!";
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Timer Assignment</title>
<script type="text/javascript">
var count = 15;
function startTimer(){
document.getElementById("counter").innerHTML = count + " Seconds Left!";
interval = setInterval(function(){
count = count - 3;
document.getElementById("counter").innerHTML = count + " Seconds Left!";
if (count == 0) {
clearInterval(interval);
document.getElementById("counter").innerHTML = "You missed getting money!";
}
}, 3000);
}
function validate(){
if (count > 0) {
if (document.getElementById("email").value){
clearInterval(interval);
document.getElementById("counter").innerHTML = "You won!";
} else {
document.getElementById("counter").innerHTML = "Please Enter Your Email";
}
}
}
</script>
</head>
<body onload="startTimer();">
<h1>We'll Send You Money!!</h1>
<form>
<label>Email <input id="email" type="text"> </label>
<input id="buttonT" type="button" onclick="validate()" value="Enter">
</form>
<div id="counter"></div>
</body>
</html>
(Edited: 2017-04-19) <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Timer Assignment</title>
<script type="text/javascript">
var count = 15;
function startTimer(){
document.getElementById("counter").innerHTML = count + " Seconds Left!";
interval = setInterval(function(){
count = count - 3;
document.getElementById("counter").innerHTML = count + " Seconds Left!";
if (count == 0) {
clearInterval(interval);
document.getElementById("counter").innerHTML = "You missed getting money!";
}
}, 3000);
}
function validate(){
if (count > 0) {
if (document.getElementById("email").value){
clearInterval(interval);
document.getElementById("counter").innerHTML = "You won!";
} else {
document.getElementById("counter").innerHTML = "Please Enter Your Email";
}
}
}
</script>
</head>
<body onload="startTimer();">
<h1>We'll Send You Money!!</h1>
<form>
<label>Email <input id="email" type="text"> </label>
<input id="buttonT" type="button" onclick="validate()" value="Enter">
</form>
<div id="counter"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Timer Assignment</title>
</head>
<body>
<h1>We'll Sound You Money!!</h1>
<label>Email</label>
<input type="text" id="EmailInput"></input>
<input type="button" value="Enter" onclick="onEnter();"></button>
<div id="TimerDiv">
</div>
</body>
<script>
var timeRemaining = 15;
var timerDiv = document.getElementById("TimerDiv");
var emailInput = document.getElementById("EmailInput");
var updateInterval = setInterval(updateTimer, 3000);
function updateTimer()
{
timeRemaining -= 3;
if (timeRemaining > 0)
{
timerDiv.innerHTML = "<p>" + timeRemaining + " Senconds Left!</p>";
return;
}
else{
timerDiv.innerHTML = "<p>You missed getting money!</p>";
clearInterval(updateInterval);
}
}
function onEnter()
{
if (emailInput.value.length > 0 && timeRemaining > 0){
timerDiv.innerHTML = timerDiv.innerHTML = "<p>You won!</p>";
clearInterval(updateInterval);
}
else{
timerDiv.innerHTML = timerDiv.innerHTML = "<p>Please enter your email!</p>";
}
}
</script>
</html>
(Edited: 2017-04-19) <pre>
<!DOCTYPE html>
<html>
<head>
<title>Timer Assignment</title>
</head>
<body>
<h1>We'll Sound You Money!!</h1>
<label>Email</label>
<input type="text" id="EmailInput"></input>
<input type="button" value="Enter" onclick="onEnter();"></button>
<div id="TimerDiv">
</div>
</body>
<script>
var timeRemaining = 15;
var timerDiv = document.getElementById("TimerDiv");
var emailInput = document.getElementById("EmailInput");
var updateInterval = setInterval(updateTimer, 3000);
function updateTimer()
{
timeRemaining -= 3;
if (timeRemaining > 0)
{
timerDiv.innerHTML = "<p>" + timeRemaining + " Senconds Left!</p>";
return;
}
else{
timerDiv.innerHTML = "<p>You missed getting money!</p>";
clearInterval(updateInterval);
}
}
function onEnter()
{
if (emailInput.value.length > 0 && timeRemaining > 0){
timerDiv.innerHTML = timerDiv.innerHTML = "<p>You won!</p>";
clearInterval(updateInterval);
}
else{
timerDiv.innerHTML = timerDiv.innerHTML = "<p>Please enter your email!</p>";
}
}
</script>
</html>
</pre>
<html>
<head>
</head>
<body>
<script>
var cnt = 15;
var interval = setInterval(function(){
var time = document.getElementByID("time");
time.innerHTML = (cnt--);
}, 3000);
function submit(){
var name = document.getElementByID("name");
if(name.innerHTML !== ""){
alert("Sending the monies");
clearInterval(interval);
}
else {
alert("Sorry I need the name");
}
}
</script>
<h1>We'll Send You Money!</h1>
<p id="time">15</p>
<textarea id="name"></textarea>
<button id="go" value="Go" onClick="submit()"></button>
</body>
</html>
<pre>
<html>
<head>
</head>
<body>
<script>
var cnt = 15;
var interval = setInterval(function(){
var time = document.getElementByID("time");
time.innerHTML = (cnt--);
}, 3000);
function submit(){
var name = document.getElementByID("name");
if(name.innerHTML !== ""){
alert("Sending the monies");
clearInterval(interval);
}
else {
alert("Sorry I need the name");
}
}
</script>
<h1>We'll Send You Money!</h1>
<p id="time">15</p>
<textarea id="name"></textarea>
<button id="go" value="Go" onClick="submit()"></button>
</body>
</html>
</pre>
<!DOCTYPE html> <html>
<body>
<h1>We'll Send You Money!!</h1>
<form>
<label for="Email"><input type="text" id="email" value=""/></label>
<label for="Enter"><input type="button" value="Enter" onclick="display();"/></label>
</form>
<div id="message"></div>
</body>
<script>
var time = 15;
var update = setInterval(updateTimer,3000);
document.getElementById("message").innerHTML = time+" seconds left!";
function updateTimer()
{
time -= 3;
if(time > 0)
document.getElementById("message").innerHTML = time+" seconds left!";
else
document.getElementById("message").innerHTML = "You missed the drawing!";
}
function display()
{
var email = document.getElementById("email").value;
if(time > 0)
{
if(email != "")
{
clearInterval(update);
document.getElementById("message").innerHTML = "You won!";
}
else
alert("Please enter your email.");
}
}
</script>
</html>
----
<!DOCTYPE html>
<html>
<body>
<h1>We'll Send You Money!!</h1>
<form>
<label for="Email"><input type="text" id="email" value=""/></label>
<label for="Enter"><input type="button" value="Enter" onclick="display();"/></label>
</form>
<div id="message"></div>
</body>
<script>
var time = 15;
var update = setInterval(updateTimer,3000);
document.getElementById("message").innerHTML = time+" seconds left!";
function updateTimer()
{
time -= 3;
if(time > 0)
document.getElementById("message").innerHTML = time+" seconds left!";
else
document.getElementById("message").innerHTML = "You missed the drawing!";
}
function display()
{
var email = document.getElementById("email").value;
if(time > 0)
{
if(email != "")
{
clearInterval(update);
document.getElementById("message").innerHTML = "You won!";
}
else
alert("Please enter your email.");
}
}
</script>
</html>
Kirtan Patel
<!DOCTYPE html>
<html>
<head>
(Edited: 2017-04-19)
<title>In-Class Exercise</title>
<script type="text/javascript">
var email = document.getElementById("Email");
var timer = document.getElementById("timer");
var submit = document.getElementById("submit");
var seconds = 15;
var done = false;
var clock;
function start(){
var seconds = 15;
clock = setInterval(function(){
var email = document.getElementById("Email");
var timer = document.getElementById("timer");
var submit = document.getElementById("submit");
if(seconds > 0){
timer.innerHTML = seconds + " Seconds Left!";
seconds -= 3;
}
else{
timer.innerHTML = "You missed getting money!";
clearInterval(clock);
done = true;
}
}, 3000);
}
function check(){
var email = document.getElementById("Email");
var timer = document.getElementById("timer");
if(email.value == ""){
alert("Please Enter Your Email");
}
else if (!done){
timer.innerHTML = "You Won!";
clearInterval(clock);
done = true;
}
}
</script>
</head>
<body onload="start();"><h1>We'll Send You Money!!</h1> <label>Email: </label> <input type="text" id="Email" placeholder="Email"> <button id="submit" onclick="check();">Submit</button> <div> <p id="timer">15 Seconds Left!</p> </div></body> </html>
Kirtan Patel
<!DOCTYPE html>
<html>
<head>
<title>In-Class Exercise</title>
<script type="text/javascript">
var email = document.getElementById("Email");
var timer = document.getElementById("timer");
var submit = document.getElementById("submit");
var seconds = 15;
var done = false;
var clock;
function start(){
var seconds = 15;
clock = setInterval(function(){
var email = document.getElementById("Email");
var timer = document.getElementById("timer");
var submit = document.getElementById("submit");
if(seconds > 0){
timer.innerHTML = seconds + " Seconds Left!";
seconds -= 3;
}
else{
timer.innerHTML = "You missed getting money!";
clearInterval(clock);
done = true;
}
}, 3000);
}
function check(){
var email = document.getElementById("Email");
var timer = document.getElementById("timer");
if(email.value == ""){
alert("Please Enter Your Email");
}
else if (!done){
timer.innerHTML = "You Won!";
clearInterval(clock);
done = true;
}
}
</script>
</head>
<body onload="start();">
<h1>We'll Send You Money!!</h1>
<label>Email: </label>
<input type="text" id="Email" placeholder="Email">
<button id="submit" onclick="check();">Submit</button>
<div>
<p id="timer">15 Seconds Left!</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ICE 9 | April 19, 2017</title>
<script type="text/javascript">
var time = 15;
setInterval(function () {
if (time <= 0)
return;
time -= 3;
document.getElementById('timer-div').innerHTML = time + ' Seconds Left!';
}, 3000);
function draw() {
var email_input = document.getElementById('email-input');
var timer_div = document.getElementById('timer-div');
if (time <= 0) {
timer_div.innerHTML = 'You missed getting money!';
} else if (email_input.value === '') {
alert('Please Enter Your Email!');
} else {
timer_div.innerHTML = 'You won!';
}
}
</script>
</head>
<body>
<h1>We'll Send You Money!!</h1>
<label for="email-input">Email:</label>
<input name="email" id="email-input" type="email">
<input name="enter" value="Enter" type="submit" onclick="draw()">
<div id="timer-div">15 Seconds Left!</div>
</body>
</html>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ICE 9 | April 19, 2017</title>
<script type="text/javascript">
var time = 15;
setInterval(function () {
if (time <= 0)
return;
time -= 3;
document.getElementById('timer-div').innerHTML = time + ' Seconds Left!';
}, 3000);
function draw() {
var email_input = document.getElementById('email-input');
var timer_div = document.getElementById('timer-div');
if (time <= 0) {
timer_div.innerHTML = 'You missed getting money!';
} else if (email_input.value === '') {
alert('Please Enter Your Email!');
} else {
timer_div.innerHTML = 'You won!';
}
}
</script>
</head>
<body>
<h1>We'll Send You Money!!</h1>
<label for="email-input">Email:</label>
<input name="email" id="email-input" type="email">
<input name="enter" value="Enter" type="submit" onclick="draw()">
<div id="timer-div">15 Seconds Left!</div>
</body>
</html>
</pre>
Yash Parikh.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>We'll Send You Money!!</title>
</head>
<body>
<h1>We'll Send You Money!!</h1>
<form>
<label>Email: </label>
<input type="text" id="email" name="email" placeholder="Enter your email... "/>
<button id = "enterButton" onclick="enterFunction()">Enter</button>
</form>
<div id="timer"> You have have 15 seconds left!!</div>
<script>
var timeCounter = 15;
var timer = setInterval(function () {
timeCounter -= 3;
if(timeCounter > 0){
document.getElementById("timer").innerHTML = "<p>"+ "You have " + timeCounter + " seconds left!!" + "</p>"
return
}
else {
document.getElementById("timer").innerHTML = "<p>"+ "You have missed out " + "</p>"
return
}
}, 3000)
function enterFunction() {
if(document.getElementById("email") !== null && timeCounter > 0) {
document.getElementById("timer").innerHTML = "<p>"+ "You won!! " + "</p>"
clearInterval(timer);
return
}
}
</script>
</body></html>
Yash Parikh.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>We'll Send You Money!!</title>
</head>
<body>
<h1>We'll Send You Money!!</h1>
<form>
<label>Email: </label>
<input type="text" id="email" name="email" placeholder="Enter your email... "/><br/>
<button id = "enterButton" onclick="enterFunction()">Enter</button>
</form>
<div id="timer"> You have have 15 seconds left!!</div>
<script>
var timeCounter = 15;
var timer = setInterval(function () {
timeCounter -= 3;
if(timeCounter > 0){
document.getElementById("timer").innerHTML = "<p>"+ "You have " + timeCounter + " seconds left!!" + "</p>"
return
}
else {
document.getElementById("timer").innerHTML = "<p>"+ "You have missed out " + "</p>"
return
}
}, 3000)
function enterFunction() {
if(document.getElementById("email") !== null && timeCounter > 0) {
document.getElementById("timer").innerHTML = "<p>"+ "You won!! " + "</p>"
clearInterval(timer);
return
}
}
</script>
</body>
</html>
(c) 2025 Yioop - PHP Search Engine