felquis

function Example() {
  const defaultInputValues = {
      name: "", // should match input's name prop
      email: "",
      address_line_1: "",
      birthday: "",
  }

  const [controlledFields, setControlledFields] = useState({
    ...defaultInputValues,

felquis

/*
  Usage: loadStyles([{
    href:
      'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons',
  },
  {
    href:
      'https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css',
    integrity:
      'sha384',

felquis

/*
  Usage: loadJavaScriptFiles([{
    href:
      'https://path-to',
  },
  {
    href:
      'https://unpkg.com/cdn-path-to',
    integrity:
      'sha384',

felquis

If you have a form, and in the design specs there's no submit button inside the form, you can still make the form submit when the user presses enter. You just need to put a hidden input of type submit.

<form>
  <input type="text" name="anything" />
  <input type="submit" hidden />
</form>

That is it for today. Questions in the comment field bellow, thanks.

felquis

In this gist I describe how I use arrays to create web forms with JavaScript React, the same pattern can be use with any JS lib or, vanilla js.

First, what kind of form are we talking about? §I applied this method in forms up to twelve inputs, including type text, email, select, select multiple, date rage, number range, checkbox.

In a gist, create an array and each array indice is an object that describes how a form input of any given type should render. I put this array in my state and on each input on change I map my fields array and update it's value, onChange I can also call async validation functions that will map and update the fields array with the current input validity.

felquis

export default function average (limit) {
  let list = []
  let current = 0

  return (x) => {
    list = [...list, x]

    if (list.length < limit) return current

    current = list.reduce((acc, x, index) => {

felquis

// output is in minutes
document.body.innerText.split(' ')
.filter((split) => split.length > 1)
.map((split) => split.replace(/[^a-zZ-a]+/g, ''))
.filter((split) => split.length > 1)
.reduce((acc, split) => {
  const time = split.split('').length * 115
  return [...acc, (time > 500) ? time : 500]
}, [])
.reduce((acc, time) => ([acc[0] + time]), [0])

felquis

fetch('https://api.pagar.me/1/zipcodes/86900000', { method: 'get' })
.then(response => response.json())
.then(console.log)

felquis

const cep = require(‘cep-promise’)

cep(‘86900000’).then(console.log)

felquis

// Test 1, what will be displayed in the logs?
Promise.resolve()
  .then(() => {
    const car = {
      color: 'Green'
    }

    setTimeout(() => {
      car.color = 'Orange'
    }, 0)