Yioop - PHP Search Engine

Apr 28 In-Class Exercise Thread.

Please post solution solutions to the Apr 28 In-Class Exercise to this thread.

Best,

Chris

Please post solution solutions to the Apr 28 In-Class Exercise to this thread. Best, Chris

-- Apr 28 In-Class Exercise Thread

<!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>

<!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>

-- Apr 28 In-Class Exercise Thread

 
 
<!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> <!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>

-- Apr 28 In-Class Exercise Thread

<!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> <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>

-- Apr 28 In-Class Exercise Thread

  <!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>

<!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>

-- Apr 28 In-Class Exercise Thread

<!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> <!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>

-- Apr 28 In-Class Exercise Thread

Document

Jump!

(Edited: 2021-04-28)

<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>

-- Apr 28 In-Class Exercise Thread

April 28

Jump

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); }

<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>

-- Apr 28 In-Class Exercise Thread

 <!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>

<!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>

-- Apr 28 In-Class Exercise Thread

Dat Nguyen

Jump!

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); }

(Edited: 2021-04-28)

<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>