isa44.74/mandalorian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Blandine Bajard 2021-10-19 13:04:58 +02:00
parent 179550874e
commit 8d7069003c
4 changed files with 54 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/imgs/titre.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

10
films.html
View File

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

26
scripts/films.js
View File

@ -1,5 +1,23 @@
const EPISODE4 = document.getElementById('Ep4'); const FILMS = document.getElementById('reponses-films');
const DONNEES = document.getElementById('donnees'); const DEPLIE = document.getElementById ('deploiement-films');
const VAISSEAUX = document.getElementById('vaisseaux');
const PLANETES = document.getElementById('planetes');
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>
`
}
})

32
styles/style.css
View File

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