Letting the User have Input

General notes on updating/adding new input from the UI to the existing code flow

Adding a new value to to the Configuration

You can define its form/format in src/models/configuration.js.

export const schema = z.object({
...
});
export const defaultConfig = schema.parse({});

Parsing the Form

Creating a Config from form data is in src/utils/formUtils.js. Big ol'

const fromFormToConfiguration = (form) =>
  schema.parse({
    blah: from.has('blah'),

Remember to use form.has for booleans and form.get for everything else

Pass from Configuration into Book Parameter

At the top of book.js there's update(configuration) where you set all the this.blah = configuration.blahs

Tacking on a Listener

src/main.js has the window.addEventListener('DOMContentLoaded', which is where we find the DOM elements and tack on their listeners. Likely import your listener logic from 'src/utils/clickHandlers.js'. Those functions need to be export`ed, remember.

Dynamically rendered content based on input

renderFormFromSettings(configuration) is in src/utils/renderUtils.js

document.querySelector('select[name="blah"]').value = configuration.blah;

Make sure the tests pass

Add your new parameter to the defaultBook in src/book.test.js