NathaTerrien/20141007_JS_Exercice3.htm

## 20141007_JS_Exercice3.htm
<!DOCTYPE html>
<html>
<head>
	<title>Exercice - Method Chaining</title>
	<meta charset="utf-8" />
	<style>
		#block legend {
			font-size: 1.2em;
		}

		#pacman {
			position: relative;
			width: 150px;
			height: 150px;
			background-color: yellow;
			border-radius: 75px;
		}

		#pacman #eye {
			position: absolute;
			top: 40px;
			right: 30px;
			background-color: black;
			width: 30px;
			height: 30px;
			border-radius: 15px;
		}
    </style>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function() {
			$("#go").on("click", function (e) {
				// $(".toto").hide().css("backgroundColor", "blue").add(".titi").show().fadeIn();
				$("#block").css("border-color", "red")
					.find("p:not(.pleasenotme)").css("background-color","teal") .end()
					.find("#picture").attr("src", "photo2.jpg").end()
					.find("#pacman").animate({"left":500},1000) .end();
			});
        });
    </script>
</head>
<body>
	<div id="explanations">
		<h1>Exercice:&nbsp;Method Chaining</h1>
		<p>Lorsque l'on clique sur le bouton "#go".</p>
		<ul>
			<li>Définir la couleur de la bordure de l'élément #block à "red".</li>
			<li>Définir la couleur de fond des paragraphes "#paragraphe1" à "#paragraphe6" à "teal", sauf pour celui ayant la classe ".pleasenotme".</li>
			<li>Modifier l'image "#picture" en mettant l'image "photo2.jpg".</li>
			<li>Animer le block "#pacman" pour le faire bouger vers la droite.</li>
		</ul>
		<p>...et tout ça en une seule instruction jQuery.</p>
	</div>
	<hr />
	<div id="exercice">
		<button id="go" type="button">GO!</button>
		<fieldset id="block">
			<legend>#block</legend>
			<p id="paragraph1">#paragraph1</p>
			<p id="paragraph2">#paragraph2</p>
			<p id="paragraph3">#paragraph3</p>
			<p id="paragraph4">#paragraph4</p>
			<p id="paragraph5" class="pleasenotme">#paragraph5.pleasenotme</p>
			<p id="paragraph6">#paragraph6</p>
			<img id="picture" src="photo1.jpg" />
			<div id="pacman">
				<div id="eye"></div>
			</div>
		</fieldset>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Exercice - Method Chaining</title>
	<meta charset="utf-8" />
	<style>
	#block legend {
	font-size: 1.2em;
	}

	#pacman {
	position: relative;
	width: 150px;
	height: 150px;
	background-color: yellow;
	border-radius: 75px;
	}

	#pacman #eye {
	position: absolute;
	top: 40px;
	right: 30px;
	background-color: black;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	}
	</style>
	<script src="jquery.js"></script>
	<script>
	$(document).ready(function() {
	$("#go").on("click", function (e) {
	// $(".toto").hide().css("backgroundColor", "blue").add(".titi").show().fadeIn();
	$("#block").css("border-color", "red")
	.find("p:not(.pleasenotme)").css("background-color","teal") .end()
	.find("#picture").attr("src", "photo2.jpg").end()
	.find("#pacman").animate({"left":500},1000) .end();
	});
	});
	</script>
	</head>
	<body>
	<div id="explanations">
	<h1>Exercice: Method Chaining</h1>
	<p>Lorsque l'on clique sur le bouton "#go".</p>
	<ul>
	<li>Définir la couleur de la bordure de l'élément #block à "red".</li>
	<li>Définir la couleur de fond des paragraphes "#paragraphe1" à "#paragraphe6" à "teal", sauf pour celui ayant la classe ".pleasenotme".</li>
	<li>Modifier l'image "#picture" en mettant l'image "photo2.jpg".</li>
	<li>Animer le block "#pacman" pour le faire bouger vers la droite.</li>
	</ul>
	<p>...et tout ça en une seule instruction jQuery.</p>
	</div>
	<hr />
	<div id="exercice">
	<button id="go" type="button">GO!</button>
	<fieldset id="block">
	<legend>#block</legend>
	<p id="paragraph1">#paragraph1</p>
	<p id="paragraph2">#paragraph2</p>
	<p id="paragraph3">#paragraph3</p>
	<p id="paragraph4">#paragraph4</p>
	<p id="paragraph5" class="pleasenotme">#paragraph5.pleasenotme</p>
	<p id="paragraph6">#paragraph6</p>
	<img id="picture" src="photo1.jpg" />
	<div id="pacman">
	<div id="eye"></div>
	</div>
	</fieldset>
	</div>
	</body>
	</html>