William Noris
GitHub
commit
018f8e558b
|
|
@ -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 |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 478 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
|
|
@ -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>
|
||||
48
films.html
48
films.html
|
|
@ -1,23 +1,39 @@
|
|||
<!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">
|
||||
<title>Films</title>
|
||||
<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">
|
||||
<nav class="nav-menu">
|
||||
<ul class="ul-menu">
|
||||
<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 class="titre"><a href="index.html">STAR WARS</a></section>
|
||||
<section class="sec-menu">
|
||||
<nav class="nav-menu">
|
||||
<ul class="ul-menu">
|
||||
<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-films"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
140
package.json
140
package.json
|
|
@ -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",
|
||||
|
|
|
|||
21
planets.html
21
planets.html
|
|
@ -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">
|
||||
|
|
@ -18,6 +21,20 @@
|
|||
</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>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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);
|
||||
|
|
@ -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 où 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');
|
||||
|
|
@ -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');
|
||||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
152
styles/style.css
152
styles/style.css
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue