Okay so, the crazy thing is I don't even play DnD. However, a lot of my close friends and family do play, and every once in a while I'll be interested enough to spectate a campaign session.
Although I barely know anything about the world of DnD, I do know that at the beginning of a campaign you must roll a 6-sided die to determine certain attributes for your character. This side project serves as a personal quest for learning in public, a fun and productive way to apply my knowledge of front-end technologies into a tool that can be useful for DnD enthusiasts who can't be bothered with the repetitious act of rolling for stats. Unless you're into that process, then don't let me stop you!
Work in progress...
- Build out basic layout for attributes
- Apply CSS reset
- Utilize flexbox to make working with data a decent experience
- Disable button once clicked
- Set styles for
.dropped-roll
- Create style guide
- decide on NES.css to make life easier
- Refactor layout to be mobile-first
- Create credentials
- Add copyright
- Add links: Github, Twitter
- Figure out why Strength attribute has extra padding under Total on tablet/desktop view π΅βπ«
- Create 6-sided dice roll
- Select attribute buttons in the DOM
- Select all attribute lists in the DOM
- Add event listeners to all
stat-roll
buttons- Add roll functionality for each attribute
- Work on
roll-total
- Drop lowest roll value
- Add remaining 3 values for total
- Find the lowest roll in the DOM
- use
indexToDrop
to targetli
- use
- Update the DOM to show
roll-total
- target
#attrTotal
- append
total
- target
- Create reset button
- Create a new branch
make-oop
- Start working on refactoring functionality