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
setUpCharacterSheet();
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.