page web finit avec les appels au script python mais pas tester encore

4e831dc5 · andre.gouveiad · 29b16e23 · 4e831dc5 · 4e831dc5 · 4e831dc5
Commit 4e831dc5 authored 2 years ago by andre.gouveiad
--- a/front/css/style.css
+++ b/front/css/style.css
+h1 {
+    margin-top: 5%;
+}
+
+.mainStart {
+    display: flex;
+    
+}
+
+.flexChild {
+    flex: 1;
+    margin-top: 5%;
+}
+
+.resTitle {
+    text-align: center;  
+    border: 1px solid black;
+    height: 10%;
+}
+
+body{
+    text-align: center;
+}
\ No newline at end of file
--- a/front/index.html
+++ b/front/index.html
@@ -2,14 +2,22 @@
 <html>
    <head>
    <title>Création Titre de Film</title>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/script.js"></script>
    </head>
    <body>
        <h1>Création de Titre de Film</h1>
-        <p></p>
+        
+        <div class="mainStart">
+            <div class="flexChild input">
+                <h2>Valeur d'entrée</h2>
+                <p>Genre:</p>
                <select name="type" id="type-film">
                    <option value="action">Action</option>
+                    <option value="animation">Animation</option>
                    <option value="aventure">Aventure</option>
                    <option value="comedie">Comédie</option>
+                    <option value="crime">Crime</option>
                    <option value="drame">Drame</option>
                    <option value="fantastique">Fantastique</option>
                    <option value="horreur">Horreur</option>
@@ -17,7 +25,14 @@
                    <option value="science-fiction">Science-Fiction</option>
                    <option value="thriller">Thriller</option>
                </select>
-        <p>Choisir un film</p>
-        <input type="text" name="film" list="films">
+                <p>Description du film</p>
+                <textarea rows="10" cols="50" id="description"></textarea><br>
+                <button id="generate" onclick="getTitle()">Générer</button>
+            </div>
+            <div class="flexChild output">
+                <h2>Résultat de titre généré</h2>
+                <textarea rows="15" cols="50" id="resTitle"></textarea>
+            </div>
+        </div>
    </body>
 </html>
\ No newline at end of file
--- a/project/js/sendData.js
+++ b/project/js/sendData.js
+
+function sendRequest(){
+    var message = "List of " + getElementById('type-film') + " movie titles using keywords: " + getElementById('description');
+
+    return message;
+}
+
+async function getTitle() {
+    var e = document.getElementById("select-number");
+
+    var request = {
+        method: 'POST',
+        body: JSON.stringify(sendRequest()),
+        mode: 'cors'
+    };
+
+    let res = await fetch('http://127.0.0.1:8000/data', request)
+        .then(response => response.json());
+
+    getElementById('resTitle').innerHTML = res;
+}