What Kind of Pokémon Are You?

A collaborative project to discover what kind of Pokémon you are based on music preference.

About

---

Utilises the Spotify Web API and PokéAPI to discover what type of Pokémon you are based on musical preferences. The user inputs a musician/artist and the app generates your Pokémon based on the artist's genre. Details about the Pokémon will emerge after you click the submit button, which pairs the genre of your artist with a corresponding Pokémon type — or random Pokémon in some instances, such as when no genre is listed for the artist.

Table of Contents

• User Story

• Acceptance Criteria

• Usage

• Live Demo

• Future Dev Plans

• Project Contributors

• Resources

  • Vicky
  • Glenn
  • Christi
  • Sushan

• License

User Story

---

AS A big fan of Pokémon and music
I WANT to know what type of Pokémon I would be based on my music preferences
SO THAT I can tell all my friends and live out my dream to become the very best there ever was

Acceptance Criteria

---

GIVEN I want to know what type of Pokémon I am
WHEN I input my favourite artist 
THEN I expect to be paired with a Pokémon and shown that result

Usage

---

To use the application, head on over to the deployed GitHub Page and click on the Pokéball! Next, enter your name and favourite artist into the corresponding input fields and submit your response to discover What Kind of Pokémon Are You?

Check out the GitHub repo

Built using HTML, CSS, JavaScript and the Skeleton responsive CSS boilerplate

Live Demo

---

Future Dev Plans

---

• Include a wider variety of Pokémon per type to pull results from
• Allow for “cross-genre” results such as alternative rock, folk punk etc
• Include a ‘Light Mode’ colour palette option
• Add unique backgrounds to the individual Pokémon results

Project Contributors

---

• Vicky Castro
• Glenn Digal
• Christi Scappatura
• Sushan Yue

Resources

---

Listed below are the resources each collaborator has used to bring this application to life.

Vicky

• CSS Tricks: Considerations for Styling a Modal

• Stack Overflow - How to center a modal

• Stack Overflow - How to keep close button in place

• Microsoft Developer Network - Dynamically changing background color based on date

• W3 Schools - HTML Color Picker

• Skeleton: Responsive CSS Boilerplate Docs

• Google Fonts - Press Start 2P

• Pokeball Favicon - How to create a Pokeball Favicon for the title

• Colour Scheme - Defining the colour pallete for project

• Icons for Buttons - Personalising the buttons adding an icon to it

• Font Choice - Defining fonts for the project

• Hover Effects for buttons and clickable items

• MDN Docs

Glenn

• HTML: HyperText Markup Language

• HTML DOCTYPE Declaration

• Head Tag - Container for Metadata

• Meta tag - Defines Metadata

• Link Tag - Linking the CSS

• Body Tag - Define Main Content

• Div Tag - Defining Divisions

• Paragraph Tag - Defining a Paragraph

• Form Tag - Creating Form in Conjunction with Input Tag

• Input Tag - Inputting Information

• Button Tag - Defines a Clickable Button

Christi

• Spotify Web API Authorisation Guides: Client Credentials Flow

• Spotify Web API Authorisation Guides: How to use the access Token

• Spotify Web API Endpoints: Search for Item

• How to use Spotify API with JavaScript

• Music Genre List

• MDN Docs - Array.includes()

• Stackoverflow - How to get a random key value

• Git Branch

• WebAim Contrast Checker

• Accessibility Developer Guide - Hiding elements visually by moving them off screen

• Manually create a Markdown table of contents

• WebAim - invisible content

• MDN Docs

• Stackoverflow

• Class instructor and TAs, Friday tutor, class notes and class recordings

Sushan

• PokéAPI Documentation

• Fetching the original Pokémon using PokéAPI

• Bulbapedia

• Git Merge Main into Branch

• Stack Overflow - How to access object properties with a "-" dash

• How to capitalise the first letter of each word in a string

• W3 Schools - How to make a basic modal

• Stack Overflow - How to shake HTML elements using Javascript

• Pokéball Shaking Animation

• MDN - Using CSS transitions

• Stack Overflow - How to remove outline from inset box shadow and border radius

• CSS tricks - :not

• MDN Web Docs :not()

• Stack Overflow - What is this CSS selector? [class*="span"]

• MDN Attribute Selectors

• Skeleton: Responsive CSS Boilerplate Docs

• MDN Docs

• W3 Schools

• Class instructor and TAs, Friday tutor, class notes

License

---

© 2022 Vicky Castro, Glenn Digal, Christi Scappatura and Sushan Yue

MIT License