← Back To Home
JS Plugins

D&D Tools

Time: ~ 32 Hours

Languages: HTML, CSS, JS

Skills: Learning to Implement JS Plugins, Reading Documentation, Async Functions, JS Loops, APIs, CSS Animation, Table Accessibility, JSON, WebPack


I knew immediately I wanted to create a set of D&D tools after looking at Chicken Dinner (another dnd tool site) and thinking that I could create something similar and more interactive. I wanted to stick to an accessible and simple design that anyone could use no matter the device. Since this was for an assignment, I needed 3 pages. So, I decided to make a spells list and then try a 3D dice roll page. I originally wanted to do a spell planning page, but using 3D in projects has always interested me, so I wanted to give it a shot.

Chicken Dinner Inspo

The point buy page was inspired by Chicken Dinner layout, but I added a bit more interactivity to the overall look with the gradient background. It changes when you begin adding points, when you reach the limit, and if you go over the limit. I love playing with the use of color in my projects, so I thought this would be a great integration.

My version

The spells list for me was where the bulk of my plugins were. The list.js plugin was a little poorly documented in my opinion, so it was a bit difficult to use and figure out at first. However, after figuring out how to use it, it made managing the search and filtering features easier. This table pulls from a D&D api to fill in the data for each spell. I used Granim again to assign a set of color gradients for each spell school that would activate on hover, focus and click. You can also tab through the list for accessibility.

Spells generated from API

Challenges & Solutions

This project was started with desktop in mind, so I had to go back in and optimize it for mobile as well. This could have been a lot easier had I designed it for mobile from the start. Afterall, it's 2024. Additionally, the API is a bit slow so it takes a while to load initially at times. Whatever the case, enjoy the cool loading animation.

The Dice Roller part was challenging for me. There were a lot of JavaScript tools I had to figure out and hadn’t had much practice with. querySelectorAll was confusing me when using it on a Node List, so I spent a lot of time looking up documentation for that and how to properly target the container and the items inside to make it work for my forEach loop. Eventually, I figured it out after asking for help and reading up on ways to target those elements properly (and an equal amount of console logging everything I possibly could).

Post-Course Additions

After the course was completed, I added the ability to roll multiple dice and have it add up the totals from all of the dice rolled. I still want to implement the ability to roll multiple types of dice instead of just multiple of the same kind, as well as the ability to roll with advantage and disadvantage.

Addition Made After The Course
↑ Back To The Top