diff --git a/imgs/25.png b/imgs/25.png new file mode 100644 index 0000000..81bb5a8 Binary files /dev/null and b/imgs/25.png differ diff --git a/package-lock.json b/package-lock.json index 1fca92a..197b4e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,6 +63,15 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -235,6 +244,16 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" }, + "node-fetch": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", diff --git a/package.json b/package.json index 944e450..9d13184 100644 --- 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 index bba5463..1cff3c2 100644 --- 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}`) }) \ No newline at end of file diff --git a/web/index.html b/web/index.html index 1de928b..6a5ff05 100644 --- a/web/index.html +++ b/web/index.html @@ -1,11 +1,22 @@ - - - - Document - - -

Hello Pokemon!

- - \ No newline at end of file + + + + Pokedex + + + +

Pokedex

+ +
+ + + +
+ +
+ + + + diff --git a/web/index.js b/web/index.js new file mode 100644 index 0000000..c87c3ba --- /dev/null +++ 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 = + `
+
+
+

${name}

+

#${id}

+
+
+ +
` + div.innerHTML = divInnerHtml; + div.classList.add(type); + container.appendChild(div); +} \ No newline at end of file diff --git a/web/pokemon.css b/web/pokemon.css new file mode 100644 index 0000000..7236f0a --- /dev/null +++ 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 +};