yolou/BUT2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout des tp

Browse Source
This commit is contained in:
Seri-Khane YOLOU
2026-02-04 17:27:49 +01:00
parent 38d424e819
commit 1ee438d5be
23 changed files with 2308 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
TP_DEV4.1/TP1/Ex1/Exo1S2.js Normal file
View File

@@ -0,0 +1,70 @@
'use strict';
let customers = [
{
'id': 1,
'f_name': 'Abby',
'l_name': 'Thomas',
'gender': 'M',
'married': true,
'age': 32,
'expense': 500,
'purchased': ['Shampoo', 'Toys', 'Book']
},
{
'id': 2,
'f_name': 'Jerry',
'l_name': 'Tom',
'gender': 'M',
'married': true,
'age': 64,
'expense': 100,
'purchased': ['Stick', 'Blade']
},
{
'id': 3,
'f_name': 'Dianna',
'l_name': 'Cherry',
'gender': 'F',
'married': true,
'age': 22,
'expense': 1500,
'purchased': ['Lipstik', 'Nail Polish', 'Bag', 'Book']
},
{
'id': 4,
'f_name': 'Dev',
'l_name': 'Currian',
'gender': 'M',
'married': true,
'age': 82,
'expense': 90,
'purchased': ['Book']
},
{
'id': 5,
'f_name': 'Maria',
'l_name': 'Gomes',
'gender': 'F',
'married': false,
'age': 7,
'expense': 300,
'purchased': ['Toys']
},
{
'id': 6,
'f_name': 'Homer',
'l_name': 'Simpson',
'gender': 'M',
'married': true,
'age': 39,
'expense': 500,
'purchased': ['Book']
}
];
console.log("donnée");
console.table(customers);
const table_seniors = customers.filter(customer=>customers.age>=60);
console.log("Donnée seniors :",table_seniors);

13
TP_DEV4.1/TP1/Ex1/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index.html</title>
</head>
<body>
<script src="Exo1S2.js"></script>
<p>This ia my first page.</p>
</body>
</html>

64
TP_DEV4.1/TP2MVC/controller.js Normal file
View File

@@ -0,0 +1,64 @@
class Controller {
constructor(model, view) {
this.model = model;
this.view = view;
this.filter = "all";
/** Abonnements à la vue **/
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));
/** filtrages par url **/
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) {
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()
}
}
const model = new Model()
const view = new View()
const app = new Controller(model, view)

53
TP_DEV4.1/TP2MVC/index.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Todo</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<h1>To Do List</h1>
</header>
<main>
<article>
<header>
<form id='add_form'>
<fieldset role="group">
<input id="input_todo" type="text" placeholder="Buy milk and eggs...">
<button><i class="fas fa-plus"></i></button>
</fieldset>
<div>
<span>
<a id="active" href="#/active"><i class="far fa-circle"></i></a>
<a id="done" href="#/done"><i class="fas fa-circle"></i></a>
<a id="all" href="#/all"><i class="fas fa-adjust"></i></a>
</span>
<small><span id="count">0</span>/50 characters</small>
</div>
</form>
</header>
<!-- Render todos -->
<ul id="todos_list" class="todolist"></ul>
</article>
</main>
</body>
<script src="js/model.js"></script>
<script src="js/view.js"></script>
<script src="js/controller.js"></script>
</html>

48
TP_DEV4.1/TP2MVC/model.js Normal file
View File

@@ -0,0 +1,48 @@
class Model {
constructor() {
this.todos = JSON.parse(localStorage.getItem('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)
}
edit(id, 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) {
this.todos = this.todos.map(todo =>
todo.id === id ? { id: todo.id, text: todo.text, done: !todo.done } : todo
)
this.#commit(this.todos)
}
}

63
TP_DEV4.1/TP2MVC/style.css Normal file
View File

@@ -0,0 +1,63 @@
:focus-visible {outline:none;}
.is-active {
color : #8EB901;
}
#add_form > div {
display : flex;
justify-content:space-between;
}
.todo {
display : flex;
align-items: center;
}
.todo checkbox,.todo i {
flex-grow : 0;
flex-shrink : 0;
flex-basis : auto;
}
.todo span {
flex-grow : 1;
flex-shrink : 1;
flex-basis : auto;
}
.todolist {
padding-left: 0;
}
.todolist li {
list-style: none;
padding: var(--pico-form-element-spacing-vertical) 0;
display: flex;
justify-content: space-between;
align-items: center;
}
#todos_filter {
display:flex;
justify-content : center;
}
#todos_filter a {
margin:1em;
}
.todolist i {
cursor: pointer;
}
.todolist li:not(:last-child) {
border-bottom: 1.5px solid var(--pico-form-element-border-color);
}
.todolist > li > label:has(input:checked) {
text-decoration: line-through;
}
footer {
text-align: center;
}

BIN
TP_DEV4.1/TP2MVC/todo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

100
TP_DEV4.1/TP2MVC/view.js Normal file
View File

@@ -0,0 +1,100 @@
class View {
charLimit = 70;
constructor() {
this.form = document.querySelector("#add_form")
this.input = document.querySelector("#input_todo")
this.list = document.querySelector("#todos_list")
this.tabs = document.querySelectorAll("#add_form span a")
this.loader = document.querySelector("#loader")
this.count = document.querySelector("#count")
this.input.addEventListener("input", (e) => {
if (e.target.value.length >= this.charLimit) {
e.target.value = e.target.value.substring(0,this.charLimit);
}
count.textContent = e.target.value.length;
});
count.nextSibling.textContent = `/${this.charLimit} characters`
}
#getTodo() {
return this.input.value
}
#resetInput() {
this.input.value = ''
count.textContent = 0
}
#createNewTodoElement(todo){
let li = document.createElement("li")
li.classList.add("todo");
li.dataset.id = todo.id;
let label = document.createElement("label");
let checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = todo.done;
let span = document.createElement("span");
span.textContent = todo.text;
let trash = document.createElement("i");
trash.classList.add("fas","fa-trash");
label.append(checkbox, span);
label.append(label, trash);
return li
}
setFilterTabs(filter){
this.tabs.forEach( tab => {
if (filter === tab.id)
tab.classList.add("is-active")
else
tab.classList.remove("is-active")
})
}
renderTodoList(todos) {
let list = new DocumentFragment()
for (let todo of todos){
list.appendChild(this.#createNewTodoElement(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) {
this.form.addEventListener("click", (e=>{
let id = li.dataset.
}
bindEditTodo(handler) {
// TODO
}
bindToggleTodo(handler) {
// TODO
}
}