thomas

2025-08-28 14:34:18 +02:00
commit 5ff4c53a10
29 changed files with 1705 additions and 0 deletions
--- a/TP4/EX2/index.html
+++ b/TP4/EX2/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Recherche de films Riot.js</title>
+    <script src="https://cdn.jsdelivr.net/npm/riot@6.0.1/riot.min.js"></script>
+    <style>
+        body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; }
+        #movie-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
+        .movie-card { width: 200px; border: 1px solid #ccc; padding: 10px; text-align: center; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .movie-card img { max-width: 100%; height: auto; border-radius: 5px; }
+    </style>
+</head>
+<body>
+    <search-app></search-app>
+    <script type="module">
+        import './search-app.riot';
+        riot.mount('search-app');
+    </script>
+</body>
+</html>
--- a/TP4/EX2/search-app.riot
+++ b/TP4/EX2/search-app.riot
@@ -0,0 +1,34 @@
+<search-app>
+    <h1>Recherche de films</h1>
+    <div class="search-container">
+        <input type="text" placeholder="Titre du film..." oninput="{ handleInput }">
+        <button onclick="{ searchMovies }">Rechercher</button>
+    </div>
+
+    <div id="movie-list">
+        <div each="{ movie in state.movies }" class="movie-card">
+            <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 }">
+        </div>
+        <p if="{ !state.movies.length && state.searched }">Aucun film trouvé.</p>
+    </div>
+
+    <script>
+        import { getMovies } from './service.js';
+
+        export default {
+            onMounted() {
+                this.update({ movies: [], searched: false, searchTerm: '' });
+            },
+            
+            handleInput(e) {
+                this.update({ searchTerm: e.target.value });
+            },
+
+            async searchMovies() {
+                const movies = await getMovies(this.state.searchTerm);
+                this.update({ movies, searched: true });
+            }
+        }
+    </script>
+</search-app>
--- a/TP4/EX2/service.js
+++ b/TP4/EX2/service.js
@@ -0,0 +1,13 @@
+export const getMovies = async (search) => {
+    const apiKey = '2fcb2848';
+    const url = `https://www.omdbapi.com/?apikey=${apiKey}&s=${encodeURIComponent(search)}`;
+    
+    try {
+        const response = await fetch(url);
+        const data = await response.json();
+        return data.Search || [];
+    } catch (error) {
+        console.error("Erreur lors de la recherche de films:", error);
+        return [];
+    }
+};