Hi there! I'm Sami Khalaf, and I've developed this app with plain HTML + CSS + Javascript ES6.
This is mainly an exercise for me to polish my skills as a front-end developer, so I hope you check this out and enjoy it as much as I did programming it.
- Plain JavaScript ES6 programming, no frameworks and no crazy libraries 💪🏿.
- Basic routing system with native ES6 methods, split in modules
- Web Responsive design, with SCSS as main language, compiled into CSS.
- Usage of BEM methodology for organising styles.
- Data consumed from the http://pokeapi.co/, as it's a great RESTful API with tons of features and really well managed data.
- Therefore, the app deals constantly with async code and multiple threads of execution.
This app has mainly three parts:
- The pokemon list, showed them as cards, numbered throughout many pages.
- The Pokémon detail, displayed with custom modal windows.
- The favorites button, where you can select any pokemon and list them in the favorites button. Favorites will be stored in a cookie, so the next time you visit the page you still have those saved.
Cool new features for the future:
- Dark theme toggle button? That would be nice.
- Filter for the Pokémon main list, with types: fire, water, electric, etc.
This is a simple HTML+CSS+JS app, so you can run it in a Apache / Nginx server, or simply run it with a development server in your IDE. I use Live Server in VS Code and works nicely.
No Webpack or Babel is implemented on this app, so if you have problems chances are your web browser is not compatible. Download the latest version of Mozilla Firefox or Chromium and all those problems will be gone.