Compare commits

...

63 Commits

Author SHA1 Message Date
William Noris
018f8e558b
Merge pull request #19 from rasoirnoir/dev
Mise en prod
2021-10-20 11:52:03 +02:00
William Noris
0f71011bc1
Merge pull request #18 from rasoirnoir/hotfix1
fix accordeons
2021-10-20 10:53:42 +02:00
William Noris
9773501631 fix accordeons 2021-10-20 10:53:02 +02:00
William Noris
8793fd5c0c
Merge pull request #17 from rasoirnoir/recherche
Recherche
2021-10-20 10:42:32 +02:00
William Noris
ef0745f020
Merge branch 'dev' into recherche 2021-10-20 10:42:25 +02:00
William Noris
326fccc770
Merge pull request #16 from rasoirnoir/characters
pagination ok
2021-10-20 10:39:12 +02:00
William Noris
ab2d327c76
Merge pull request #15 from rasoirnoir/films
Films
2021-10-20 10:38:36 +02:00
William Noris
696a638d56 styles updates 2021-10-20 10:37:54 +02:00
Blandine Bajard
83a006de17 changements index html 2021-10-20 10:34:24 +02:00
William Noris
4f69d290b8 mise en place du formulaire de recherche 2021-10-20 10:17:26 +02:00
Blandine Bajard
0eb7887a96 nettoyage 2021-10-20 10:10:11 +02:00
Blandine Bajard
30bd124835 accordeon qui fonctionne \o/ 2021-10-20 10:07:16 +02:00
HarmandI
5b29b7e155 pagination ok 2021-10-20 09:31:51 +02:00
William Noris
853e03302c
Delete .parcel-cache directory
Saleté de répertoire !!
2021-10-19 22:31:39 +02:00
William Noris
cbc2e4b76e
Merge pull request #14 from rasoirnoir/planets
harmonisation visuelle
2021-10-19 22:30:05 +02:00
rasoirnoir
3a80dd388a
harmonisation visuelle 2021-10-19 22:23:22 +02:00
William Noris
ef38db8421
Merge pull request #13 from rasoirnoir/characters
Characters
2021-10-19 19:30:16 +02:00
William Noris
adc9e4af55
Merge branch 'dev' into characters 2021-10-19 19:29:55 +02:00
William Noris
aa221ed170
Merge pull request #12 from rasoirnoir/films
ajout de laccordeon
2021-10-19 19:28:14 +02:00
William Noris
1c9f4c76dd
Merge pull request #11 from rasoirnoir/planets
Planets
2021-10-19 19:27:38 +02:00
Blandine Bajard
4bd53c7636 ajout de laccordeon 2021-10-19 17:47:47 +02:00
HarmandI
2aedbe985f fin journée 2021-10-19 17:35:33 +02:00
William Noris
3d963a43da fin de journée 2021-10-19 17:35:05 +02:00
HarmandI
ce00336862 Affichage avec url 2021-10-19 17:17:14 +02:00
William Noris
5ab2c33e27 Externalisation des boutons de pagination 2021-10-19 16:47:46 +02:00
William Noris
b32e65c82b Pagination fonctionnelle dans planets 2021-10-19 16:04:18 +02:00
William Noris
8d4456bae6
Merge pull request #10 from rasoirnoir/planets
Planets
2021-10-19 15:27:13 +02:00
William Noris
59e7f0efb2
Merge pull request #9 from rasoirnoir/films
Films
2021-10-19 15:26:42 +02:00
William Noris
769cfcd949
Merge pull request #8 from rasoirnoir/characters
Characters
2021-10-19 15:26:10 +02:00
Blandine Bajard
c01a40a823 changements js et html pour ajouts boutons 2021-10-19 15:23:13 +02:00
William Noris
8b0c617c99 Boutons pagination en cours 2021-10-19 15:23:08 +02:00
HarmandI
deacbaacc0 Affiche les personnage 2021-10-19 15:11:35 +02:00
HarmandI
4ff40f5e9a avancée Json 2021-10-19 13:09:31 +02:00
Blandine Bajard
8d7069003c 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 2021-10-19 13:04:58 +02:00
William Noris
3c9d972b48 Ajout de getPage dans util.js et récupération de la page cournate dans planets.js 2021-10-19 12:37:14 +02:00
William Noris
06d9575d85 récupération des infos et affichage moche 2021-10-19 12:18:53 +02:00
William Noris
be28fdfb21 Chargement des données de l'api 2021-10-19 11:52:12 +02:00
HarmandI
d413ef7ae8 Merge branch 'dev' into characters 2021-10-19 10:38:52 +02:00
Blandine Bajard
179550874e Merge branch 'dev' into films 2021-10-19 10:36:22 +02:00
HarmandI
484c098937 appel API 2021-10-19 10:36:21 +02:00
Blandine Bajard
cc3912c273 ajout de l'image de mando en arriere plan 2021-10-19 10:35:36 +02:00
William Noris
51246d94c2
Merge pull request #7 from rasoirnoir/planets
api_call update
2021-10-19 10:33:24 +02:00
William Noris
91dd72c524 api_call update 2021-10-19 10:31:51 +02:00
Blandine Bajard
49e32dd669 m 2021-10-19 10:02:29 +02:00
Blandine Bajard
009a73b866 lock machin 2021-10-19 09:50:17 +02:00
William Noris
b929d131b8
Merge pull request #6 from rasoirnoir/planets
planet start
2021-10-19 09:49:03 +02:00
William Noris
f5b9fb28de planet start 2021-10-19 09:47:51 +02:00
Blandine Bajard
379420364e maj imgs 2021-10-19 09:24:01 +02:00
Blandine Bajard
fa2503eb1b background css 2021-10-19 09:22:36 +02:00
rasoirnoir
8bb642383d
reorg de simages, ajout d'un catch dans api_call() 2021-10-18 21:27:45 +02:00
William Noris
2cdce319f9
Merge pull request #5 from rasoirnoir/Personnage
Branche d'Isabelle
2021-10-18 20:15:04 +02:00
rasoirnoir
05a642a78b
maj .gitignore 2021-10-18 20:09:06 +02:00
rasoirnoir
a531309915
Merge branch 'films' into dev 2021-10-18 20:08:20 +02:00
rasoirnoir
951d701a8e
Merge branch 'dev' into films 2021-10-18 20:08:06 +02:00
William Noris
62df0c814b
Merge pull request #1 from rasoirnoir/planets
javascript import fix
2021-10-18 17:36:43 +02:00
Blandine Bajard
0cbb591879 changements blandine 2021-10-18 17:33:22 +02:00
William Noris
0cfd054680 javascript import fix 2021-10-18 17:32:20 +02:00
Blandine Bajard
5f3ebce7d0 essais background 2021-10-18 17:17:28 +02:00
Blandine Bajard
80d5ea125f ajout des img background 2021-10-18 16:58:56 +02:00
Blandine Bajard
3ee3ce4340
Create images 2021-10-18 16:54:22 +02:00
Blandine Bajard
77efcd7242
Add files via upload 2021-10-18 16:54:02 +02:00
Blandine Bajard
e0a5c6bbad
Delete images 2021-10-18 16:52:51 +02:00
Blandine Bajard
5b2c9b0aff
Create images 2021-10-18 16:52:13 +02:00
26 changed files with 864 additions and 71952 deletions

2
.gitignore vendored
View File

@ -1,2 +1,4 @@
node_modules/
dist/
.parcel-cache/
.parcel-cache/lock.mdb

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 KiB

BIN
assets/imgs/grogu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

BIN
assets/imgs/mando.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 478 KiB

BIN
assets/imgs/starry_sky.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

BIN
assets/imgs/titre.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

View File

@ -1,12 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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="styles/style.css">
<script src="scripts/personnages.js" defer type="module"></script>
<title>Characters</title>
</head>
<body>
<section class="titre"><a href="index.html">STAR WARS</a></section>
<section class="sec-menu">
@ -15,9 +18,26 @@
<li id="films"><a href="films.html">Films</a></li>
<li id="planets"><a href="planets.html">Planets</a></li>
<li id="characters"><a href="characters.html">Characters</a></li>
</ul>
</nav>
</section>
<section id="recherche">
<form action="" id="formRecherche" onSubmit="event.preventDefault(); console.log('click')">
<label for="textRecherche">Recherche : </label>
<input type="text" name="textRecherche" id="textRecherche">
<input type="submit" value="ok">
</form>
</section>
<section id="resultats" class="accordeon"></section>
<div class="image-charactere"></div>
</body>
</html>

View File

@ -1,12 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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="styles/style.css">
<script src="/scripts/films.js" defer type="module"></script>
<title>Films</title>
</head>
<body>
<section class="titre"><a href="index.html">STAR WARS</a></section>
<section class="sec-menu">
@ -19,5 +22,18 @@
</nav>
</section>
<section id="recherche">
<form action="" id="formRecherche" onSubmit="event.preventDefault(); console.log('click')">
<label for="textRecherche">Recherche : </label>
<input type="text" name="textRecherche" id="textRecherche">
<input type="submit" value="ok">
</form>
</section>
<section id="resultats" class="accordeon">
</section>
<div class="image-films"></div>
</body>
</html>

View File

@ -5,7 +5,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/util.js"></script>
<title>Accueil</title>
</head>
<body>
@ -19,6 +18,9 @@
</ul>
</nav>
</section>
<h1 id = "bienvenue">bienvenue</h1>
<p id = "presentation">Bienvenue sur la Star Wars database,
utilisez le menu pour vous déplacer</p>
</body>
</html>

9271
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -6,16 +6,16 @@
"description": "",
"version": "1.0.0",
"dependencies": {
"abortcontroller-polyfill": "^1.7.3",
"acorn-globals": "^4.3.4",
"acorn": "^6.4.2",
"abab": "^2.0.5",
"abortcontroller-polyfill": "^1.7.3",
"acorn": "^6.4.2",
"acorn-globals": "^4.3.4",
"acorn-walk": "^6.2.0",
"ajv": "^6.12.6",
"ansi-escapes": "^4.3.2",
"alphanum-sort": "^1.0.2",
"ansi-regex": "^5.0.1",
"ansi-escapes": "^4.3.2",
"ansi-html-community": "^0.0.8",
"ansi-regex": "^5.0.1",
"ansi-styles": "^4.3.0",
"array-equal": "^1.0.0",
"array-union": "^2.1.0",
@ -50,28 +50,29 @@
"browserify-sign": "^4.2.1",
"browserify-zlib": "^0.2.0",
"browserslist": "^4.17.4",
"buffer": "^5.7.1",
"buffer-from": "^1.1.2",
"buffer-xor": "^1.0.3",
"builtin-status-codes": "^3.0.0",
"bytes": "^3.0.0",
"buffer": "^5.7.1",
"call-bind": "^1.0.2",
"callsites": "^3.1.0",
"caniuse-api": "^3.0.0",
"caseless": "^0.12.0",
"caniuse-lite": "^1.0.30001269",
"caseless": "^0.12.0",
"chalk": "^4.1.2",
"chrome-trace-event": "^1.0.3",
"cli-cursor": "^3.1.0",
"cipher-base": "^1.0.4",
"cli-cursor": "^3.1.0",
"cli-spinners": "^2.6.1",
"clone": "^2.1.2",
"color-convert": "^2.0.1",
"color-name": "^1.1.4",
"clone": "^2.1.2",
"colord": "^2.8.0",
"command-exists": "^1.2.9",
"combined-stream": "^1.0.8",
"concat-map": "^0.0.1",
"command-exists": "^1.2.9",
"commander": "^7.2.0",
"concat-map": "^0.0.1",
"connect": "^3.7.0",
"console-browserify": "^1.2.0",
"constants-browserify": "^1.0.0",
@ -80,22 +81,22 @@
"core-js": "^3.18.3",
"core-util-is": "^1.0.3",
"cosmiconfig": "^7.0.1",
"create-hash": "^1.2.0",
"create-ecdh": "^4.0.4",
"create-hash": "^1.2.0",
"create-hmac": "^1.1.7",
"cross-spawn": "^6.0.5",
"crypto-browserify": "^3.12.0",
"css-color-names": "^1.0.1",
"css-declaration-sorter": "^6.1.3",
"css-modules-loader-core": "^1.1.0",
"css-selector-tokenizer": "^0.7.3",
"css-select": "^4.1.3",
"css-what": "^5.1.0",
"css-selector-tokenizer": "^0.7.3",
"css-tree": "^1.1.3",
"css-what": "^5.1.0",
"cssesc": "^3.0.0",
"cssnano": "^5.0.8",
"cssnano-utils": "^2.0.1",
"cssnano-preset-default": "^5.1.4",
"cssnano-utils": "^2.0.1",
"csso": "^4.2.0",
"cssom": "^0.3.8",
"cssstyle": "^1.4.0",
@ -107,18 +108,17 @@
"define-properties": "^1.1.3",
"delayed-stream": "^1.0.0",
"des.js": "^1.0.1",
"detect-libc": "^1.0.3",
"diffie-hellman": "^5.0.3",
"dir-glob": "^3.0.1",
"dom-serializer": "^1.3.2",
"buffer-xor": "^1.0.3",
"diffie-hellman": "^5.0.3",
"detect-libc": "^1.0.3",
"domutils": "^2.8.0",
"domain-browser": "^3.5.0",
"domelementtype": "^2.2.0",
"domexception": "^1.0.1",
"domhandler": "^4.2.2",
"domelementtype": "^2.2.0",
"dotenv-expand": "^5.1.0",
"domutils": "^2.8.0",
"dotenv": "^7.0.0",
"dotenv-expand": "^5.1.0",
"ecc-jsbn": "^0.1.2",
"ee-first": "^1.1.1",
"ejs": "^3.1.6",
@ -134,8 +134,8 @@
"es-to-primitive": "^1.2.1",
"es6-object-assign": "^1.1.0",
"escalade": "^3.1.1",
"escape-string-regexp": "^1.0.5",
"escape-html": "^1.0.3",
"escape-string-regexp": "^1.0.5",
"escodegen": "^1.14.3",
"esprima": "^4.0.1",
"estraverse": "^4.3.0",
@ -150,24 +150,24 @@
"fast-json-stable-stringify": "^2.1.0",
"fast-levenshtein": "^2.0.6",
"fast-url-parser": "^1.1.3",
"fastparse": "^1.1.2",
"fastest-levenshtein": "^1.0.12",
"fastparse": "^1.1.2",
"fastq": "^1.13.0",
"fault": "^1.0.4",
"filelist": "^1.0.2",
"fastq": "^1.13.0",
"fill-range": "^7.0.1",
"filesize": "^6.4.0",
"fill-range": "^7.0.1",
"finalhandler": "^1.1.2",
"foreach": "^2.0.5",
"form-data": "^2.3.3",
"follow-redirects": "^1.14.4",
"foreach": "^2.0.5",
"forever-agent": "^0.6.1",
"form-data": "^2.3.3",
"format": "^0.2.2",
"fs.realpath": "^1.0.0",
"function-bind": "^1.1.1",
"get-intrinsic": "^1.1.1",
"gensync": "^1.0.0-beta.2",
"generic-names": "^2.0.1",
"gensync": "^1.0.0-beta.2",
"get-intrinsic": "^1.1.1",
"get-port": "^4.2.0",
"get-symbol-description": "^1.0.0",
"getpass": "^0.1.7",
@ -186,29 +186,29 @@
"has-tostringtag": "^1.0.0",
"hash-base": "^3.1.0",
"hash.js": "^1.1.7",
"hmac-drbg": "^1.0.1",
"highlight.js": "^10.4.1",
"hmac-drbg": "^1.0.1",
"html-encoding-sniffer": "^1.0.2",
"html-tags": "^1.2.0",
"htmlnano": "^1.1.1",
"htmlparser2": "^7.1.2",
"http-proxy": "^1.18.1",
"http-signature": "^1.2.0",
"http-proxy-middleware": "^1.3.1",
"iconv-lite": "^0.4.24",
"http-signature": "^1.2.0",
"https-browserify": "^1.0.0",
"iconv-lite": "^0.4.24",
"icss-replace-symbols": "^1.1.0",
"ieee754": "^1.2.1",
"icss-utils": "^4.1.1",
"ieee754": "^1.2.1",
"iferr": "^1.0.2",
"ignore": "^5.1.8",
"import-fresh": "^3.3.0",
"inflight": "^1.0.6",
"indexes-of": "^1.0.1",
"imurmurhash": "^0.1.4",
"indexes-of": "^1.0.1",
"inflight": "^1.0.6",
"inherits": "^2.0.4",
"is-absolute-url": "^3.0.3",
"internal-slot": "^1.0.3",
"is-absolute-url": "^3.0.3",
"is-arguments": "^1.1.1",
"is-arrayish": "^0.2.1",
"is-bigint": "^1.0.4",
@ -219,8 +219,8 @@
"is-extglob": "^2.1.1",
"is-fullwidth-code-point": "^3.0.0",
"is-generator-function": "^1.0.10",
"is-html": "^1.1.0",
"is-glob": "^4.0.3",
"is-html": "^1.1.0",
"is-interactive": "^1.0.0",
"is-json": "^2.0.1",
"is-nan": "^1.3.2",
@ -242,9 +242,9 @@
"isarray": "^1.0.0",
"isexe": "^2.0.0",
"isstream": "^0.1.2",
"jake": "^10.8.2",
"js-tokens": "^4.0.0",
"jsbn": "^0.1.1",
"jake": "^10.8.2",
"jsdom": "^14.1.0",
"jsesc": "^2.5.2",
"json-parse-even-better-errors": "^2.3.1",
@ -253,8 +253,8 @@
"json-source-map": "^0.6.1",
"json-stringify-safe": "^5.0.1",
"json5": "^1.0.1",
"levn": "^0.3.0",
"jsprim": "^1.4.1",
"levn": "^0.3.0",
"lilconfig": "^2.0.3",
"lines-and-columns": "^1.1.6",
"lmdb-store": "^1.6.9",
@ -269,23 +269,23 @@
"lowlight": "^1.17.0",
"lru-cache": "^6.0.0",
"md5.js": "^1.3.5",
"merge2": "^1.4.1",
"mdn-data": "^2.0.14",
"merge2": "^1.4.1",
"micromatch": "^4.0.4",
"miller-rabin": "^4.0.1",
"mime-db": "^1.33.0",
"mime-types": "^2.1.18",
"miller-rabin": "^4.0.1",
"mimic-fn": "^2.1.0",
"minimalistic-assert": "^1.0.1",
"minimalistic-crypto-utils": "^1.0.1",
"minimatch": "^3.0.4",
"minimist": "^1.2.5",
"mkdirp": "^0.5.5",
"ms": "^2.1.2",
"msgpackr": "^1.4.7",
"msgpackr-extract": "^1.0.14",
"mkdirp": "^0.5.5",
"nanocolors": "^0.1.12",
"nan": "^2.15.0",
"nanocolors": "^0.1.12",
"nanoid": "^3.1.30",
"ncp": "^2.0.0",
"nice-try": "^1.0.5",
@ -294,8 +294,8 @@
"node-gyp-build": "^4.3.0",
"node-releases": "^2.0.0",
"normalize-url": "^6.1.0",
"nullthrows": "^1.1.1",
"nth-check": "^2.0.1",
"nullthrows": "^1.1.1",
"nwsapi": "^2.2.0",
"oauth-sign": "^0.9.0",
"object-inspect": "^1.11.0",
@ -303,8 +303,8 @@
"object-keys": "^1.1.1",
"object.assign": "^4.1.2",
"on-finished": "^2.3.0",
"onetime": "^5.1.2",
"once": "^1.4.0",
"onetime": "^5.1.2",
"open": "^7.4.2",
"optionator": "^0.8.3",
"ora": "^5.4.1",
@ -314,8 +314,8 @@
"parent-module": "^1.0.1",
"parse-asn1": "^5.1.6",
"parse-json": "^5.2.0",
"parseurl": "^1.3.3",
"parse5": "^5.1.0",
"parseurl": "^1.3.3",
"path-browserify": "^1.0.1",
"path-is-absolute": "^1.0.1",
"path-is-inside": "^1.0.2",
@ -326,8 +326,8 @@
"performance-now": "^2.1.0",
"picocolors": "^1.0.0",
"picomatch": "^2.3.0",
"postcss": "^8.3.9",
"pn": "^1.1.0",
"postcss": "^8.3.9",
"postcss-calc": "^8.0.0",
"postcss-colormin": "^5.2.0",
"postcss-convert-values": "^5.0.1",
@ -336,8 +336,8 @@
"postcss-discard-empty": "^5.0.1",
"postcss-discard-overridden": "^5.0.1",
"postcss-merge-longhand": "^5.0.2",
"postcss-minify-font-values": "^5.0.1",
"postcss-merge-rules": "^5.0.2",
"postcss-minify-font-values": "^5.0.1",
"postcss-minify-gradients": "^5.0.2",
"postcss-minify-params": "^5.0.1",
"postcss-minify-selectors": "^5.1.0",
@ -348,41 +348,41 @@
"postcss-modules-values": "^1.3.0",
"postcss-normalize-charset": "^5.0.1",
"postcss-normalize-display-values": "^5.0.1",
"postcss-normalize-positions": "^5.0.1",
"postcss-normalize-repeat-style": "^5.0.1",
"postcss-normalize-string": "^5.0.1",
"postcss-normalize-positions": "^5.0.1",
"postcss-normalize-timing-functions": "^5.0.1",
"postcss-normalize-unicode": "^5.0.1",
"postcss-normalize-url": "^5.0.2",
"postcss-normalize-whitespace": "^5.0.1",
"postcss-ordered-values": "^5.0.2",
"postcss-reduce-initial": "^5.0.1",
"postcss-selector-parser": "^6.0.6",
"postcss-reduce-transforms": "^5.0.1",
"postcss-unique-selectors": "^5.0.1",
"postcss-selector-parser": "^6.0.6",
"postcss-svgo": "^5.0.2",
"posthtml": "^0.16.5",
"postcss-unique-selectors": "^5.0.1",
"postcss-value-parser": "^4.1.0",
"posthtml-render": "^3.0.0",
"posthtml": "^0.16.5",
"posthtml-parser": "^0.10.1",
"posthtml-render": "^3.0.0",
"prelude-ls": "^1.1.2",
"process": "^0.11.10",
"process-nextick-args": "^2.0.1",
"psl": "^1.8.0",
"punycode": "^1.4.1",
"public-encrypt": "^4.0.3",
"qs": "^6.5.2",
"punycode": "^1.4.1",
"purgecss": "^4.0.3",
"querystring-es3": "^0.2.1",
"qs": "^6.5.2",
"querystring": "^0.2.0",
"randombytes": "^2.1.0",
"querystring-es3": "^0.2.1",
"queue-microtask": "^1.2.3",
"randombytes": "^2.1.0",
"randomfill": "^1.0.4",
"range-parser": "^1.2.0",
"react-refresh": "^0.9.0",
"readable-stream": "^2.3.7",
"relateurl": "^0.2.7",
"regenerator-runtime": "^0.13.9",
"relateurl": "^0.2.7",
"request": "^2.88.2",
"request-promise-core": "^1.1.4",
"request-promise-native": "^1.0.9",
@ -399,8 +399,8 @@
"semver": "^5.7.1",
"serve-handler": "^6.1.3",
"setimmediate": "^1.0.5",
"shebang-command": "^1.2.0",
"sha.js": "^2.4.11",
"shebang-command": "^1.2.0",
"shebang-regex": "^1.0.0",
"side-channel": "^1.0.4",
"signal-exit": "^3.0.5",
@ -410,23 +410,23 @@
"source-map-js": "^0.6.2",
"source-map-support": "^0.5.20",
"split2": "^3.2.2",
"sshpk": "^1.16.1",
"srcset": "^4.0.0",
"sshpk": "^1.16.1",
"stable": "^0.1.8",
"stealthy-require": "^1.1.1",
"statuses": "^1.5.0",
"stealthy-require": "^1.1.1",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"string_decoder": "^1.3.0",
"string-hash": "^1.1.3",
"string-width": "^4.2.3",
"string.prototype.trimend": "^1.0.4",
"string.prototype.trimstart": "^1.0.4",
"string-hash": "^1.1.3",
"string_decoder": "^1.3.0",
"strip-ansi": "^6.0.1",
"stylehacks": "^5.0.1",
"supports-color": "^7.2.0",
"svgo": "^2.7.0",
"supports-hyperlinks": "^2.2.0",
"svgo": "^2.7.0",
"symbol-tree": "^3.2.4",
"term-size": "^2.2.1",
"terminal-link": "^2.1.1",
@ -436,26 +436,26 @@
"to-fast-properties": "^2.0.0",
"to-regex-range": "^5.0.1",
"tough-cookie": "^2.5.0",
"tty-browserify": "^0.0.1",
"tr46": "^1.0.1",
"tty-browserify": "^0.0.1",
"tunnel-agent": "^0.6.0",
"tweetnacl": "^0.14.5",
"type-fest": "^0.20.2",
"type-check": "^0.3.2",
"type-fest": "^0.20.2",
"unbox-primitive": "^1.0.1",
"uncss": "^0.17.3",
"uniq": "^1.0.1",
"uniqs": "^2.0.0",
"uri-js": "^4.4.1",
"unpipe": "^1.0.0",
"uri-js": "^4.4.1",
"url": "^0.11.0",
"util": "^0.12.4",
"util-deprecate": "^1.0.2",
"utility-types": "^3.10.0",
"utils-merge": "^1.0.1",
"uuid": "^3.4.0",
"vendors": "^1.0.4",
"v8-compile-cache": "^2.3.0",
"vendors": "^1.0.4",
"verror": "^1.10.0",
"vm-browserify": "^1.1.2",
"w3c-hr-time": "^1.0.2",
@ -463,12 +463,12 @@
"wcwidth": "^1.0.1",
"weak-lru-cache": "^1.1.3",
"webidl-conversions": "^4.0.2",
"whatwg-mimetype": "^2.3.0",
"whatwg-encoding": "^1.0.5",
"whatwg-mimetype": "^2.3.0",
"whatwg-url": "^7.1.0",
"which": "^1.3.1",
"which-typed-array": "^1.1.7",
"which-boxed-primitive": "^1.0.2",
"which-typed-array": "^1.1.7",
"word-wrap": "^1.2.3",
"wrap-ansi": "^7.0.0",
"wrappy": "^1.0.2",

View File

@ -1,13 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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="styles/style.css">
<script src="scripts/planets.js" type="module" defer></script>
<title>Planets</title>
</head>
<body>
<body id="planets">
<section class="titre"><a href="index.html">STAR WARS</a></section>
<section class="sec-menu">
<nav class="nav-menu">
@ -19,5 +22,19 @@
</nav>
</section>
<section id="recherche">
<form action="" id="formRecherche" onSubmit="event.preventDefault(); console.log('click')">
<label for="textRecherche">Recherche : </label>
<input type="text" name="textRecherche" id="textRecherche">
<input type="submit" value="ok">
</form>
</section>
<section id="resultats" class="accordeon">
</section>
</body>
</html>

33
scripts/films.js Normal file
View File

@ -0,0 +1,33 @@
import { api_call } from './util';
const films = document.getElementById("resultats");
const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
function remplissage(EPISODES) {
console.log(EPISODES);
for (index in EPISODES.results) {
films.innerHTML += `
<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
<div class="accordeon_item_body">
<div class="column1">
<p class= "episode">Episode : ${EPISODES.results[index].episode_id}</p>
<p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
<p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
<p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
</div>
</div>
</section>`
}
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader => {
accordeonItemHeader.addEventListener("click", event => {
accordeonItemHeader.classList.toggle("active");
})
})
}
api_call(API_URL, remplissage);

102
scripts/personnages.js Normal file
View File

@ -0,0 +1,102 @@
import { api_call, API_URL, createPagination } from "./util";
const PERSONNAGES = document.getElementById("resultats");
class People {
constructor(birth_year, eye_colo, gender, hair_color, height, mass, skin_color) {
this.birth_year = birth_year;
this.eye_colo = eye_colo;
this.gender = gender;
this.hair_color = hair_color;
this.height = height;
this.mass = mass;
this.skin_color = skin_color;
}
}
console.log('personnage.js loaded');
//api_call(API_URL+"/people", console.log);
// fetch(API_URL+"/people")
// .then(response => {
// return response.json();
// })
// .then(jsonResp => {
// remplissage(jsonResp);
// })
// .catch(error => {
// console.log(`Erreur lors de l'appel API :
// ${error.message}`);
// });
function remplissage(json) {
console.log(json.results[0]);
// api_call(API_URL+ "/planets/1", (response) => {
// console.log(response);
// NAME.innerText = results[i].name;
// });
PERSONNAGES.innerHTML = '';
const PERPAGE = json.results.length;
const previousUrl = json.previous;
const nextUrl = json.next;
console.log(previousUrl);
console.log(nextUrl);
for (let i = 0; i < PERPAGE; i++) {
const urlbirth_year = json.results[i].birth_year;
const urleye_colo = json.results[i].eye_colo;
const urlgender = json.results[i].gender;
const urlhair_color = json.results[i].hair_color;
const urlheight = json.results[i].height;
const urlmass = json.results[i].mass;
const urlskin_color = json.results[i].skin_color;
const urlname = json.results[i].name;
const urlhomeworld = json.results[i].homeworld;
const urlfilms = json.results[i].films;
// const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
// console.log(gens);
//Appel Api pour les planetes :
PERSONNAGES.innerHTML +=
`<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${urlname}</h1>
<div class="accordeon_item_body">
<div class="column1">
<div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
<div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
<div id=genre>Genre : ${urlgender}</div>
<div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
<div id= poids> Poids du personnage : ${urlmass} kg</div>
<div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
</div>
<div class="column2"> Planète de Naissance : ${urlhomeworld}</div>
<div class="column3"> Film je suis présent : ${urlfilms}</div>
</div>
</section>`;
}
//Pagination
createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader => {
accordeonItemHeader.addEventListener("click", event => {
accordeonItemHeader.classList.toggle("active");
});
});
}
api_call(API_URL + "/people", remplissage);
console.log('personnage.js loaded');

55
scripts/planets.js Normal file
View File

@ -0,0 +1,55 @@
import { api_call, API_URL, createPagination } from "./util";
const planetes = document.getElementById("resultats");
function remplissage(results) {
planetes.innerHTML = "";
const previousUrl = results.previous;
const nextUrl = results.next;
const tabResults = results.results;
for (resultPlanet of tabResults) {
const nom = resultPlanet.name;
const diametre = resultPlanet.diameter;
const climate = resultPlanet.climate;
const terrain = resultPlanet.terrain;
const population = resultPlanet.population;
const tabResidents = resultPlanet.residents;
const tabFilms = resultPlanet.films;
planetes.innerHTML +=
`<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${nom}</h1>
<div class="accordeon_item_body">
<div class="column1">
<p>${terrain}</p>
<p>${climate}</p>
<p>${diametre}Km</p>
</div>
<div class="column2">${tabResidents}</div>
<div class="column3">${tabFilms}</div>
</div>
</section>`;
}
//Pagination
createPagination(previousUrl, nextUrl, planetes, remplissage);
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
accordeonItemHeader.forEach(accordeonItemHeader => {
accordeonItemHeader.addEventListener("click", event => {
accordeonItemHeader.classList.toggle("active");
});
});
}
api_call(API_URL + "/planets", remplissage);
console.log('planet.js loaded');

View File

@ -1,18 +1,82 @@
console.log("util.js loaded");
const URL = "https://swapi.dev/api";
export const API_URL = "https://swapi.dev/api";
/**
* Envoie un GET à l'api swappi
* Envoie une requête GET à l'api swappi
* @param {string} endpoint l'endpoint à interroger (ex: planets)
* @param {function} callback La fonction qui traitera la réponse JSON en retour
*/
const api_call = (endpoint, callback) => {
fetch(`${URL}/${endpoint}`)
export const api_call = (url, callback) => {
fetch(url)
.then(response => {
return response.json();
})
.then(jsonResp => {
callback(jsonResp);
})
.catch(error => {
console.log(`Erreur lors de l'appel API :
${error.message}`);
});
}
/**
* Récupère le numéro de la page courante
* @param {string} url l'url d'un résultat multipage (qui se termine par ?page=2 par exemple)
* @returns Le numéro de la page de l'url
*/
const getPage = (url) => {
tabUrl = url.split('/');
pageEgal = tabUrl[tabUrl.length - 1];
tabPageEgal = pageEgal.split('=');
numeroPage = tabPageEgal[tabPageEgal.length - 1];
return numeroPage;
}
/**
* Ajoutes des boutons de pagination à un élément
* @param {string} prevUrl l'url de la page précédente
* @param {string} nextUrl l'url de la page suivante
* @param {object} elementParent L'objet parent dans lequel ajouter les boutons
*/
export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => {
console.log("Url précédente : " + prevUrl);
console.log("Url suivante : " + nextUrl);
const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1);
console.log("Page courante : " + currentPage);
let firstPage = false;
let lastPage = false;
if (prevUrl == null) firstPage = true;
if (nextUrl == null) lastPage = true;
let previousButton = `<button id="prevButton">Page précédente</button>`;
let currentButton = `<span style="color:#ccc;">${currentPage}</span>`;
let nextButton = `<button id="nextButton">Page suivante</button>`;
elementParent.innerHTML += previousButton;
elementParent.innerHTML += currentButton;
elementParent.innerHTML += nextButton;
if(firstPage){
document.getElementById("prevButton").hidden = true;
}
else{
document.getElementById("prevButton").hidden = false;
}
if(lastPage){
document.getElementById("nextButton").hidden = true;
}
else{
document.getElementById("nextButton").hidden = false;
}
document.getElementById("prevButton").addEventListener("click", () => {
api_call(prevUrl, remplissage);
});
document.getElementById("nextButton").addEventListener("click", () => {
api_call(nextUrl, remplissage);
});
}

View File

@ -1,3 +1,8 @@
:root{
--jaune: #ffe81f;
--blanc: #ccc;
}
@font-face {
font-family: 'star-wars';
src: url("../assets/fonts/Starjedi.ttf");
@ -7,25 +12,166 @@
margin: 0;
padding: 0;
font-family: 'star-wars', serif;
/* color: var(--blanc); */
color: #000;
font-size: 16px;
}
button{
color: #000;
padding: 0.2em;
margin: 0.2em;
border-color: var(--jaune);
border-radius: 3%;
}
body{
background-image: url("../assets/imgs/starry_sky.jpg");
font-size: 1em;
}
form label{
margin: 0.5em;
color: var(--blanc);
}
form input{
border-color: var(--jaune);
border-radius: 3%;
padding: 0.3em;
}
.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: var(--jaune);
}
.sec-menu{
margin: 1em;
height: 100%;
}
.ul-menu{
display: flex;
list-style-type: none;
font-size: large;
color : var(--blanc);
}
.ul-menu li{
display: inline;
float: left;
color : var(--blanc);
margin: 1em;
font-size: large;
}
.ul-menu li a{
display: block;
color : var(--blanc);
padding: 5px;
text-align: center;
font-size: large;
text-decoration: none;
border-bottom: 2px solid var(--jaune);
}
.ul-menu li a:hover{
border: 2px solid var(--jaune);
/* border-radius: 10%; */
}
#bienvenue{
text-align: center;
background-color: transparent;
font-size: 100px;
color :var(--jaune) ;
text-decoration: underline;
text-decoration-color: var(--jaune) ;
}
#presentation {
text-align: center;
background-color: transparent;
font-size: 40px;
color :var(--jaune)
}
div.image-films {
background-color: transparent;
width: 30%;
content: url("../assets/imgs/mando.png");
position: absolute;
right: 0px;
top: 0px;
z-index: -1;
}
div.image-charactere {
background-color: transparent;
position: absolute;
right: 0px;
top: 0px;
z-index: -1;
width: 30%;
content: url("../assets/imgs/grogu.png");
}
#reponses-films {
color : var(--blanc);
float: left;
margin-top : 200px;
margin-left:-350px;
}
.accordeon {
color : #000;
margin: 1em;
}
.accordeon_item{
background-color:var(--blanc);
margin:2rem 0;
border-radius: 1rem;
box-shadow: 1px 1px 30px rgb(196, 196, 196) ;
padding-top: 5px;
}
.accordeon_item_header{
padding: 0.5rem 1rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordeon_item_body{
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordeon_item_body_content{
color : #000;
padding: 1.5rem;
line-height: 1.5rem;
}
.column1, .column2, .column3{
padding: 1em;
}
.accordeon_item_header.active + .accordeon_item_body{
max-height: 200px;
}
#planets{
background-image: url("../assets/imgs/backgroung_dead_trooper.jpg");
background-size: cover;
background-position: top;
background-attachment: fixed;
}