D&d 5e character sheet -- choose class and add save throws with modifiers

Hey all!

So I’m jumping into my first big project for myself. This is far from complete, it’s just the beginning of what I hope becomes a project that will teach me plenty of JS along the way.

The only thing it does as of now is let you choose a character class, after which it will fill in the bubble next to that class’s saving throws and add the proficiency to the save’s number.

I would just like a little feedback from those that know better than I do.

What are some things I could do better? What should I study up on? Any advice for a project like this?

I’m aiming more for advice on JS than anything else, but any advice is totally welcome.

Hi @trenhel,
Could you give some details about what you’re planning with this project? Is the idea that users will be able to make characters from scratch and then have an interactive character sheet they can use during play?

It might be good to break down your overall project into small requirements, for example: a user can choose a class and see the default stats, proficiencies and abilities for it. Then you could add the ability to choose an ancestry and update the stats and abilities accordingly. Then add the functionality to select ability scores. Then a background, then equipment, then spells (if applicable).

In terms of feedback on the JavaScript:

As the project grows, it’ll take more work to keep it organized. For plain JavaScript projects, I like to organize JavaScript files with variables/constants togther at the top (this includes any element selectors), then functions, then event listeners, and finally any functions that need to run on page load.

So something like:

// variables
const classSelect = document.getElementById("chooseClass");
let proficiencyBonus = 2; 

// functions
function setUpCharacterSheet() {...} 

function setSavingThrows() {...}

// event listeners
classSelect.addEventListener("change", setSavingThrows); 

// functions called on page load

You could use more descriptive names for your functions, such as resetSavingThrows() rather than reset(), displayPlusOrMinus rather than plusMinus(). The same goes for variable names. I’d probably use a plural name like savingThrowDots for document.querySelectorAll('.saveDot') since it’s referencing multiple elements.

The JavaScript and HTML are pretty tightly coupled. For example, instead of checking the innerHTML of an element in your JavaScript, I would probably keep track of the characters stats in JavaScript arrays or objects and then use template literals to render this data into the HTML. So the JavaScript contains the source of truth and the HTML updates to reflect that. For example, plusMinus could take in an array of numbers (the modifiers) and return an array of strings with +/- prefixed to them. Then use this string to add an element to the HTML.

The loop that sets out the saving throw modifiers is just kind of sitting there. I would put it, and the call to plusMinus, inside a function, such as setSavingThrowModifiers() that is called when the character’s class is selected.

One resource I found really helpful when practicing vanilla JavaScript was JavaScript30 by Wes Bos https://javascript30.com/ It got me into the habit/pattern of selecting an element, adding an event listener, and calling a function.

Best of luck with your project.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.