code-differently · kimlai07 · Feb 10, 2021 · Feb 11, 2021 · Feb 11, 2021 · Feb 11, 2021
diff --git a/imgs/25.png b/imgs/25.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
   },
   "homepage": "https://github.com/code-differently/Pokedex-App#readme",
   "dependencies": {
-    "express": "^4.17.1"
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
+    "node-fetch": "^2.6.1"
   }
 }
diff --git a/rest/index.js b/rest/index.js
@@ -1,11 +1,36 @@
-const express = require('express')
+const express = require('express');
+const fetch = require('node-fetch');
+const cors = require("cors");
+
 const app = express()
-const port = 3000
+app.use(cors())
+const port = 4000
+
+
 
-app.get('/', (req, res) => {
-  res.send('Hello World!')
+app.get('/all/:count', async (req, response) => {
+  const count = req.params.count;
+  fetch(`https://pokeapi.co/api/v2/pokemon?limit=${count}&offset=0`)
+    .then((res) => res.json())
+    .then((allThePokemon) => {
+        const requestsToMake = allThePokemon.results.map(({ url }) =>
+          fetch(url).then((res) => res.json())
+        );
+        return Promise.all(requestsToMake);
+      })
+    .then(data => {
+      let responseResult = [];
+      for( let i = 0; i < count; i++){
+        let responseObject = { id: data[i].id, name: data[i].name, type: data[i].types[0].type.name, image: data[i].sprites.front_default};
+        responseResult.push(responseObject);
+      }
+      response.json(responseResult);
+    })
+  .catch(err => console.error(err));
 })
 
+
+
 app.listen(port, () => {
   console.log(`Example app listening at http://localhost:${port}`)
 })
diff --git a/web/index.html b/web/index.html
@@ -1,11 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <p>Hello Pokemon!</p>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pokedex</title>
+    <link rel="stylesheet" href="pokemon.css">
+  </head>
+  <body>
+    <h1>Pokedex</h1>
+
+    <div class="pButton">
+      <label for="numberOfPokemons">Number of Pokemons:</label>
+      <input type="text" id="numberOfPokemons" name="numberOfPokemons">
+      <button>Select</button>
+    </div>
+
+      <div class="container col"></div>
+
+    <script src="index.js" async></script>
+  </body>
+</html>
diff --git a/web/index.js b/web/index.js
@@ -0,0 +1,34 @@
+const button = document.querySelector("button");
+const inputText = document.querySelector("#numberOfPokemons");
+const container = document.querySelector(".container");
+
+button.addEventListener("click", () => {
+    let input = inputText.value;
+   fetch(`http://localhost:4000/all/${input}`)
+     .then((res) => res.json())
+     .then((pokemon) => {
+
+      pokemon.map(i =>showPokemon(i.id, i.name, i.type, i.image));
+
+     });
+ });
+
+
+function showPokemon(id, name, type, image){
+
+  let div = document.createElement('div');
+  let divInnerHtml = 
+  `<div class="card">  
+    <div class="container">
+    <div class="row">
+      <h4 class="pName">${name}</h4>    
+      <h4 class="pNum">#${id}</h4>
+      <div class="line"></div>
+    </div>
+    <img src="${image}";
+  </div>
+</div>`
+  div.innerHTML = divInnerHtml;
+  div.classList.add(type);
+  container.appendChild(div);
+}
diff --git a/web/pokemon.css b/web/pokemon.css
@@ -0,0 +1,148 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box
+}
+
+h1 {
+    font-size: 4rem;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+    text-align: center;
+    text-shadow: 0 1px 0 #ccc,
+                 0 2px 0 #c9c9c9,
+                 0 3px 0 #bbb,
+                 0 4px 0 #b9b9b9,
+                 0 5px 0 #aaa,
+                 0 6px 1px rgba(0,0,0,.1),
+                 0 0 5px rgba(0,0,0,.1),
+                 0 1px 3px rgba(0,0,0,.3),
+                 0 3px 5px rgba(0,0,0,.2),
+                 0 5px 10px rgba(0,0,0,.25),
+                 0 10px 10px rgba(0,0,0,.2),
+                 0 20px 20px rgba(0,0,0,.15);
+}
+
+.container {
+    display: grid;
+    margin:1rem;
+    justify-content: space-evenly;
+    grid-gap: 1.5rem;
+}
+
+.col {
+    grid-template-columns: auto auto auto auto;
+}
+
+.pButton {
+   margin-left: 3rem;
+   margin-bottom: 5rem;
+}
+
+img {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    padding-bottom: 2rem;
+    border-style:solid;
+}
+
+h4.pName {
+    display: float;
+    float: left;
+    padding-right: 2rem;
+    font-weight: bold;
+}
+
+h4.pNum {
+    display: float;
+    float: right;
+    padding-left: 2rem;
+    font-weight: bold;  
+}
+
+.line {
+    height: 1.75rem;
+    border-bottom: .1rem solid lightgrey;
+    border-bottom-width: 90%;
+}
+
+/* label {
+    margin-right: 2rem;
+} */
+
+.bug { 
+    background-color: #3b9950; 
+}
+
+.dark { 
+    background-color: #5a5979; 
+}
+
+.dragon { 
+    background-color: #61cad9; 
+}
+
+.electric  {
+    background-color: #fbfb71; 
+}
+
+.fairy { 
+    background-color: #ea1169; 
+}
+
+.fighting  {
+    background-color: #ef6138; 
+}
+
+
+.fire  {
+    background-color: #fd4c59; 
+}
+
+.flying  {
+    background-color: #93b2c7; 
+}
+
+.ghost  {
+    background-color: #906790; 
+}
+
+.grass  {
+    background-color: #26cb4f; 
+}
+
+.ground  {
+    background-color: #6e491f; 
+}
+
+.ice  {
+    background-color: #d9eefa; 
+}
+
+.normal  {
+    background-color: #c998a7; 
+}
+
+.poison { 
+    background-color: #9b69d8; 
+}
+
+.psychic  {
+    background-color: #f71c91; 
+}
+
+.rock  {
+    background-color: #8a3d22; 
+}
+
+.steel { 
+    background-color: #42bd94; 
+}
+
+.water { 
+    background-color: #86a9fa 
+};