Pos		Team	Pld	W	D	L	GF	GA	GD	Pts
Pos		Team	Pld	W	D	L	GF	GA	GD	Pts

Pos

Team

Pld

Pts

Pos

Team

Pld

Pts

+ +

+ + + + + + + +

All
Active
Done

+ +

+ + + + + diff --git a/TP02/EX02/js/app.js b/TP02/EX02/js/app.js new file mode 100644 index 0000000..b97d13a --- /dev/null +++ b/TP02/EX02/js/app.js @@ -0,0 +1,6 @@ +import Controller from './controller.js' +import Model from './model.js' +import View from './view.js' + + +const app = new Controller(new Model(),new View()) diff --git a/TP02/EX02/js/controller.js b/TP02/EX02/js/controller.js new file mode 100644 index 0000000..bb027a8 --- /dev/null +++ b/TP02/EX02/js/controller.js @@ -0,0 +1,54 @@ +export default class Controller { + constructor(model, view) { + this.model = model + this.view = view + this.filter = "all" + this.view.bindAddTodo(this.addTodo.bind(this)) + this.view.bindDeleteTodo(this.deleteTodo.bind(this)) + this.view.bindToggleTodo(this.toggleTodo.bind(this)) + this.view.bindEditTodo(this.editTodo.bind(this)) + + /** Routage **/ + this.routes = ['all','active','done']; + + /** Routage **/ + window.addEventListener("load",this.routeChanged.bind(this)); + window.addEventListener("hashchange",this.routeChanged.bind(this)); + + } + + routeChanged(){ + let route = window.location.hash.replace(/^#\//,''); + this.filter = this.routes.find( r => r === route) || 'all'; + this.filterTodoList(); + + } + + + filterTodoList () { + let todos = this.model.getTodos(this.filter) + this.view.renderTodoList(todos) + this.view.setFilterTabs(this.filter) + } + + addTodo(text) { + let todo = this.model.add(text) + this.filterTodoList() + } + + deleteTodo(id) { + this.model.delete(parseInt(id)) + this.filterTodoList() + } + + toggleTodo(id) { + this.model.toggle(parseInt(id)) + this.filterTodoList() + } + + editTodo(id, text) { + this.model.edit(parseInt(id),text) + this.filterTodoList() + } +} + diff --git a/TP02/EX02/js/model.js b/TP02/EX02/js/model.js new file mode 100644 index 0000000..1ec4285 --- /dev/null +++ b/TP02/EX02/js/model.js @@ -0,0 +1,71 @@ +const todos = [ + { + id : 1, + text : "apprendre le javascript", + done : false + + }, + { + id : 2, + text : "Faire des maths", + done : false + + }] + +export default class Model { + constructor() { + //this.todos = JSON.parse(localStorage.getItem('todos')) || [] + this.todos = JSON.parse(localStorage.getItem('todos')) || todos + } + + _commit(todos) { + localStorage.setItem('todos', JSON.stringify(todos)) + } + + getTodos(filter){ + if (filter == "active") + return this.todos.filter(todo => !todo.done) + if (filter == "done") + return this.todos.filter(todo => todo.done) + + return this.todos + } + + add(todoText) { + const todo = { + id: this.todos.length > 0 ? this.todos[this.todos.length - 1].id + 1 : 1, + text: todoText, + done : false, + } + + this.todos.push(todo) + this._commit(this.todos) + return todo + } + + edit(id, updatedText) { + let todo = this.todos.find(t => t.id === id) + todo.text = updatedText + // this.todos = this.todos.map(todo => + // todo.id === id ? { id: todo.id, text: updatedText, done: todo.done} : todo + // ) + + this._commit(this.todos) + } + + delete(id) { + this.todos = this.todos.filter(todo => todo.id !== id) + + this._commit(this.todos) + } + + toggle(id) { + let todo = this.todos.find(t => t.id === id) + todo.done = !todo.done + //this.todos = this.todos.map(todo => + // todo.id === id ? { id: todo.id, text: todo.text, done: !todo.done } : todo + //) + this._commit(this.todos) + } +} + diff --git a/TP02/EX02/js/view.js b/TP02/EX02/js/view.js new file mode 100644 index 0000000..744f870 --- /dev/null +++ b/TP02/EX02/js/view.js @@ -0,0 +1,115 @@ +export default class View { + constructor() { + this.form = document.querySelector("#add_form") + this.input = document.querySelector("#input_todo") + this.list = document.querySelector("#todos_list") + this.tabs = document.querySelector("#todos_filter") + this.loader = document.querySelector("#loader") + } + + _getTodo() { + return this.input.value + } + + _resetInput() { + this.input.value = '' + } + + _getNewTodoElement(todo){ + let div = document.createElement("div") + div.classList.add("box","is-flex","is-align-items-center","m-2") + div.dataset.id = todo.id + + let input = document.createElement("input") + input.type = "checkbox" + input.classList.add("mr-3") + + let span = document.createElement("p") + span.classList.add("mb-0","is-size-3","mr-auto") + span.textContent = todo.text + span.setAttribute("contenteditable",true) + + + let button = document.createElement("button") + button.classList.add("delete","is-large") + + + if (todo.done){ + span.classList.add("strike") + input.checked = true + } + + div.append(input,span,button) + + return div + + } + + setLoader(){ + this.loader.classList.add("is-loading") + } + unsetLoader(){ + this.loader.classList.remove("is-loading") + } + + setFilterTabs(filter){ + let li = this.tabs.querySelectorAll("li") + li.forEach( tab => { + tab.classList.remove("is-active") + }) + let active = this.tabs.querySelector(`#${filter}`) + active.parentNode.classList.add("is-active") + } + + renderTodoList(todos) { + let list = new DocumentFragment() + for (let todo of todos){ + list.appendChild(this._getNewTodoElement(todo)) + } + this.list.replaceChildren(list) + } + + /** Abonnements événements **/ + + bindAddTodo(handler) { + this.form.addEventListener("submit", (e=>{ + e.preventDefault() + let text = this._getTodo() + handler(text) + this._resetInput() + })) + } + + + bindDeleteTodo(handler) { + // TODO + this.list.addEventListener("click", (e) => { + let selection = e.target; + if (selection.tagName === "BUTTON"){ + let id = selection.parentNode.dataset.id; + handler(id); + } + }); + } + + bindEditTodo(handler) { + this.list.addEventListener("keydown", (e) => { + let selection = e.target; + if (selection.tagName === "P" && e.key === "Enter"){ + let id = selection.parentNode.dataset.id; + let texte = selection.textContent; + handler(id, texte); + } + }); + } + + bindToggleTodo(handler) { + this.list.addEventListener("change", (e) => { + let selection = e.target; + if (selection.tagName === "INPUT"){ + let id = selection.parentNode.dataset.id; + handler(id); + } + }); + } +} diff --git a/TP03/EX01/cookie.html b/TP03/EX01/cookie.html new file mode 100644 index 0000000..893679c --- /dev/null +++ b/TP03/EX01/cookie.html @@ -0,0 +1,26 @@ + + + + + + Cookie clicker + + + +

Cookie clicker

+ + + + +

+ + + diff --git a/TP03/EX01/css/img/bg.jpg b/TP03/EX01/css/img/bg.jpg new file mode 100644 index 0000000..1a45fb8 Binary files /dev/null and b/TP03/EX01/css/img/bg.jpg differ diff --git a/TP03/EX01/css/style.css b/TP03/EX01/css/style.css new file mode 100644 index 0000000..558dd08 --- /dev/null +++ b/TP03/EX01/css/style.css @@ -0,0 +1,63 @@ +@import url(https://fonts.googleapis.com/css?family=Kavoon); + +body { + background-image: url("img/bg.jpg"); + background-repeat: repeat; + font-family: Kavoon; + font-size: 24px; + text-align: center; + color: white; +} + +.container { + max-width: 320px; + margin: auto; +} + +h1 { + font-size: 28px; + background-color: rgba(0, 0, 0, 0.25); + padding: 10px 40px 10px 40px; + border-radius: 10px; +} + +figure { + position: relative; + margin: 0; +} + +figure > span { + position: absolute; + top: 25px; + right: 50px; + border-radius: 21px; + height: 42px; + width: 56px; + background-color: #f4d03f; + box-shadow: 4px 4px 4px black; + padding-top: 9px; +} + +button { + display: block; + width: 100%; + font-family: Kavoon; + font-size: 24px; + background-color: white; + padding: 9px; + border-radius: 10px; + border-width: 0; +} + +p { + text-align: left; +} + +img[alt="GrandMa"] { + float: left; +} + +.hidden { + display: none; +} + diff --git a/TP03/EX01/img/bg.jpg b/TP03/EX01/img/bg.jpg new file mode 100644 index 0000000..1a45fb8 Binary files /dev/null and b/TP03/EX01/img/bg.jpg differ diff --git a/TP03/EX01/img/cookie.png b/TP03/EX01/img/cookie.png new file mode 100644 index 0000000..ee14eee Binary files /dev/null and b/TP03/EX01/img/cookie.png differ diff --git a/TP03/EX01/img/memee.png b/TP03/EX01/img/memee.png new file mode 100644 index 0000000..25a9e08 Binary files /dev/null and b/TP03/EX01/img/memee.png differ diff --git a/TP03/EX01/js/game.js b/TP03/EX01/js/game.js new file mode 100644 index 0000000..04d35c9 --- /dev/null +++ b/TP03/EX01/js/game.js @@ -0,0 +1,48 @@ +var btnStart = document.getElementById("btnStart"); +var scoreView = document.getElementById("score"); +var tempsView = document.getElementById("temps"); +var meme = document.getElementById("meme"); +var cookie = document.getElementById("cookie"); +var score; +var temps; +var isPlayed=false; +var texte = " seconds left!"; +var tailleCookieInitiale = cookie.naturalWidth; + +btnStart.addEventListener('click', start); +cookie.addEventListener('click', clicCookie); + +tempsView.style.color = "red"; + +function start(event){ + if (!isPlayed){ + meme.style.display="block"; + cookie.style.width = tailleCookieInitiale+"px"; + temps = 15; + score = 0; + scoreView.textContent = score; + isPlayed = true; + tempsView.textContent = temps+texte; + setTimeout(second,1000); + } +} + +function clicCookie(event){ + if (isPlayed){ + score ++; + cookie.style.width = (tailleCookieInitiale+score)+"px"; + scoreView.textContent = score; + } +} + +function second(){ + temps --; + tempsView.textContent = temps+texte; + if (temps <= 0){ + isPlayed = false; + meme.style.display="none"; + } + else{ + setTimeout(second,1000); + } +} \ No newline at end of file diff --git a/TP03/EX02/css/style.css b/TP03/EX02/css/style.css new file mode 100644 index 0000000..314c60a --- /dev/null +++ b/TP03/EX02/css/style.css @@ -0,0 +1,11 @@ +img{ + cursor:pointer; +} + +#gagne,#perdu,.hidden{ + display : none; +} + +.progress::-webkit-progress-value { + transition: width 0.5s ease; +} diff --git a/TP03/EX02/images/off.png b/TP03/EX02/images/off.png new file mode 100644 index 0000000..693f597 Binary files /dev/null and b/TP03/EX02/images/off.png differ diff --git a/TP03/EX02/images/on.png b/TP03/EX02/images/on.png new file mode 100644 index 0000000..ff59640 Binary files /dev/null and b/TP03/EX02/images/on.png differ diff --git a/TP03/EX02/js/memory.js b/TP03/EX02/js/memory.js new file mode 100644 index 0000000..70b786d --- /dev/null +++ b/TP03/EX02/js/memory.js @@ -0,0 +1 @@ +// TODO diff --git a/TP03/EX02/memory.html b/TP03/EX02/memory.html new file mode 100644 index 0000000..9595776 --- /dev/null +++ b/TP03/EX02/memory.html @@ -0,0 +1,64 @@ + + + + + + + + + + + + Memory + + + +

Memory

+ +

Règles

+ Pendant une seconde, vous verrez l'état de l'ensemble + des ampoules, puis elles seront éteintes. Vous devrez + alors cliquer sur celles qui étaient allumées. +

+ + + + + + +

Perdu !

Gagné !

+ +

+ Fourmi de Langton +

Simple Array

Add 3 (using map)

Sorted

Filtered (positives values)

Random Array

Min/Max

+ Classement Ligue 1 de football + +
+ + + + +
+

Cookie clicker

Memory

Règles

+ Fourmi de Langton +

Simple Array

Add 3 (using map)

Sorted

Filtered (positives values)

Random Array

Min/Max

+ Classement Ligue 1 de football + + + + + + + +

Cookie clicker

Memory

Règles

+ Classement Ligue 1 de football + +
+ + + + +
+