form maker with validation

Homework14

let $container = document.querySelector('.container')

function makeInput(id) {
    const $input = document.createElement('input');
    $input.id = id;
    $input.name = name;
    return $input;
}

function validation(name) {
    let message = '';
    if (name.length <= 3) {
            message = 'value is too short';
    } else if(name.length > 10) {
        message = 'value is too long'
    } else {
        message = 'wow, nice!'
    }
    return message
}

function makeTextInput(id) {
    let input = makeInput(id);
    input.classList.add('form-control');
    input.id = ('form-control-' + id)
    input.type = 'text';
    let edit = true
    let $hintText = ''
    const $helpBlock = document.createElement('div');
    $helpBlock.id = input.id
    $helpBlock.classList.add('form-text');
    input.addEventListener( "change" , (e) => {
        e.preventDefault()
        $hintText = validation(input.value)
        $helpBlock.innerText = $hintText;
        let $currentInput = document.querySelector(`#${input.id}`)
        if(edit === true) {
            $helpBlock.innerText = $hintText;
            $currentInput.parentNode.appendChild($helpBlock)
            edit = false
        }

    });
    return input;
}
function makeCheckboxInput(id) {
    const $input = makeInput(id);
    $input.classList.add('form-check-input');
    $input.type = 'checkbox';
    return $input;
}

function makeLabel(id, label) {
    const $label = document.createElement('label');
    $label.innerHTML = label;
    $label.for = id;
    return $label;
}

function makeTextLabel(id, label) {
    const $label = makeLabel(id, label);
    $label.classList.add('form-label');
    return $label;
}

function makeCheckboxLabel(id, label) {
    const $label = makeLabel(id, label);
    $label.classList.add('form-check-label');
    return $label;
}

function makeField() {
    const $field = document.createElement('div');
    $field.classList.add('mb-3');
    return $field;
}

function makeCheckboxField(id, name) {
    const $field = makeField();
    $field.classList.add('form-check');
    $field.appendChild(makeCheckboxInput(id));
    $field.appendChild(makeCheckboxLabel(id, name));
    return $field;
}

function makeTextField(id, name) {
    const $field = makeField();
    $field.appendChild(makeTextLabel(id, name));
    $field.appendChild(makeTextInput(id, name));
    return $field;
}

class FormBuilder{
    constructor() {
        this.fields = [];
        this.id = 0;
    }

    addTextField(property){
        this.fields.push(makeTextField(this.id++, property));
        return this;
    }

    addCheckboxField(property){
        this.fields.push(makeCheckboxField(this.id++, property));
        return this;
    }

    build(){
        const $form = document.createElement('form');
        for(let field of this.fields) {
            $form.appendChild(field);
        }

        const $btn = document.createElement('button');
        $btn.innerHTML = 'Confirm';
        $btn.classList.add('btn', 'btn-primary');
        $form.appendChild($btn);

        return $form;
    }
}

let builder = new FormBuilder();

let form = builder
    .addTextField('username')
    .addTextField('city')
    .addCheckboxField('add mayonnaise?')
    .addCheckboxField('call mom?')
    .build();

$container.appendChild(form);