{"id":20068047,"url":"https://github.com/malanski/pokeloja2","last_synced_at":"2026-04-12T19:56:03.839Z","repository":{"id":44912118,"uuid":"426443807","full_name":"malanski/pokeLoja2","owner":"malanski","description":"Poké-Store Card Game Vanilla Project #awari-front-0","archived":false,"fork":false,"pushed_at":"2023-07-03T23:10:46.000Z","size":51184,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-12T23:29:49.415Z","etag":null,"topics":["api","awari-front-0","css","grid","html-css-javascript","sass"],"latest_commit_sha":null,"homepage":"https://malanski.github.io/pokeLoja2","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/malanski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-10T01:29:59.000Z","updated_at":"2023-07-07T21:52:13.000Z","dependencies_parsed_at":"2025-01-12T23:36:19.906Z","dependency_job_id":null,"html_url":"https://github.com/malanski/pokeLoja2","commit_stats":{"total_commits":262,"total_committers":2,"mean_commits":131.0,"dds":"0.17557251908396942","last_synced_commit":"31ecac7001fff748dd0b7627b22ac39a1cf9ec34"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malanski%2FpokeLoja2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malanski%2FpokeLoja2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malanski%2FpokeLoja2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malanski%2FpokeLoja2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/malanski","download_url":"https://codeload.github.com/malanski/pokeLoja2/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241494419,"owners_count":19971915,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","awari-front-0","css","grid","html-css-javascript","sass"],"created_at":"2024-11-13T14:05:10.802Z","updated_at":"2025-12-31T01:05:52.100Z","avatar_url":"https://github.com/malanski.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ecommerce Pokémon\n\nThis is one of my first application projects creating a responsive Ecommerce website using HTML, CSS - SASS, JavaScript and API. The project's teacher is Henrique Marques. I decided to take inspiration from the Pokémon card game to display the most relevant images found in the API.  \n\n\u003cdiv align=\"right\"\u003e\n   \n## Deploy at: \u003ca href=\"https://github.com/malanski/pokeLoja2/\"\u003ePokéLoja\u003c/a\u003e  \n   \n\u003c/div\u003e\n\n## Objectives  \n  \n- Create a site Ecommerce with SASS + HTML\n- Use API (API Pokémon) through JavaScript fetch\n- Customize or design\n\n\n## Technologies \n  \n- HTML5\n- CSS3\n- JavaScript\n- API\n- Node\n- FontAwesome\n- Git\n- Github\n\n## Description\n\nThis project is an online Pokémon card store. It uses the Pokémon API to fetch information about the different Pokémon and display them on the page. The design is custom and was created using SASS and HTML. The JavaScript code is responsible for fetching the data from the API and rendering it on the page.  \n\nHere is an example of code that fetches the data from the API and renders the Pokémon on the page:  \n\n```javascript\nlet page = 0;\nconst limit = 20;\nlet pokemons = [];\nasync function getPokemons(page = 0) {\n    const pokeList = document.querySelector('.poke-list');\n    // Loading\n    pokeList.innerHTML = `\n        \u003cdiv\u003e\n            \u003cdiv class=\"loading\"\u003e\n                \u003cp\u003eNow Loading... please wait...\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    `;\n    // Limita aquantidade de Pokémon por Página\n    // Faz pagina subir depois de clicar mudar pagina\n    window.scrollTo({top: 0, behavior: 'smooth'})\n    await fakePromise();\n    const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=${limit}\u0026offset=${limit * page}`);\n    const json = await response.json();\n    // Arredonda a quantidade de páginas\n    const pages = Math.ceil(json.count / limit);\n    // mostra numero de paginas atual e total: logger\n    pageLogger((page + 1) + ':' + pages);\n    return json;\n}\nfunction pageLogger(page) {\n    const pageLogs = document.querySelector('.page-log');\n    pageLogs.innerHTML = `${page}`;\n}\nconst fakePromise = () =\u003e new Promise((resolve) =\u003e setTimeout(resolve, 500));\n//  RENDERIZA OS POKEMONS NA LISTA\nfunction renderPokemons(pokemonsApi) {\n    const pokeList = document.querySelector('.poke-list');\n    pokeList.innerHTML = '';\n    const pokemons = pokemonsApi.map((pokemon) =\u003e new Pokemon(pokemon.name, pokemon.url));\n    this.pokemons = pokemons;\n    pokemons.forEach((pokemon) =\u003e {\n        const html = pokemon.html();\n        pokeList.appendChild(html)\n    });\n}\n```\n\nThis code fetches the data from the API, creates a list of `Pokemon` objects, and then renders each `Pokemon` on the page using the `html()` method of the `Pokemon` object.  \n  \n## How to use\n\nTo use this project, just clone the repository and open the `index.html` file in your browser.  \n  \n## Contributing\n\nIf you would like to contribute to this project, feel free to submit a pull request. All contributions are welcome!  \n\n\n\u003cdiv align=\"left\" margin-top=\"-150px\"\u003e\n    \n| \u003cimg height=\"100px\" src=\"https://avatars.githubusercontent.com/u/87362996?v=4\"\u003e | \u003ca href=\"https://github.com/malanski\"\u003eUlisses Malanski\u003c/a\u003e \" - Web Developer/Visual Artist and musician in his spare time.  |\n| ----------- | ----------- |\n| inicio do projeto | desde outubro 2021 |\n| STATUS | em Desenvolvimento |\n\n    \n\u003cdiv\u003e\n\n\u003cdiv align=\"center\"\u003e  \n  \u003cimg height=\"320em\" src=\"https://assets.pokemon.com/assets/cms2/img/pokedex/full/890.png\"\u003e\n  \u003cimg height=\"110em\" src=\"https://assets.pokemon.com/assets/cms2/img/pokedex/full/889.png\"\u003e\n  \u003cimg height=\"70em\" src=\"https://assets.pokemon.com/assets/cms2/img/pokedex/full/891.png\"\u003e\n\u003c/div\u003e\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalanski%2Fpokeloja2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalanski%2Fpokeloja2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalanski%2Fpokeloja2/lists"}