Hurly77

function update() {
  for (let i = 0; i < boxes.length; i++) {
    boxStorage.appendChild(boxes[i]);
  }
}
// also update needs to be called when ever we create a new box
button.addEventListener('click', () => {
  addBox(boxName.value, boxColor.value, boxHeight.value, boxWidth.value);
  update(); // add this to event listener
  boxName.value = '';

Hurly77

function addBox(name, color, h, w) {
  let box = new Box(name, color, h, w);
  box.initBox();
}

Hurly77

export class Box {
  ...
  initBox() {
    let htmlBox = createBox();
    //remeber that we are importing createBox() from selectors.js file. Which returns a div element.
    htmlBox.id = this.id;
    htmlBox.style.height = `${this.h}px`;
    htmlBox.style.width = `${this.w}px`;
    htmlBox.style.margin = '6px';
    htmlBox.style.backgroundColor = this.color;

Hurly77

button.addEventListener('click', () => {
  addBox(boxName.value, boxColor.value, boxHeight.value, boxWidth.value);
  boxName.value = '';
    //this will remove the name value.
});

Hurly77

function addBox(name, color, h, w) {
  let box = new Box(name, color, h, w);
}

Hurly77

import { Box, boxes } from './classes.js';
import {
 boxHeight,
 boxWidth,
 boxColor,
 boxName,
 button,
 boxStorage
} from './selectors.js';

Hurly77

...

export class Box {
 constructor(name, color, h, w) {
  this.id = Math.random()
  this.h = h;
  this.w = w;
  this.name = name;
  this.color = color;
 }

Hurly77

import {myFunction} from 'selectors'

Hurly77

import {createBox} from './selector.js'

export let boxes = []

Hurly77

export const createElm = document.createElment('div')
//this will generate <div></div> and if we where to asign it a class like "box" 
//and then try to use it again only with the a different class say like "box2" 
//we'd only be changing the className not createing a new elment.