changements CSS pour titre et menu/dans films affichage des titres des films/dans html ajout des class et section pour lien css et js

films.html

@@ -19,12 +19,8 @@
             </ul>
         </nav>
     </section>
-    <div class = "image-films">
-<div id = "Ep4">
-    <div id="donnees"></div>
-    <div id="vaisseaux"></div>
-    <div id="planetes"></div>
-</div>
-</div>
+    <section id = "reponses-films"> </section>
+    <button id = "deploiement-films">Click pour le détail</button>
+    <div class = "image-films"></div>
 </body>
 </html>

scripts/films.js

@@ -1,5 +1,23 @@
-const EPISODE4 = document.getElementById('Ep4');
-const DONNEES = document.getElementById('donnees');
-const VAISSEAUX = document.getElementById('vaisseaux');
-const PLANETES = document.getElementById('planetes');
+const FILMS = document.getElementById('reponses-films');
+const DEPLIE = document.getElementById ('deploiement-films');
 
+console.log(FILMS);
+
+const API_URL = "https://swapi.dev/api/films/";
+fetch(API_URL)
+.then((response) => {
+    console.log(response);
+    return response.json();
+})
+.then(afficherFilms => {
+    console.log(afficherFilms);
+    for(let index = 0; index <6; index++){
+        console.log(afficherFilms.results[index]);
+        const EPISODES = afficherFilms.results[index];
+        console.log(EPISODES);
+    
+        FILMS.innerHTML +=`
+        <p class= "titre">${EPISODES.title}</p>
+    `
+    }
+})

styles/style.css

@@ -7,27 +7,42 @@
     margin: 0;
     padding: 0;
     font-family: 'star-wars', serif;
+    color : #FFF;
 }
 
 .titre a{
-    text-decoration: none;
+    margin-top : 20px;
+    background-color: transparent;
+    width: 25%;
+    content: url("../assets/imgs/titre.png");
+    font-size: xx-large;
+    text-decoration: underline;
+    text-decoration-color: #ffe81f;
 }
 
 .ul-menu{
     list-style-type: none;
+    font-size: large;
+    text-decoration: underline;
+    text-decoration-color: #ffe81f;
 }
 
 .ul-menu li{
     display: inline;
     float: left;
     margin: 1em;
+    font-size: large;
+    text-decoration: underline;
+    text-decoration-color: #ffe81f;
 }
 
 .ul-menu li a{
     display: block;
     padding: 5px;
     text-align: center;
-    text-decoration: none;
+    font-size: large;
+    text-decoration: underline;
+    text-decoration-color: #ffe81f;
 }
 
 body{
@@ -36,9 +51,20 @@ body{
 
 div.image-films {
     background-color: transparent;
-    margin-top: 20px;
+    margin-top: -170px;
     margin-left: auto;
     width: 30%;
     content: url("../assets/imgs/mando.png");
 
 }
+#reponses-films {
+    color : #FFF;
+    float: left; 
+    margin-top : 200px;
+}
+
+#deploiement-films {
+    color : #000;
+    float: left; 
+    margin-top : 200px;
+}