vincentRamiere/Brief_starWars
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/VincentRamiere/Brief_starWars

Browse Source
This commit is contained in:
HediMjid 2021-10-19 17:40:10 +02:00
commit 43463e2eaf
10 changed files with 80 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
css/style.css
View File

@ -1,47 +1,54 @@
body{ body{
background-color:#2A4158;
background-color: #031010;
color: #fff;
text-align: center;
} }
.header{ header{
width: 100%; width: 100%;
height: 200px;
text-align: center; text-align: center;
margin: 50px;; background-color:#2A4158;
} }
ul{ .navAccueil{
display:flex;
justify-content: center;
} }
li{ .navSearch{
color:#fff;
padding: 10px;
border-radius: 10% 10% 0% 0%;
margin :25px;
list-style: none;
font-size:18px;
} }
.active{ h1{
background-color: #000; font-size: 48px;
} }
.body{ h2{
width:100%;
} }
img{ .card{
width:100%;
height:auto;
} }
a{ .data{
color:#fff;
font-size:18px;
} }
h3{
a:hover{ }
text-decoration: none;
p{
}
.boutons{
}
footer{
background-color: #2A4158;
} }

BIN
fonts/Montserrat-Bold.ttf Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-Regular.ttf Normal file
View File

Binary file not shown.

BIN
fonts/OpenSans-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
images/ban.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
images/footer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 800 KiB

10
index.html
View File

@ -8,6 +8,16 @@
<title>Accueil - Star Wars Choubaka</title> <title>Accueil - Star Wars Choubaka</title>
</head> </head>
<body> <body>
<header>
<nav class="navAccueil">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="films.html">Films</a></li>
<li><a href="people.html">Personnages</a></li>
<li><a href="planetes.html">Planètes</a></li>
</ul>
</nav>
</header>
</body> </body>
</html> </html>

22
planetes.html
View File

@ -9,21 +9,29 @@
<script src="./scripts/planetes.js" defer></script> <script src="./scripts/planetes.js" defer></script>
</head> </head>
<body> <body>
<header>
<nav class="navSearch">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="films.html">Films</a></li>
<li><a href="people.html">Personnages</a></li>
<li><a href="planetes.html">Planètes</a></li>
</ul>
</nav>
</header>
<h1>Planètes</h1> <h1>Planètes</h1>
<section class="container" id="container"> <section class="container" id="container"> <!-- class Css-->
</section> </section>
<div class="boutons"> <div class="boutons"> <!-- class Css-->
<button class="allButtons" name="moins" value="-1"> < </button> <button class="allButtons" name="moins" value="-1"> < </button>
<div id="buttons"></div> <div id="buttons"></div>
<!-- <button name="un" value=1> 1 </button> <button class="allButtons" name="plus" value="+1"> > </button>
<button name="deux" value=2> 2 </button> -->
<button class="allButtons" name="plus" value="+1"> > </button>
</div> </div>
<footer></footer>
</body> </body>
</html> </html>

24
scripts/films.js
View File

@ -17,6 +17,9 @@ async function getMovies() {
const TITRE = FILM.results[i].title; const TITRE = FILM.results[i].title;
const EPISODE = FILM.results[i].episode_id; const EPISODE = FILM.results[i].episode_id;
const OPENING = FILM.results[i].opening_crawl; const OPENING = FILM.results[i].opening_crawl;
const DIRECTOR = FILM.results[i].director;
const PRODUCER = FILM.results[i].producer;
const DATE = FILM.results[i].release_date;
// const planets = await fetch(people.results[i].homeworld); // const planets = await fetch(people.results[i].homeworld);
// const planet = await planets.json(); // const planet = await planets.json();
@ -33,13 +36,24 @@ async function getMovies() {
// movies += `<p>${film.title}</p>`; // movies += `<p>${film.title}</p>`;
// } // }
document.getElementById('container').innerHTML += ` document.getElementById('container').innerHTML += `
<p> <section class="card">
<h2>${TITRE}</h2> <h2>${TITRE}</h2>
<div class="data">
<h3> Episode ID : </h3>
<p>${EPISODE}</p> <p>${EPISODE}</p>
</div>
<div class="data">
<h3> Opening Crawl : </h3>
<p>${OPENING}</p> <p>${OPENING}</p>
<p>${DIRECTOR}</p> </div>
<p>${PRODUCER}</p>
<p>${DATE}</p>
<p>Director : ${DIRECTOR}</p>
<p>Producer(s) : ${PRODUCER}</p>
<p>Release Date : ${DATE}</p>
<button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button> <button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button>
<div id="detailsStarships${i}"></div> <div id="detailsStarships${i}"></div>
@ -47,7 +61,7 @@ async function getMovies() {
<div id="detailsSpecies${i}"></div> <div id="detailsSpecies${i}"></div>
</p> </section>
<hr> <hr>
`; `;
} }

8
scripts/planetes.js
View File

@ -35,9 +35,9 @@ async function getPlanets() {
// movies += `<p>${film.title}</p>`; // movies += `<p>${film.title}</p>`;
// } // }
document.getElementById('container').innerHTML += ` document.getElementById('container').innerHTML += `
<p> <section class="card">
<h2>${PLANET_NAME}</h2> <h2>${PLANET_NAME}</h2>
<div> <div class="data">
<h3>Rotation :</h3> <h3>Rotation :</h3>
<p>${ROTATION_PERIOD}</p> <p>${ROTATION_PERIOD}</p>
</div> </div>
@ -73,8 +73,8 @@ async function getPlanets() {
<div id="detailsFilms${i}"></div> <div id="detailsFilms${i}"></div>
<button class="residents" value="${PLANET.results[i].residents}">Résidents</button> <button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
<div id="detailsResidents${i}"></div> <div id="detailsResidents${i}"></div>
</p> </section>
<hr>
`; `;
} }
const BUTTONS_FILMS = document.querySelectorAll('.films'); const BUTTONS_FILMS = document.querySelectorAll('.films');