Merge pull request #15 from GSG-G10/10-send-request-on-load-page

10 send request on load page

public/assest/js/dom.js

@@ -0,0 +1,19 @@
+const firstPopularPhoto = document.querySelector('.first-pop');
+const secondePopularPhoto = document.querySelector('.seconde-pop');
+const thirdPopularPhoto = document.querySelector('.third-pop');
+const fourthPopularPhoto = document.querySelector('.fourth-pop');
+const onLoadPage = (() => {
+  const changePopularImages = () => {
+    fetch('/popImages')
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data[0]);
+        firstPopularPhoto.src = data[0].thumbnail;
+        secondePopularPhoto.src = data[1].thumbnail;
+        thirdPopularPhoto.src = data[2].thumbnail;
+        fourthPopularPhoto.src = data[3].thumbnail;
+      })
+      .catch((err) => err);
+  };
+  changePopularImages();
+})();

src/app.js

@@ -19,8 +19,22 @@ app.get('/', (req, res) => {
   res.sendFile(path.join(__dirname, '..', 'public', 'index.html'));
 });
 
-app.get('/', (req, res) => {
-  res.sendFile(path.join(__dirname, '..', 'public', 'index.html'));
+const API_KEY = {
+  headers: {
+    'x-rapidapi-key': '469c1ee794msh8a7c6f3db2abd58p1e322ejsn1ead0ede256f',
+    'x-rapidapi-host': 'free-to-play-games-database.p.rapidapi.com',
+  },
+};
+app.get('/popImages', (req, res) => {
+  axios.request('https://free-to-play-games-database.p.rapidapi.com/api/games?sort-by=alphabetical', API_KEY)
+    .then((response) => response)
+    .then((response) => res.send([
+      response.data[0],
+      response.data[1],
+      response.data[2],
+      response.data[3],
+    ]))
+    .catch((err) => res.send(err.message));
 });
 
 app.use(error404);