diff --git a/TD3/README.MD b/TD3/README.MD
new file mode 100644
index 0000000..34af619
--- /dev/null
+++ b/TD3/README.MD
@@ -0,0 +1,6 @@
+# Programmation Web – client riche - TD3
+
+## Exercice 1
+
+> Que pouvez-vous dire de l’architecture de l’application ?
+
diff --git a/TD3/TP3_JS_M413_2016.pdf b/TD3/TP3_JS_M413_2016.pdf
new file mode 100644
index 0000000..7040d95
Binary files /dev/null and b/TD3/TP3_JS_M413_2016.pdf differ
diff --git a/TD3/css/td3-exo1.css b/TD3/css/td3-exo1.css
new file mode 100644
index 0000000..fcdffdc
--- /dev/null
+++ b/TD3/css/td3-exo1.css
@@ -0,0 +1,43 @@
+html {
+ font-size: 62.5%;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+#jeu {
+ border-style:solid;
+ border-width:1px;
+ background-color:#00008B;
+ margin:0px;
+ width: 306px;
+ height:306px;
+ position: absolute;
+}
+.case {
+ border-style:solid;
+ border-width:1px;
+ background-color:#1E90FF;
+ margin:0px;
+ padding: 0px;
+ width: 100px;
+ height:100px;
+ position: absolute;
+ z-index:1;
+ transition-property : top, left;
+ transition-duration : 1s;
+}
+div{
+ padding:0px;
+}
+h1{
+ text-align: center;
+ font-size: 4rem;
+ margin:0;
+ padding: 27px 0px;
+}
+.vide {
+ background-color:#00008B;
+ z-index:0;
+ border:none
+}
\ No newline at end of file
diff --git a/TD3/css/td3-exo2.css b/TD3/css/td3-exo2.css
new file mode 100644
index 0000000..e5e561c
--- /dev/null
+++ b/TD3/css/td3-exo2.css
@@ -0,0 +1,40 @@
+html { font-size: 62.5%; }
+body { margin: 0px; padding: 0px; color : black}
+#jeu {
+ border-style:solid;
+ border-width:1px;
+ background-color:#00008B;
+ margin:0px;
+ width: 408px;
+ height:408px;
+}
+
+#commande {
+ margin:0px;
+ height:30px;
+ position: absolute;
+ left : 410px;
+ top: 0px;
+}
+.case {
+ border-style:solid;
+ border-width:1px;
+ border-color:black;
+ background-color:#1E90FF;
+ margin:0px;
+ padding: 0px;
+ width: 100px;
+ height:100px;
+ position: absolute;
+ z-index:1;
+ transition-property : top, left;
+ transition-duration : 1s;
+ text-align: center;
+ font-size: 4rem;
+ line-height: 100px;
+}
+.new {
+ color : red;
+}
+
+.videold { background-color:#00008B; z-index:0; border:none}
\ No newline at end of file
diff --git a/TD3/index.html b/TD3/index.html
new file mode 100644
index 0000000..aaf06e2
--- /dev/null
+++ b/TD3/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ M4103 - Programmation Web Client Riche
+
+
+ M4103 - Programmation Web Client Riche
+ Sommaire TD3
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/TD3/js/td3-exo1.js b/TD3/js/td3-exo1.js
new file mode 100644
index 0000000..f1ab6f1
--- /dev/null
+++ b/TD3/js/td3-exo1.js
@@ -0,0 +1,28 @@
+console.log("Chargement...");
+
+
+function init() {
+ console.log("Initialisation...");
+ var div = document.querySelectorAll(".case");
+
+ for (var i = 0; i < div.length; i++) {
+ div[i].addEventListener("click", selection);
+ }
+
+}
+
+function selection(event) {
+
+ var maCase = event.currentTarget;
+ var vide = document.body.querySelector(".case.vide");
+
+ if ((maCase.offsetTop == vide.offsetTop && Math.abs(maCase.offsetLeft - vide.offsetLeft == 102)) ||
+ (maCase.offsetLeft == vide.offsetLeft && Math.abs(maCase.offsetTop - vide.offsetTop == 102))) {
+ console.log("1");
+ maCase.className = "case vide";
+ vide.className = "case";
+ }
+
+ console.log(event.currentTarget.className + " : " + event.currentTarget.innerText);
+ var e = event.target;
+}
\ No newline at end of file
diff --git a/TD3/js/td3-exo2.js b/TD3/js/td3-exo2.js
new file mode 100644
index 0000000..37341b3
--- /dev/null
+++ b/TD3/js/td3-exo2.js
@@ -0,0 +1,5 @@
+console.log("js linkef");
+
+function init() {
+ console.log("init ok");
+}
\ No newline at end of file
diff --git a/TD3/td3-exo1.html b/TD3/td3-exo1.html
new file mode 100644
index 0000000..abfbcc9
--- /dev/null
+++ b/TD3/td3-exo1.html
@@ -0,0 +1,22 @@
+
+
+
+ Taquin
+
+
+
+
+
+
+
6
+
1
+
7
+
3
+
4
+
8
+
5
+
2
+
+