Yioop - PHP Search Engine

-- Apr 28 In-Class Exercise Thread

<!doctype html><html> <head>

    <title>Exercise</title>

</head> <body>

    <div id="jumpID" 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";
      }
      function move(movement){
        temp = document.getElementById("jumpID").style;
        temp.color= "red";
        temp.top = movement + "in"; 
        setTimeout(function(){goBack(2);}, 5000);
      }
    </script>

</body> </html>

<!doctype html><html> <head> <title>Exercise</title> </head> <body> <div id="jumpID" 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"; } function move(movement){ temp = document.getElementById("jumpID").style; temp.color= "red"; temp.top = movement + "in"; setTimeout(function(){goBack(2);}, 5000); } </script> </body> </html>

-- Apr 28 In-Class Exercise Thread

4/28 In-Class Exercise: Jump! #jump{ font-size: 32px; color: black; position: relative; } function jump() { var myStyle = document.getElementById("jump").style; myStyle.bottom = "0.5in"; myStyle.color = "red"; setTimeout( function() { myStyle.bottom = "0in"; myStyle.color="black" } , 5000); }

Jump!

(Edited: 2021-04-28)

<nowiki><!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>4/28 In-Class Exercise: Jump!</title> <style> #jump{ font-size: 32px; color: black; position: relative; } </style> <script> function jump() { var myStyle = document.getElementById("jump").style; myStyle.bottom = "0.5in"; myStyle.color = "red"; setTimeout( function() { myStyle.bottom = "0in"; myStyle.color="black" } , 5000); } </script> </head> <body> <div id="jump"onclick="jump()"> <p>Jump!</p> </div> </body> </html> </nowiki>

-- Apr 28 In-Class Exercise Thread

<!DOCTYPE html> <html> <head> <title>Inclass exercise</title> </head> <body> <div onclick ="change()">

    <p id="text" style="position: relative;font-size: 32px; color: black"> Jump1!</p>

</div> <script> function change() {

   let myStyle = document.getElementById("text").style;
   myStyle.bottom = "0.5in"; 
   myStyle.color="red";
   setTimeout(function() { myStyle.bottom = "0in"; myStyle.color="black"}, 5000)

}

</script> </body> </html>

<!DOCTYPE html> <html> <head> <title>Inclass exercise</title> </head> <body> <div onclick ="change()"> <p id="text" style="position: relative;font-size: 32px; color: black"> Jump1!</p> </div> <script> function change() { let myStyle = document.getElementById("text").style; myStyle.bottom = "0.5in"; myStyle.color="red"; setTimeout(function() { myStyle.bottom = "0in"; myStyle.color="black"}, 5000) } </script> </body> </html>

-- Apr 28 In-Class Exercise Thread

<!DOCTYPE html> <html>

  <head>
    <meta charset="utf-8">
    <title>In-class exercise</title>
  </head>

  <body>
    <div id="jump" style="font-size:32pt; color: black;" onclick="jumpUp()">Jump</div>
    <script>
      function jumpUp(){
          var jumpStyle = document.getElementById("jump").style
          jumpStyle.top = "0.5in"
          jumpStyle.color = "red";
          var timer = setTimeout(() => {
              jumpStyle.top = "0in"
              jumpStyle.color = "black";
          }, 5000);

      }
    </script>
  </body>

</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>In-class exercise</title> </head> <body> <div id="jump" style="font-size:32pt; color: black;" onclick="jumpUp()">Jump</div> <script> function jumpUp(){ var jumpStyle = document.getElementById("jump").style jumpStyle.top = "0.5in" jumpStyle.color = "red"; var timer = setTimeout(() => { jumpStyle.top = "0in" jumpStyle.color = "black"; }, 5000); } </script> </body> </html>

-- Apr 28 In-Class Exercise Thread

<!DOCTYPE html> <html lang="en" dir="ltr">

	<head><title> javascript </title>
		<meta charset="utf-8" >
		<meta name="description" value="this is illustration of javascript" >
		<style>
			#move {
				color: black;
				font-size: 32px;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div id="move" onclick='moveText()'> Jump! </div>
	<script>
		function moveText()
		{
			var myStyle = document.getElementById("move").style;
			myStyle.bottom="0.5in";
			myStyle.color="red";
			setInterval(reverse, 5000);
			//clearInterval(timeout);
		}
		 function reverse()
		{
			var myStyle = document.getElementById("move").style;
			myStyle.bottom = "0in";
			myStyle.color="black";
		}
	</script>
		
	</body>

</html>

<!DOCTYPE html> <html lang="en" dir="ltr"> <head><title> javascript </title> <meta charset="utf-8" > <meta name="description" value="this is illustration of javascript" > <style> #move { color: black; font-size: 32px; position: relative; } </style> </head> <body> <div id="move" onclick='moveText()'> Jump! </div> <script> function moveText() { var myStyle = document.getElementById("move").style; myStyle.bottom="0.5in"; myStyle.color="red"; setInterval(reverse, 5000); //clearInterval(timeout); } function reverse() { var myStyle = document.getElementById("move").style; myStyle.bottom = "0in"; myStyle.color="black"; } </script> </body> </html>

-- Apr 28 In-Class Exercise Thread

April 28, 2021 In-class Exercise

Jump!

function jump(){ jumpStyle = document.getElementById("jump").style; jumpStyle.color = "red"; jumpStyle.bottom = "0.5 in"; SetTimeout(function(){ jumpStyle.bottom = "0.0 in"; jumpStyle.color = "black"; },5); }

<nowiki><!DOCTYPE html> <head><title>April 28, 2021 In-class Exercise</title> </head> <body> <div onclick ="jump()" > <p id = "jump" style ="color:black; font-size:32pt">Jump!</p> </div> <script> function jump(){ jumpStyle = document.getElementById("jump").style; jumpStyle.color = "red"; jumpStyle.bottom = "0.5 in"; SetTimeout(function(){ jumpStyle.bottom = "0.0 in"; jumpStyle.color = "black"; },5); } </script> </body> <html></nowiki>

-- Apr 28 In-Class Exercise Thread

<!DOCTYPE html> <html> <head> <title>Excercise</title> </head> <body>

	Jump!

</p>

	Click Me

</button>

	 function myFunction() {
  		document.getElementById("jump").style.color = "red";

  	setTimeout(function(){
  		document.getElementById("jump").style.color = "black";
  		},5000)

}

</script> </body>

</html>

<!DOCTYPE html> <html> <head> <title>Excercise</title> </head> <body> <p id = "jump" style = "color:black; font-size:32px "> Jump! </p> <button onClick="myFunction()"> Click Me </button> <script> function myFunction() { document.getElementById("jump").style.color = "red"; setTimeout(function(){ document.getElementById("jump").style.color = "black"; },5000) } </script> </body> </html>

-- Apr 28 In-Class Exercise Thread

<!DOCTYPE html> <html> <head>

  <title>class 4/28 </title>
  <meta charset="utf-8" />
  <style>
    p {
      font-size: 32pt;
      color:black;
    }
  </style>

</head> <body>

  <!-- Write a short HTML page with Javascript on it
  and a div tag containing the text Jump! in 32pt font size
  and black.

When you click this div tag the word jump should be displaced upwards by 0.5in for 5 seconds and change to red before returning to its original state (use the Javascript for this).-->

  <div onclick="timejump();">
    <p id = "jumper"> Jump! </p>
  </div>

  <script>
    var timejump = setInterval(jump, 5000);
    var jump = function() {
     var jp = document.getElementById("jumper");
     var j = jp.style;
     j.position = "absolute";
     j.top = j.top +0.5 +"in";

    };
  </script>

</body> </html>

<!DOCTYPE html> <html> <head> <title>class 4/28 </title> <meta charset="utf-8" /> <style> p { font-size: 32pt; color:black; } </style> </head> <body>  <div onclick="timejump();"> <p id = "jumper"> Jump! </p> </div> <script> var timejump = setInterval(jump, 5000); var jump = function() { var jp = document.getElementById("jumper"); var j = jp.style; j.position = "absolute"; j.top = j.top +0.5 +"in"; }; </script> </body> </html>

-- Apr 28 In-Class Exercise Thread

  <title>In-Class Exercise</title>

</head> <body>

  





  <div id="txt1" style="font-size: 32px; color: black; position: relative">Jump!</div>
  <script>
    let txt1 = document.getElementById("txt1");
    txt1.addEventListener("click", moveItmoveIt);
    
    function moveItmoveIt() {
      txt1.style.bottom = "0.5in";
      txt1.style.color = "red";
      setTimeout(function() {
        txt1.style.top = 0;
        txt1.style.color = "black"
      }, 5000)
    }
  </script>

</body>

</html>

(Edited: 2021-04-29)

<pre><!DOCTYPE html> <html> <head> <title>In-Class Exercise</title> </head> <body> <br><br><br><br><br> <div id="txt1" style="font-size: 32px; color: black; position: relative">Jump!</div> <script> let txt1 = document.getElementById("txt1"); txt1.addEventListener("click", moveItmoveIt); function moveItmoveIt() { txt1.style.bottom = "0.5in"; txt1.style.color = "red"; setTimeout(function() { txt1.style.top = 0; txt1.style.color = "black" }, 5000) } </script> </body> </html>

-- Apr 28 In-Class Exercise Thread

<!DOCTYPE html> <html lang="en-us">

<head>

    <title>April 28 In-class Exercise</title>
    <style>
        div {
            font-size: 32px;
            padding: 1in 0.25in;
        }
    </style>

</head>

<body>

    <div id="jump">Jump!</div>
    <script>
        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-us"> <head> <title>April 28 In-class Exercise</title> <style> div { font-size: 32px; padding: 1in 0.25in; } </style> </head> <body> <div id="jump">Jump!</div> <script> 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>