Dota2 heroes cards project

Tech stack

• JS
• CSS
• HTML
• GraphQL for API

FYI:

• After update file, kindly build again in order page update latest especially html files and image
• You need to use your own STRATZ_TOKEN from https://stratz.com/api (it's free for dev) in config.js or your project env which named STRATZ_TOKEN

Here we are going to use API from https://stratz.com/dashboard

https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Scripting/API#DOTA_UNIT_TARGET_TEAM

Todo List

• Project setup
  • images folder
  • query folder
    • heroes query
  • src folder
    • index.js we need this type as module in order could import other js module
    • styles.css
• HTML Structure
  • filter bar
  • heroes list
• CSS styleling
  • filter bar
  • heroes list
• JS
  • constants
  • config
  • graphql fun
  • init state
  • dom list
  • main()
  • filter bar
  • heroes list
• Preview/Deploy

Part2 card

• images folder
• query folder
  • hero query
  • roles query
• src
  • index_card.js
• HTML structure
• CSS style
• JS
  • [] Constatns
  • [] config
  • graphql fun
  • init state
  • Dom list
  • main()
    • Flip card
    • Hero primary attr
    • Hero base
    • Hero attack type
    • Hero abilities
    • Hero video/image updated!! the video now playable
    • Hero complexity
    • Hero mp/hp
    • Hero name
    • Hero roles
    • Hero info

Part3 ablities/talent modal/tooltip

• images folder
• query folder
  • abilities query file
• src
  • index_card.js -[x] refractor the ablities list to show only normal ablities, scepter/shard ablities will hidde and show on the modal
    • talent tooltip
    • abilities tooltip
    • scepter/shard tooltip
• HTML structure
  • Show talent icon
  • talent tooltip html
  • abilities tooltip
  • scepter/shard tooltip
• style
  • talent tooltip
  • abilities tooltip
  • scepter/shard tooltip