npm package: @seabuffalo/grid-generator
Description: Module to create nested arrays mapped to DOM Elements
Author: Ben Schulze
Latest version: 1.0.4

# Grid Generator

Simple JavaScript class to generate nested arrays and map them to the DOM.

## Install
```sh
npm install @seabuffalo/grid-generator
```

## API
Grid-Generator uses the static ```import``` declaration and so must be used inside a JavaScript module
```js
import { Grid, Cell } from "./node_modules/@seabuffalo/grid-generator/index.js"
new Cell(r, g, b, a)
new Grid(rows, columns, cell, parent)
```

## Example
Sample JavaScript functionality ```test.js```
```js
//import Grid and Cell classes in module format
import { Grid, Cell } from './node_modules/@seabuffalo/grid-generator/index.js'

//identify DOM element to append grid to
const gridContainer = document.querySelector(".grid-container");

//create new Grid instance
//Each grid is comprised of cells, created with the Cell class
const newCell = new Cell(0, 200, 100, 1);

//Grids take four initial arguments: rows, columns, Cell, and parent element
const newGrid = new Grid(3, 3, newCell, gridContainer);

//bind Grid methods to custom inputs
const rowsInput = document.querySelector("#rows");
rowsInput.addEventListener("change", (e) => {
  newGrid.setRows(parseInt(e.target.value));
});

const columnsInput = document.querySelector("#columns");
columnsInput.addEventListener("change", (e) => {
  newGrid.setColumns(parseInt(e.target.value));
});

const redInput = document.querySelector("#red");
redInput.addEventListener("change", (e) => {
  newGrid.setRed(parseFloat(e.target.value));
});

const greenInput = document.querySelector("#green");
greenInput.addEventListener("change", (e) => {
  newGrid.setGreen(parseFloat(e.target.value));
});

const blueInput = document.querySelector("#blue");
blueInput.addEventListener("change", (e) => {
  newGrid.setBlue(parseFloat(e.target.value));
});

const alphaInput = document.querySelector("#alpha");
alphaInput.addEventListener("change", (e) => {
  newGrid.setAlpha(parseFloat(e.target.value));
});
```
Binded to sample HTML document
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="test.js" type="module" defer></script>
  <title>Grid Generator Test</title>
</head>
<body>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .grid-container {
      height: 600px;
      width: 600px;
    }
    .rgb-container, .rows-columns {
      width: 600px;
    }
    .labels, .inputs {
      display: flex;
    }
    .labels > label, .inputs > input {
      width: 25%;
    }
  </style>
  <div class="rows-columns">
    <label for="rows">Rows</label>
    <input id="rows" type="number" min="0" max="100" value="3">
  
    <label for="columns">Columns</label>
    <input id="columns" type="number" min="0" max="100" value="3">
  </div>
  
  <div class="rgb-container">
    <div class="labels">
      <label for="red">Red</label>
      <label for="green">Green</label>
      <label for="blue">Blue</label>
      <label for="alpha">Alpha</label>
    </div>

    <div class="inputs">
      <input id="red" type="range" min="0" max="255" value="0">
      <input id="green" type="range" min="0" max="255" value="200">
      <input id="blue" type="range" min="0" max="255" value="100">
      <input id="alpha" type="range" min="0" max="1" step="0.01" value="1">
    </div>
  </div>
  
  <div class="grid-container"></div>
</body>
</html>
```
## Properties & Methods

```js
//Grid

//Constructor
new Grid(rows, column, Cell, parent) //creates grid with n rows/columns  
                                //using supplied Cell and parent element

//Properties
newGrid.element              //returns grid mapped to a DOM element
newGrid.grid                 //returns current grid
newGrid.rows                 //returns total rows
newGrid.columns              //returns total columns
newGrid.totalCells           //returns total cells
newGrid.cell                 //returns current cell properties
newGrid.parent               //returns parent element

//Methods
newGrid.addRows(rows)        //add n rows
newGrid.addColumns(columns)  //add n columns
newGrid.setRows(rows)        //modify grid to n rows
newGrid.setColumns(columns)  //modify grid to n columns
newGrid.setRed(r)            //change red value of cell rgba
newGrid.setGreen(g)          //change green value of cell rgba
newGrid.setBlue(b)           //change blue value of cell rgba
newGrid.setAlpha(a)          //change alpha value of cell rgba
newGrid.setCellColors(r, g, b, a)  //change cell rgba values

/////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////

//Cell

//Constructor
new Cell(r, g, b, a)         //creates cell to be used in grid
                             //takes rgba values for cell color

//Properties
cell.r                       //cell's red value
cell.g                       //cell's green value
cell.b                       //cell's blue value
cell.a                       //cells alpha value

//Methods
cell.setColors(r, g, b, a)   //change cell's rgba values
```

## License

MIT