Take control of your UI elements

Look carefully at the following code :

import {make, selectBase, h1, unselectBase, div} from './dml.js'

const cssRow = `
  display:flex;
  align-items:center;
  margin:0;
`

const cssCol1 = `
  background:lightgrey;
  color:black;
  padding:2px;
  margin-bottom: 0px;
  margin-top:1px;
`

const cssInp = `
  line-height:1.5rem;
  text-align:center;
  border:none;
  border-bottom:1px solid black;
  margin:0;
  border-right: 1px solid black;
`

const input = (props) => { 
  let inp = make("input", props);
  inp.style = cssInp;
  return inp;
}

let row = (n) =>  { 
  let r = selectBase(div('', cssRow))
    div("" + n, "line-height:1.5rem;padding-right:8px")
    let inparray = Array.from([...Array(4)]).map((elt, i) =>  { 
      let inp = input({value : i + 4 * n});
      inp.onclick = () => updateMsg(inp.value);
      inp.style.cursor = "pointer";
      return inp;
    })
  unselectBase();
  return inparray;
}

selectBase(div("","width:590px;margin: 0 auto;"))
   let r0 = row(0)
   let r1 = row(1)
   let r2 = row(2)
   let r3 = row(3)
unselectBase()

let msg = h1("")
function updateMsg (value) {
  msg.innerHTML = `Info : the content of the selected cell is ${value}`
}

r0.map(i => i.style.background = 'red');
r1.map(i => i.style.background = 'orange');
r2.map(i => i.style.background = 'yellow');
r3.map(i => i.style.background = 'green');

See how you can control every element composing this table.

For example, try to see

• what rows (r0...r3) refer to.

DML is really the new JQuery in Town :-)

You can test it here ColoredTable