diff --git a/WIM4.1/tp/tp5/ex1/VoirLePUBLIC_HTML b/WIM4.1/tp/tp5/ex1/VoirLePUBLIC_HTML
new file mode 100644
index 0000000..e69de29
diff --git a/WIM4.1/tp/tp5/ex1/index.html b/WIM4.1/tp/tp5/ex1/index.html
new file mode 100644
index 0000000..7c26011
--- /dev/null
+++ b/WIM4.1/tp/tp5/ex1/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+
+<html>
+	<head>
+		<title>Riot todo</title>
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<link rel="stylesheet" href="todo.css">
+		<script src="todo.riot" type="riot"></script>
+		<script src="https://cdn.jsdelivr.net/npm/riot@6.1.2/riot+compiler.min.js"></script>
+	</head>
+
+	<body>
+
+		<todo></todo>
+
+		<script>
+			riot.compile().then(() => {
+				riot.mount('todo', {
+					title: 'I want to behave!',
+					items: [
+						{ title: 'Avoid excessive caffeine', done: false },
+						{ title: 'Be less provocative', done: true  },
+						{ title: 'Be nice to people', done: true }
+					]
+				})
+			})
+		</script>
+	</body>
+</html>
diff --git a/WIM4.1/tp/tp5/ex1/todo.css b/WIM4.1/tp/tp5/ex1/todo.css
new file mode 100644
index 0000000..a2848a8
--- /dev/null
+++ b/WIM4.1/tp/tp5/ex1/todo.css
@@ -0,0 +1,84 @@
+
+body {
+  font-family: 'myriad pro', sans-serif;
+  font-size: 20px;
+  border: 0;
+}
+
+todo {
+  display: block;
+  max-width: 600px;
+  margin: 5% auto;
+}
+
+form input {
+  font-size: 85%;
+  padding: .4em;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+}
+
+button {
+  background-color: #1FADC5;
+  border: 1px solid rgba(0,0,0,.2);
+  font-size: 75%;
+  color: #fff;
+  padding: .4em 1.2em;
+  border-radius: 2em;
+  cursor: pointer;
+  margin: 0 .23em;
+  outline: none;
+}
+
+button[disabled] {
+  background-color: #ddd;
+  color: #aaa;
+}
+
+ul {
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+  padding: .2em 0;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: #ccc;
+}
+
+label {
+  cursor: pointer;
+}
+.filters {
+    margin-top: 10px;
+    padding: 0;
+    list-style: none;
+  /*  position: absolute;*/
+    right: 0;
+    left: 0;
+}
+
+.filters li {
+    display: inline;
+}
+
+.filters li a {
+    color: inherit;
+   /* margin: 3px;*/
+	margin-right:10px;
+    padding: 3px 7px;
+    text-decoration: none;
+	font-size : 0.75em;
+    border: 1px solid transparent;
+    border-radius: 3px;
+}
+.filters li a:hover {
+    border-color: rgba(175, 47, 47, 0.1);
+}   
+    
+.filters li a.selected {
+    border-color: rgba(175, 47, 47, 0.2);
+}  
diff --git a/WIM4.1/tp/tp5/ex1/todo.riot b/WIM4.1/tp/tp5/ex1/todo.riot
new file mode 100644
index 0000000..ef1ad42
--- /dev/null
+++ b/WIM4.1/tp/tp5/ex1/todo.riot
@@ -0,0 +1,58 @@
+<todo>
+<h3>{ props.title }</h3>
+
+<ul>
+	<li each={ item in state.items }>
+		<label class={ item.done ? 'completed' : null }>
+			<input
+	   type="checkbox"
+	checked={ item.done }
+	onclick={ () => toggle(item) } />
+	{ item.title } 
+		</label>
+	</li>
+</ul>
+
+<form onsubmit={ add }>
+	<input oninput={ edit } />
+	<button disabled={ !state.text }>
+		Add #{ state.items.length + 1 }
+	</button>
+	<button  onclick={ clear }>Clear done</button>
+	<ul class="filters">
+		<li>  <a href="#">All</a></li>
+		<li>  <a href="#">Active</a></li>
+		<li>  <a href="#">Done</a></li>
+	</ul>
+</form>
+	<script>
+		export default {
+			onBeforeMount(props, state) {
+				// initial state
+				this.state = {
+					items: props.items,
+					text: ''
+				}
+			},
+			edit(e) {
+				// update only the text state
+				this.update({
+					text: e.target.value
+				})
+			},
+			clear(e) {
+				// COMPLETEZ
+			},
+			add(e) {
+				// COMPLETEZ
+				this.idem.push(e)
+				this.update({items:  this.items })
+			},
+			toggle(item) {
+				item.done = !item.done
+				// trigger a component update
+				this.update()
+			}
+		}
+	</script>
+</todo>
