TPn°1 A->E

c26fcd06 · Quentin Zanardi · beaf6d26 · c26fcd06 · c26fcd06 · c26fcd06
Commit c26fcd06 authored 2 years ago by Quentin Zanardi
--- a/index.html
+++ b/index.html
@@ -15,6 +15,8 @@
 	<link rel="stylesheet" type="text/css" href="css/footer.css" />
 	<link rel="stylesheet" type="text/css" href="css/gameList.css" />

+	<script src="/src/main.js" defer></script>
+
 </head>
 <body>
 	<header>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "jsteam",
+  "version": "1.0.0",
+  "description": "<img src=\"images/readme/header.jpg\">",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.univ-lille.fr/quentin.zanardi.etu/tp1.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2"
+  }
+}
--- a/src/main.js
+++ b/src/main.js
-console.log('Welcome to JSteam 🎮 !');
\ No newline at end of file
+// const name = window.prompt('Rechercher un jeu');
+// const name = 'Mario Kart 8 Deluxe';
+// const html = renderGameThumbnail(name);
+// document.querySelector('.gameList').innerHTML = html;
+
+
+
+
+
+function renderGameThumbnail(game){
+    const html = `<a href="${game.background_image}">
+                    <img src="${game.background_image}"/>
+                    <footer>
+                        <h3>${game.name}</h3>
+                        <div class="infos">
+                            <time datetime="${game.released}">${game.released}</time>
+                            <span class="metacritic">${game.metacritic}</span>
+                        </div>
+                    </footer>
+                </a>`;
+    return html;
+}
+
+const data = [
+	{
+		name: 'Mario Kart 8 Deluxe',
+		released: '2017-04-27',
+		metacritic: 92,
+		background_image: 'images/mario-kart-8-deluxe.jpg'
+	},
+	{
+		name: 'God of War Ragnarok',
+		released: '2022-11-09',
+		metacritic: 94,
+		background_image: 'images/god-of-war-ragnarok.jpg',
+	},
+	{
+		name: 'The Last of Us Part 2',
+		released: '2020-06-19',
+		metacritic: 94,
+		background_image: 'images/the-last-of-us-part-2.jpg'
+	},
+];
+
+for(let i=0 ; i<data.length ; i++){
+    html = renderGameThumbnail(data[i]);
+    document.querySelector('.gameList').innerHTML += html;
+}
+
+data.forEach(element => document.querySelector('.gameList').innerHTML += renderGameThumbnail(element));