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

modification sana

This commit is contained in:
Sana EL HIRI 2021-10-20 11:17:57 +02:00
parent 0ae14697c6
commit 44f77589e1
7 changed files with 88 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
css/style.css
View File

@ -1,16 +1,17 @@
@font-face {
font-family: "Montserrat";
src: url("../fonts/Montserrat-Bold.ttf") format("ttf");
src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
}
@font-face {
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.ttf") format("ttf"),
url("../fonts/OpenSans-SemiBold.ttf") format("ttf");
src: url("../fonts/OpenSans-Regular.ttf") format("truetype"),
url("../fonts/OpenSans-SemiBold.ttf") format("truetype");
}
body{
font-family: "Montserrat";
color: #fff;
background-color: #031010;
color: #fff;
text-align: center;
@ -19,12 +20,44 @@ body{
header{
width: 100%;
height: 200px;
text-align: center;
justify-content: center;
position: sticky;
top: 0%;
background-color:#2A4158;
display: flex;
flex-flow: wrap column ;
}
.navAccueil{
nav{
display: flex;
flex-flow: wrap column ;
justify-content: center;
}
.SearchBar{
width: 784px;
height: 46px;
}
ul{
display: flex;
flex-flow: wrap row ;
justify-content: space-evenly;
}
li{
list-style: none;
}
a{
font-family: "Montserrat";
font-size: 18px;
color: #fff;
text-decoration: none;
}
.navSearch{
@ -44,6 +77,13 @@ h2{
}
.details{
display:none;
}
.active{
display: block;
}
.data{
}
@ -60,6 +100,10 @@ p{
}
footer{
background-color: #2A4158;
width: auto;
height: 400px;
background-image:url(../images/footer.png);
background-size: 100% ;
}

13
films.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Films - Star Wars Choubaka</title>
<title>Films - Star Wars Chewbacca</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./scripts/films.js" defer></script>
</head>
@ -18,11 +18,12 @@
<li><a href="planetes.html">Planètes</a></li>
</ul>
</nav>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
</header>
<h1>Films</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<section id="container" style="font-size:12px;">
<section id="container" style="font-size:12px;"></section>
<section class="container" id="container"></section>
@ -32,6 +33,8 @@
<button class="allButtons" name="plus" value="+1"> > </button>
</div>
<footer></footer>
<footer>
</footer>
</body>
</html>

14
index.html
View File

@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=".css/style.css">
<title>Accueil - Star Wars Choubaka</title>
<link rel="stylesheet" href="./css/style.css">
<title>Accueil - Star Wars Chewbacca</title>
</head>
<body>
<header>
@ -18,6 +18,16 @@
</ul>
</nav>
</header>
<div class="presentation">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore<br>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip<br>
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu<br>
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia<br>
deserunt mollit anim id est laborum.<br>
</div>
<footer></footer>
</body>
</html>

19
people.html
View File

@ -4,18 +4,9 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brief Star Wars - People</title>
<title>Personnages - Star Wars Chewbacca</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./scripts/people.js" defer></script>
<style type="text/css">
.details{
display:none;
}
.active{
display: block;
}
</style>
</head>
<body>
<header>
@ -30,7 +21,7 @@
<input type="text" id="myInput" placeholder="Search for names.." class="SearchBar">
</header>
<section id="container" style="font-size:12px;">
<section id="container" class="container">
</section>
@ -40,6 +31,8 @@
<button class="allButtons" name="plus" value="+1"> > </button>
</div>
<footer>
</footer>
</body>
</html>

7
planetes.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Planètes - Star Wars Choubaka</title>
<title>Planètes - Star Wars Chewbacca</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./scripts/planetes.js" defer></script>
</head>
@ -17,6 +17,7 @@
<li><a href="people.html">Personnages</a></li>
<li><a href="planetes.html">Planètes</a></li>
</ul>
</nav>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." class="SearchBar">
</header>
@ -33,6 +34,8 @@
<button class="allButtons" name="plus" value="+1"> > </button>
</div>
<footer></footer>
<footer>
</footer>
</body>
</html>

4
scripts/films.js
View File

@ -96,7 +96,7 @@ async function getStarships(liste,div) {
const VAISSEAUX = await fetch(url[i]);
const VAISSEAU = await VAISSEAUX.json();
document.getElementById(div).innerHTML += `<h3>${VAISSEAU.name}</h3>`;
document.getElementById(div).innerHTML += `<p>${VAISSEAU.name}</p>`;
}
}
@ -108,7 +108,7 @@ async function getSpecies(liste,div){
const ESPECES = await fetch(url[i]);
const ESPECE = await ESPECES.json();
document.getElementById(div).innerHTML += `<h3>${ESPECE.name}</h3>`;
document.getElementById(div).innerHTML += `<p>${ESPECE.name}</p>`;
}
}

18
scripts/planetes.js
View File

@ -2,7 +2,7 @@ const API_URL = "https://swapi.dev/api/planets/?page=";
let pageEnCours = 1;
// function pour afficher les peoples et leur correspondances
// function pour afficher les planetes et leur correspondances
async function getPlanets() {
const PLANETS = await fetch(API_URL+pageEnCours);
const PLANET = await PLANETS.json();
@ -11,7 +11,7 @@ async function getPlanets() {
// on vide le div
document.getElementById('container').innerHTML = "";
// boucle pour parser les peoples
// boucle pour parser les planetes
for(i=0;i<total_pages;i++){
const PLANET_NAME = PLANET.results[i].name;
const ROTATION_PERIOD = PLANET.results[i].rotation_period;
@ -23,17 +23,7 @@ async function getPlanets() {
const SURFACE_WATER = PLANET.results[i].surface_water;
const POPULATION = PLANET.results[i].population;
// boucle pour parser les films
// for(j=0;j<people.results[i].films.length;j++){
// const films = await fetch(people.results[i].films[j]);
// const film = await films.json();
// console.log(film.title);
// movies += `<p>${film.title}</p>`;
// }
document.getElementById('container').innerHTML += `
<section class="card">
<h2>${PLANET_NAME}</h2>
@ -117,7 +107,7 @@ async function getFilms(liste,div) {
const FILM = await FILMS.json();
//console.log(film);
document.getElementById(div).innerHTML += `<h2>${FILM.title}</h2>`;
document.getElementById(div).innerHTML += `<p>${FILM.title}</p>`;
}
@ -135,7 +125,7 @@ async function getResidents(liste,div) {
const RESIDENT = await RESIDENTS.json();
//console.log(film);
document.getElementById(div).innerHTML += `<h2>${RESIDENT.name}</h2>`;
document.getElementById(div).innerHTML += `<p>${RESIDENT.name}</p>`;
}