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

modification sana

Browse source
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-face {
font-family: "Montserrat"; font-family: "Montserrat";
src: url("../fonts/Montserrat-Bold.ttf") format("ttf"); src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: "OpenSans"; font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.ttf") format("ttf"), src: url("../fonts/OpenSans-Regular.ttf") format("truetype"),
url("../fonts/OpenSans-SemiBold.ttf") format("ttf"); url("../fonts/OpenSans-SemiBold.ttf") format("truetype");
} }
body{ body{
font-family: "Montserrat";
color: #fff;
background-color: #031010; background-color: #031010;
color: #fff; color: #fff;
text-align: center; text-align: center;
@ -19,12 +20,44 @@ body{
header{ header{
width: 100%; width: 100%;
height: 200px; height: 200px;
text-align: center; justify-content: center;
position: sticky;
top: 0%;
background-color:#2A4158; 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{ .navSearch{
@ -44,6 +77,13 @@ h2{
} }
.details{
display:none;
}
.active{
display: block;
}
.data{ .data{
} }
@ -60,6 +100,10 @@ p{
} }
footer{ footer{
background-color: #2A4158; width: auto;
height: 400px;
background-image:url(../images/footer.png);
background-size: 100% ;
} }

15
films.html
View file

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

14
index.html
View file

@ -4,8 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=".css/style.css"> <link rel="stylesheet" href="./css/style.css">
<title>Accueil - Star Wars Choubaka</title> <title>Accueil - Star Wars Chewbacca</title>
</head> </head>
<body> <body>
<header> <header>
@ -19,5 +19,15 @@
</nav> </nav>
</header> </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> </body>
</html> </html>

17
people.html
View file

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

7
planetes.html
View file

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

4
scripts/films.js
View file

@ -96,7 +96,7 @@ async function getStarships(liste,div) {
const VAISSEAUX = await fetch(url[i]); const VAISSEAUX = await fetch(url[i]);
const VAISSEAU = await VAISSEAUX.json(); 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 ESPECES = await fetch(url[i]);
const ESPECE = await ESPECES.json(); 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; let pageEnCours = 1;
// function pour afficher les peoples et leur correspondances // function pour afficher les planetes et leur correspondances
async function getPlanets() { async function getPlanets() {
const PLANETS = await fetch(API_URL+pageEnCours); const PLANETS = await fetch(API_URL+pageEnCours);
const PLANET = await PLANETS.json(); const PLANET = await PLANETS.json();
@ -11,7 +11,7 @@ async function getPlanets() {
// on vide le div // on vide le div
document.getElementById('container').innerHTML = ""; document.getElementById('container').innerHTML = "";
// boucle pour parser les peoples // boucle pour parser les planetes
for(i=0;i<total_pages;i++){ for(i=0;i<total_pages;i++){
const PLANET_NAME = PLANET.results[i].name; const PLANET_NAME = PLANET.results[i].name;
const ROTATION_PERIOD = PLANET.results[i].rotation_period; const ROTATION_PERIOD = PLANET.results[i].rotation_period;
@ -24,16 +24,6 @@ async function getPlanets() {
const POPULATION = PLANET.results[i].population; 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 += ` document.getElementById('container').innerHTML += `
<section class="card"> <section class="card">
<h2>${PLANET_NAME}</h2> <h2>${PLANET_NAME}</h2>
@ -117,7 +107,7 @@ async function getFilms(liste,div) {
const FILM = await FILMS.json(); const FILM = await FILMS.json();
//console.log(film); //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(); const RESIDENT = await RESIDENTS.json();
//console.log(film); //console.log(film);
document.getElementById(div).innerHTML += `<h2>${RESIDENT.name}</h2>`; document.getElementById(div).innerHTML += `<p>${RESIDENT.name}</p>`;
} }