Apr 28 In-Class Exercise Thread .
Please post solution solutions to the Apr 28 In-Class Exercise to this thread.
Best,
Chris
<!DOCTYPE html> <head> <title>Exercise</title> </head> <body> <script type="text/javascript"> function jump() { let elementStyle = document.getElementById("text").style; elementStyle.bottom = "0.5in"; elementStyle.color = "red"; setTimeout(function() {elementStyle.bottom = "0in"; elementStyle.color="black"}, 5000) } </script> <div onclick="jump()"> <p id="text" style="position: relative; font-size: 32px; color: black;">Jump!</p> </div> </body> </html>
<pre>
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Jump!</title> <script type="text/javascript"> function jump() { var jump = document.getElementById('jump'); jump.style = "top: 0.5in; color: red;"; setTimeout(function () { var jump = document.getElementById('jump'); jump.style = "top: 1in; color: black;"; }, 5000); } </script> <style> #jump { position: absolute; top: 1in; font-size: 32px; } </style> </head> <body> <div onclick="jump()" id="jump">Jump!</div> </body> </html>
</pre>
<pre> <!doctype html><html> <head> <title> jumping text exercise </title> </head> <body> <div id="jumpText" style="color:black;font-size:32px;position: absolute; left:1in; top: 2in" onclick="move('0.5')"> Jump! <div> <script> function goBack(movement){ temp = document.getElementById("jumpText").style; temp.color= "black"; temp.top = movement + "in"; }//goBack
function move(movement){
temp = document.getElementById("jumpText").style;
temp.color= "red";
temp.top = movement + "in";
setTimeout(function(){goBack(2);}, 5000);
}//move
</script></body> </html> </pre>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ajay Salh</title> <style> div { font-size: 32px; padding: 1in 0.25in; } </style> </head> <body> <div id="jump">Jump!</div> <script type="text/javascript"> document.getElementById("jump").onclick = function() { myStyle = document.getElementById("jump").style; myStyle.color="red"; myStyle.padding = "0.5in 0.25in" setTimeout(revert, 5000); }
function revert() {
myStyle = document.getElementById("jump").style;
myStyle.color="black";
myStyle.padding = "1in 0.25in"
}
</script></body> </html>
<pre> <!DOCTYPE html> <html> <head></head> <body> <div id="jump" onclick="jump()" style="font-size:32px;position:relative;top: 0.5in">Jump!</div> <script> var jumper = document.getElementById("jump"); function jump() { jumper.style.cssText = "font-size:32px;color:red;position:relative;"; setTimeout(jumpEnd, 5000); }
function jumpEnd() { jumper.style.cssText = "font-size:32px;position:relative;top: 0.5in"; } </script> </body> </html> </pre>
<nowiki><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="jump" style="color: black; font-size: 32px; position: absolute; top: 5in;" onclick="jump();" > Jump! </div> <script type="text/javascript"> function jump(){ let height = 4.5; let jumpStyle = document.getElementById("jump").style; jumpStyle.color = "red"; jumpStyle.top = height + "in"; let interval = setInterval(() => { height -= 0.5; jumpStyle.top = height + "in"; }, 500) let timeout = setTimeout(() => { clearInterval(interval); jumpStyle.top = "5in"; jumpStyle.color = "black"; }, 5000); } </script> </body> </html></nowiki>
(Edited: 2021-04-28)<nowiki> <!DOCTYPE html> <head> <title>April 28</title> </head> <body>
<div id="jumpDiv" style="font-size:32pt; color: black;" onclick="jumpUp()">Jump</div> <script> function jumpUp(){ var jumpStyle = document.getElementById("jumpDiv").style jumpStyle.top = "0.5in" jumpStyle.color = "red"; var timer = setTimeout(() => { jumpStyle.top = "0in" jumpStyle.color = "black"; }, 5000);
}</script> </body> </html> </nowiki>
<!DOCTYPE html> <html lang="en" dir="ltr">
<head> <meta charset="utf-8"> <title>In-class exercise</title> </head>
<body> <div id="jump" style="color: black; font-size: 32pt; position: relative;" onclick='jump()'>Jump!</div>
<script>
function jump()
{
var myStyle = document.getElementById("jump").style;
myStyle.bottom = "0.5in";
myStyle.color = "red";
setInterval(function() {myStyle.bottom = "0in"; myStyle.color="black"}, 5000);
}
</script></body> </html>
<nowiki><!DOCTYPE html> <html> <head> <title>Dat Nguyen</title> </head> <body> <div id="myJump" style="font-size: 32px; color: black" onclick="jump()">Jump!</div>
<script type="text/javascript">
function jump() {
var myElement = document.getElementById("myJump");
myElement.style.bottom = "10px";
myElement.style.color = "red";
var revert = setTimeout(function() {
myElement.style.bottom = "0px";
myElement.style.color = "black";
}, 5000);
}
</script></body> </html></nowiki>
(Edited: 2021-04-28)