thomas
This commit is contained in:
62
TP2/EX0/simpsons.html
Normal file
62
TP2/EX0/simpsons.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Les Simpson</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Membres des familles Simpson</h1>
|
||||
<div id="characters-container"></div>
|
||||
|
||||
<script>
|
||||
let characters = [
|
||||
{"id":"1","nom":"Simpson","prenom":"Homer","age":"38"},
|
||||
{"id":"2","nom":"Simpson","prenom":"Marge","age":"34"},
|
||||
{"id":"3","nom":"Simpson","prenom":"Bart","age":"10"},
|
||||
{"id":"4","nom":"Simpson","prenom":"Lisa","age":"8"},
|
||||
{"id":"5","nom":"Simpson","prenom":"Maggie","age":"1"},
|
||||
{"id":"6","nom":"Flanders","prenom":"Ned","age":"60"},
|
||||
{"id":"7","nom":"Flanders","prenom":"Todd","age":"8"},
|
||||
{"id":"8","nom":"Flanders","prenom":"Rod","age":"10"},
|
||||
{"id":"9","nom":"Van Houten","prenom":"Kirk","age":null},
|
||||
{"id":"10","nom":"Van Houten","prenom":"Milhouse","age":null},
|
||||
{"id":"11","nom":"Van Houten","prenom":"Luann","age":null},
|
||||
{"id":"12","nom":"Muntz","prenom":"Nelson","age":null},
|
||||
{"id":"13","nom":"Muntz","prenom":"Véronica","age":null},
|
||||
{"id":"14","nom":"Muntz","prenom":"Thomas Jr","age":null},
|
||||
{"id":"15","nom":"Lovejoy","prenom":"Timothy","age":null},
|
||||
{"id":"16","nom":"Burns","prenom":"Charles","age":null}
|
||||
];
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const container = document.getElementById('characters-container');
|
||||
const families = {};
|
||||
|
||||
// Regrouper les personnages par nom de famille
|
||||
characters.forEach(char => {
|
||||
if (!families[char.nom]) {
|
||||
families[char.nom] = [];
|
||||
}
|
||||
families[char.nom].push(char);
|
||||
});
|
||||
|
||||
// Créer et ajouter les éléments HTML
|
||||
for (const family in families) {
|
||||
const familyTitle = document.createElement('h2');
|
||||
familyTitle.textContent = family;
|
||||
container.appendChild(familyTitle);
|
||||
|
||||
const familyList = document.createElement('ul');
|
||||
families[family].forEach(char => {
|
||||
const memberItem = document.createElement('li');
|
||||
const age = char.age !== null ? `(${char.age} ans)` : '';
|
||||
memberItem.textContent = `${char.prenom} ${age}`;
|
||||
familyList.appendChild(memberItem);
|
||||
});
|
||||
container.appendChild(familyList);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
73
TP2/EX1/lights.html
Normal file
73
TP2/EX1/lights.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Lights Out</title>
|
||||
<style>
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 50px);
|
||||
gap: 5px;
|
||||
margin: 20px;
|
||||
}
|
||||
.light {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #ddd;
|
||||
border: 1px solid #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.light.on {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Lights Out</h1>
|
||||
<div class="grid-container" id="game-grid"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const gridSize = 5;
|
||||
const gameGrid = document.getElementById('game-grid');
|
||||
|
||||
// Créer la grille de lumières
|
||||
for (let i = 0; i < gridSize * gridSize; i++) {
|
||||
const light = document.createElement('div');
|
||||
light.classList.add('light');
|
||||
light.dataset.id = i;
|
||||
gameGrid.appendChild(light);
|
||||
}
|
||||
|
||||
const lights = document.querySelectorAll('.light');
|
||||
|
||||
gameGrid.addEventListener('click', event => {
|
||||
const target = event.target;
|
||||
if (!target.classList.contains('light')) return;
|
||||
|
||||
const id = parseInt(target.dataset.id);
|
||||
const row = Math.floor(id / gridSize);
|
||||
const col = id % gridSize;
|
||||
|
||||
// Fonction pour basculer une lumière
|
||||
const toggleLight = (index) => {
|
||||
if (index >= 0 && index < lights.length) {
|
||||
lights[index].classList.toggle('on');
|
||||
}
|
||||
};
|
||||
|
||||
// Basculer la lumière cliquée
|
||||
toggleLight(id);
|
||||
|
||||
// Basculer les voisins
|
||||
if (col > 0) toggleLight(id - 1); // Gauche
|
||||
if (col < gridSize - 1) toggleLight(id + 1); // Droite
|
||||
if (row > 0) toggleLight(id - gridSize); // Haut
|
||||
if (row < gridSize - 1) toggleLight(id + gridSize); // Bas
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
89
TP2/EX2/classement_ligue1.html
Normal file
89
TP2/EX2/classement_ligue1.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Classement Ligue 1</title>
|
||||
<style>
|
||||
table {
|
||||
width: 80%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px auto;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
cursor: pointer;
|
||||
}
|
||||
input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Classement Ligue 1 2022-2023</h1>
|
||||
<input type="text" id="searchInput" placeholder="Rechercher une équipe...">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="rankHeader">Rang</th>
|
||||
<th></th>
|
||||
<th>Équipe</th>
|
||||
<th>Buts Pour</th>
|
||||
<th>Buts Contre</th>
|
||||
<th>Points</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script src="data.js"></script>
|
||||
<script>
|
||||
const tbody = document.getElementById('table-body');
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const rankHeader = document.getElementById('rankHeader');
|
||||
|
||||
function renderTable(dataToRender) {
|
||||
tbody.innerHTML = '';
|
||||
dataToRender.forEach(team => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${team.intRank}</td>
|
||||
<td><img src="${team.strTeamBadge}" alt="${team.strTeam}" width="30"></td>
|
||||
<td>${team.strTeam}</td>
|
||||
<td>${team.intGoalsFor}</td>
|
||||
<td>${team.intGoalsAgainst}</td>
|
||||
<td>${team.intPoints}</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
// Tri par rang
|
||||
rankHeader.addEventListener('click', () => {
|
||||
data.sort((a, b) => parseInt(a.intRank) - parseInt(b.intRank));
|
||||
renderTable(data);
|
||||
});
|
||||
|
||||
// Recherche par nom d'équipe
|
||||
searchInput.addEventListener('input', (event) => {
|
||||
const searchTerm = event.target.value.toLowerCase();
|
||||
const filteredData = data.filter(team => team.strTeam.toLowerCase().includes(searchTerm));
|
||||
renderTable(filteredData);
|
||||
});
|
||||
|
||||
// Affichage initial
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderTable(data);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
65
TP2/EX3/View.js
Normal file
65
TP2/EX3/View.js
Normal file
@@ -0,0 +1,65 @@
|
||||
class View {
|
||||
constructor() {
|
||||
this.app = document.getElementById('root');
|
||||
this.form = this.app.querySelector('.todo-form');
|
||||
this.input = this.form.querySelector('.todo-input');
|
||||
this.todoList = this.app.querySelector('.todo-list');
|
||||
this.filterTabs = this.app.querySelector('.tabs');
|
||||
}
|
||||
|
||||
// ... autres méthodes de la classe View
|
||||
|
||||
bindAddTodo(handler) {
|
||||
this.form.addEventListener('submit', event => {
|
||||
event.preventDefault();
|
||||
const text = this.input.value.trim();
|
||||
if (text !== '') {
|
||||
handler(text);
|
||||
this.input.value = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bindDeleteTodo(handler) {
|
||||
this.todoList.addEventListener('click', event => {
|
||||
if (event.target.classList.contains('delete-button')) {
|
||||
const id = parseInt(event.target.closest('li').dataset.id);
|
||||
handler(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bindToggleTodo(handler) {
|
||||
this.todoList.addEventListener('click', event => {
|
||||
if (event.target.type === 'checkbox') {
|
||||
const id = parseInt(event.target.closest('li').dataset.id);
|
||||
handler(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bindEditTodo(handler) {
|
||||
// Événement 'blur' pour détecter la fin de l'édition d'une tâche
|
||||
this.todoList.addEventListener('blur', event => {
|
||||
if (event.target.classList.contains('editable-text')) {
|
||||
const id = parseInt(event.target.closest('li').dataset.id);
|
||||
const newText = event.target.textContent.trim();
|
||||
handler(id, newText);
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
|
||||
// Méthode pour le double-clic
|
||||
bindDoubleClickTodo(handler) {
|
||||
this.todoList.addEventListener('dblclick', event => {
|
||||
const li = event.target.closest('li');
|
||||
if (li) {
|
||||
const textElement = li.querySelector('.editable-text');
|
||||
if (textElement) {
|
||||
textElement.contentEditable = true;
|
||||
textElement.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user