Handling forms with VanJS, Dear React users don't waste our sparse resources...

Why on earth things have to be complicated.

Dear React users, take care of our Planet, and don't waste tons or resources for simple projects...

Demo

import van from "./van.js";

const { span, h1, div, form, input, label, button, hr } = van.tags;

const add = (base) => (elt) => van.add(base, elt);

const target = document.getElementById("app");

function sleep(ms) {
  return new Promise(function (r) {
    setTimeout(r, ms);
  });
}

function Form() {
  const name = van.state(""),
    email = van.state(""),
    error = van.state(""),
    feedback = van.state("");

  let formWrapper;

  const handleNameChange = (event) => {
    name.val = event.target.value;
  };

  const handleEmailChange = (event) => {
    email.val = event.target.value;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    feedback.val = "";
    const formElt = formWrapper.querySelector("form");

    if (!name.val || !email.val) {
      error.val = "Please fill in all fields.";
      return;
    }

    error.val = "";

    sleep(500).then(() => (feedback.val = "Form submitted"));

    sleep(2500).then(() => {
      [name, email, error].forEach((f) => (f.val = ""));
      feedback.val = "";
      formElt.reset();
    });
  };

  formWrapper = div(
    h1("Handling Forms in VanJS"),
    form(
      div(
        { class: "field", onchange: handleNameChange },
        label("Name"),
        input()
      ),
      div(
        { class: "field", onchange: handleEmailChange },
        label("Mail"),
        input()
      ),
      div(
        { class: "submit" },
        button(
          {
            type: "submit",
            onclick: handleSubmit,
          },
          "submit"
        )
      )
    ),
    hr(),
    div(
      { class: "logger" },
      div({ class: "logfield" }, "Name   : ", name),
      div({ class: "logfield" }, "Email  : ", email),
      div({ class: "logfield" }, "Error : ", error),
      div({ class: "logfield" }, "Feedbak : ", feedback)
    )
  );
  return formWrapper;
}

function main() {
  add(app)(Form());
}

main();

Comments

[Tao Xin (vanjs.org)]

Thanks for the example!

Some formatting lints:

1. 2 blank lines before function sleep(ms) {
2. Blank line after function Form() {
3. Indent of the line sleep(500).then(() => feedback.val = "Form submitted");
4. Blank line after

    sleep(2500).then(() =>  { 
      [name, email, error].forEach(f => f.val = "");
      feedback.val = "";
      formElt.reset();
    })

1. formWrapper = div( 2 spaces between = and div
2. function main () { 2 spaces between function and main. 1 space between main and ()

[artydev]

Hy Tao,
Can you suggest me a formater online which fits
you recommandations ?
Thank you

[Tao Xin (vanjs.org)]

Looks like this line const target = document.getElementById("app"); is unused?

[artydev]

Indeed Tao :-)

I intented to do :

add(target)(Form())