game loading works 😎

index.html

@@ -41,6 +41,7 @@
 		<p>Welcome to the new and updated e-gamepass!</p>
 		<p class="uploadResult" style="font-size:20px"></p>
 		<br>
+		<div id="games"></div>
   </div>
   </body>
 </html>

js/games.js

@@ -1,5 +1,16 @@
 $.getJSON("/games.json", function (data) {
     for (let i = 0; i < data.length; i++) {
-        console.log(data[i].name);
+        $('#games').append(
+            $('<div>').prop({
+                id: 'game',
+                style: 'cursor: pointer;'
+            }).append(
+                $('<img>').prop({
+                    src: data[i].directory + "/" + data[i].image
+                })
+            ).append(
+                $('<h1>').text(data[i].name)
+            )
+        );
     } 
 })

style.css

@@ -39,7 +39,7 @@ button:hover {
     color: #0073e6;
   }
   
-.game {
+#game {
   width: 10%;
   display: inline-block;
   background-color: rgba(83, 118, 235, 0.4);
@@ -51,17 +51,17 @@ button:hover {
 
 }
 
-.game:hover {
+#game:hover {
   background-color: rgba(113, 142, 238, 0.6);
   transform: scale(1.1);
   box-shadow: 0px 0px 5px 5px rgba(113, 142, 238, 0.6);
 }
 
-.game h1 {
-  font-size: 0.7em;
+#game h1 {
+  font-size: 0.85em;
   color: rgb(149, 186, 241)
 }
-.game img {
+#game img {
   width: 100%;
   height: 100%;
   border-radius: 10%;