<repo_name>DChuchin/biref<file_sep>/README.md
# parcel builerplate

## Install dependencies

```
$ yarn
```

## Available tasks

```sh

# Run dev mode and watch the files
$ yarn watch

# Build and minify the code
$ yarn build

# Format the code (used prettier)
$ yarn format

# Remove dist folder
$ yarn clean

```

## Features

- scss, sass for styling
- autoprefixer
- prettier for code formatting (by pre-commit hook or manually use format command see above)
- babel for js transpilation
- image minification
<file_sep>/src/js/main.js
import render from './modules/render';
import model from './modules/model';
import resetRequired from './modules/resetRequired';

const form = document.querySelector('form');
const nextBtn = document.querySelector('#nextBtn');
const prevBtn = document.querySelector('#prevBtn');

const goNext = e => {
  e.preventDefault();

  if (form.reportValidity()) {
    model.direction = 'forward';
    model.nextStep();
  }
  render();
};

const goBack = e => {
  e.preventDefault();
  model.direction = 'backward';
  model.prevStep();
  render();
};

// listeners
form.addEventListener('input', () => render());
prevBtn.addEventListener('click', goBack);
nextBtn.addEventListener('click', goNext);

window.model = model; // TODO remove from prod

// resetRequired(form);
render();
<file_sep>/src/js/modules/checkboxValidity.js
const checkboxValidity = checkboxGroup => {
  const requiredElements = Array.from(
    checkboxGroup.querySelectorAll('input[type="checkbox"]')
  );

  return requiredElements.some(element => element.checked);
};

export default checkboxValidity;
<file_sep>/src/js/modules/updateRequired.js
const updateRequired = fieldset => {
  Array.from(fieldset.elements).forEach(formElement => {
    if (formElement.dataset.required) {
      formElement.required = formElement.dataset.required;
    }
  });
};

export default updateRequired;
<file_sep>/src/js/modules/isValid.js
const isValid = fieldset => {};
<file_sep>/src/js/modules/model.js
class Model {
  constructor(step = 0, maxStep = 0) {
    Object.assign(this, { step, maxStep });
  }

  nextStep() {
    if (this.step < this.maxStep) {
      this.step += 1;
    }
  }

  prevStep() {
    if (this.step > 0) {
      this.step -= 1;
    }
  }
}

const form = document.querySelector('form');
const stepSections = form && Array.from(form.querySelectorAll('[data-step]'));
const maxStep = Math.max(
  ...stepSections.map(step => Math.floor(step.dataset.step))
);
const model = new Model(0, maxStep);

export default model;
