thomas

2025-08-28 14:34:18 +02:00
commit 5ff4c53a10
29 changed files with 1705 additions and 0 deletions
--- a/TP3/EX1/app.js
+++ b/TP3/EX1/app.js
@@ -0,0 +1,42 @@
+import { getMovies } from './model.js';
+
+const searchInput = document.getElementById('searchInput');
+const searchBtn = document.getElementById('searchBtn');
+const movieList = document.getElementById('movie-list');
+
+async function search(searchMovie) {
+  if (searchMovie.trim() === '') {
+    return;
+  }
+  
+  const movies = await getMovies(searchMovie);
+  renderMovies(movies);
+}
+
+function renderMovies(movies) {
+  movieList.innerHTML = '';
+  if (movies.length === 0) {
+    movieList.innerHTML = '<p>Aucun film trouvé.</p>';
+    return;
+  }
+
+  movies.forEach(movie => {
+    const movieCard = document.createElement('div');
+    movieCard.classList.add('movie-card');
+    movieCard.innerHTML = `
+      <h3>${movie.Title} (${movie.Year})</h3>
+      <img src="${movie.Poster !== 'N/A' ? movie.Poster : 'https://via.placeholder.com/200x300.png?text=Pas+d%27image'}" alt="${movie.Title}">
+    `;
+    movieList.appendChild(movieCard);
+  });
+}
+
+searchBtn.addEventListener('click', () => {
+  search(searchInput.value);
+});
+
+searchInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') {
+    search(searchInput.value);
+  }
+});
--- a/TP3/EX1/index.html
+++ b/TP3/EX1/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Recherche de films</title>
+    <style>
+        body { font-family: sans-serif; padding: 20px; }
+        #search-container { margin-bottom: 20px; }
+        #movie-list { display: flex; flex-wrap: wrap; gap: 20px; }
+        .movie-card { width: 200px; border: 1px solid #ccc; padding: 10px; text-align: center; }
+        .movie-card img { max-width: 100%; height: auto; }
+    </style>
+</head>
+<body>
+    <h1>Recherche de films</h1>
+    <div id="search-container">
+        <input type="text" id="searchInput" placeholder="Titre du film...">
+        <button id="searchBtn">Rechercher</button>
+    </div>
+    <div id="movie-list"></div>
+
+    <script type="module" src="app.js"></script>
+</body>
+</html>
--- a/TP3/EX1/model.js
+++ b/TP3/EX1/model.js
@@ -0,0 +1,16 @@
+export async function getMovies(search) {
+  const apiKey = '2fcb2848';
+  const url = `https://www.omdbapi.com/?apikey=${apiKey}&s=${encodeURIComponent(search)}`;
+  
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data.Search || []; // Renvoie un tableau vide si aucun résultat
+  } catch (error) {
+    console.error("Erreur lors de la recherche de films:", error);
+    return [];
+  }
+}