js_play.md

Javascript/JQuery workout

Exercises for fun

ex_1.js

Using only js

• Create a square that's 20 percent the width and height of the document. Color it rgb(255,0,0).
• If the square is 20 percent of the page width and height centering it would require 40 percent margin's on the left/right and top/bottom.

ex_1_b.js

---

Addding JQuery

• Add an event that watches for a resize on the window and changes the square back to 20 percent with jQuery.

ex_1_c(Extra Fun)

---

Try the following individually:

$('div').css('-webkit-transform', 'rotateZ(30deg)');
  $('div').css('-webkit-transform', 'rotateY(30deg)');
  $('div').css('-webkit-transform', 'rotateX(30deg)');

Try the following individually:

 $('div').css('-webkit-transform', 'translateX(100px)');
 $('div').css('-webkit-transform', 'translateY(90px)');

ex_1_d

---

Try the following code in the web console and mouse over your window.

var mouseX, mouseY;
$(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
	console.log(mouseX);
	console.log(mouseY);
})

Could you use something like this to make a div follow your cursor?

---

ex_2

Bubble Trouble!

html

<div class="bubble">
	<div class="bubble">
		<div class="bubble">
			<div class="bubble">
			
			</div>
		</div>
	</div>
</div>

Style

<style>
	.bubble{
		position: inherit;
		background-color: blue; 
		padding: 20px,
		border: solid 5px white;
	}	
</style>

JS

Get all the bubbles

bubbles = document.getElementsByClassName("bubble")

Attach a click event to each bubble

for( var i = 0; i < bubbles.length; i++){ 	
	bubbles[i].onclick = function(event){
	 this.style.backgroundColor = "red"
	}
}

If you click the inner most div you'll notice it propagates to all the bubbles containing it. Hint "event.stopPropogation"

Change it so that only the current bubble is changed

---

ex_3

Interactive lists

<form>
	<input type="text">
</form>

<ul id="myList">
	

</ul>

JS

// 1.) Watch for a submit event
$('form').on('submit', function(){
	... 
	
	// 2.) Get the input from the input tag
	$myInput = // … some jQuery here…  
	
	 
	//	3.) Add `myInput` to `#myList`,
	 

	/* 
		4. ) Add a click event 
			 to the appended element
			 that changes the css when 
			 clicked
	*/
})