SHASHWATAA/ghar-sajaune-lai-paisa-line-form.markdown

## ghar-sajaune-lai-paisa-line-form.markdown

      
    Raw
  

              ghar-sajaune-lai-paisa-line-form.markdown
            
          
    ghar sajaune lai paisa line form

A Pen by SHASHWATAA on CodePen.
License.

  
## index.html
<html>

<head>
</head>

<body>
  rooms
  <button id="addMoreRoomsBtn" onclick="addMoreRooms();">add</button>
  <button id="addMoreRoomsBtn" onclick="removeRoom();">remove</button>
  <div id="roomAdd">

  </div>
  Staging
  <div id="roomStaging">
  </div>

  <body>

</html>

## script.js
function addMoreRooms() {
  var roomAddElement = document.getElementById("roomAdd");
  var divzz = document.createElement("div");
  var ipbox = document.createElement("input");
  ipbox.addEventListener("input", addStagingRooms);
  ipbox.addEventListener("input", addNewRow);
  numberOfChildren = roomAddElement.children.length;
  divzz.appendChild(ipbox);
  // divzz.appendChild(btn);

  if (numberOfChildren == 0) {
    roomAddElement.append(divzz);
  } else {
    divzz.appendAfter(roomAddElement.children[numberOfChildren - 1]);
  }
}

function removeRoom() {
  var roomAddElement = document.getElementById("roomAdd");
  numberOfChildren = roomAddElement.children.length;
  if (numberOfChildren > 1) {
    //todo: check if room has name and items and ask user for confirmation
    roomAddElement.removeChild(roomAddElement.children[numberOfChildren - 1]);
  } else if (numberOfChildren == 1) {
    roomAddElement.children[0].children[0].value = "";
  }

  addStagingRooms();
}

(Element.prototype.appendBefore = function (element) {
  element.parentNode.insertBefore(this, element);
}),
  false;

(Element.prototype.appendAfter = function (element) {
  element.parentNode.insertBefore(this, element.nextSibling);
}),
  false;

function addStagingRooms() {
  var roomStagingElement = document.getElementById("roomStaging");
  roomStagingElement.textContent = "";

  var roomAddElement = document.getElementById("roomAdd");
  children = roomAddElement.children;
  for (var i = 0; i < children.length - 1; i++) {
    var child = children[i];
    var container = document.createElement("div");
    container.setAttribute("class", "stagingDiv");

    var wrapper = document.createElement("div");
    wrapper.setAttribute("class", "stagingWrapper");

    container.append(wrapper);

    var h4title = document.createElement("h4");
    h4title.setAttribute("class", "stagingRoomName");

    wrapper.append(h4title);

    var RoomName = child.children[0].value;
    h4title.append(RoomName);

    if (RoomName != "") {
      roomStagingElement.append(container);
    }
  }
}

function addNewRow(ipbox) {
  var roomAddElement = document.getElementById("roomAdd");
  var allInput = roomAddElement.querySelectorAll("input");
  var allVal = [];
  allInput.forEach(function (userItem) {
    allVal.push(userItem.value);
  });
  if (!allVal.includes("")) {
    addMoreRooms();
  }
}

addMoreRooms();

## style.css
.stagingDiv {
  min-width: 30vw;
  height: 250px;
  background: black;
  color: white;
  margin: 20px;
}

.stagingWrapper {
  padding: 30px;
}

.stagingRoomName {
  border-bottom: white 1px dotted;
}

#roomStaging {
  display: flex;
  flex-wrap: wrap;
  margin: 20vw;
}
	<html>

	<head>
	</head>

	<body>
	rooms
	<button id="addMoreRoomsBtn" onclick="addMoreRooms();">add</button>
	<button id="addMoreRoomsBtn" onclick="removeRoom();">remove</button>
	<div id="roomAdd">

	</div>
	Staging
	<div id="roomStaging">
	</div>

	<body>

	</html>
	function addMoreRooms() {
	var roomAddElement = document.getElementById("roomAdd");
	var divzz = document.createElement("div");
	var ipbox = document.createElement("input");
	ipbox.addEventListener("input", addStagingRooms);
	ipbox.addEventListener("input", addNewRow);
	numberOfChildren = roomAddElement.children.length;
	divzz.appendChild(ipbox);
	// divzz.appendChild(btn);

	if (numberOfChildren == 0) {
	roomAddElement.append(divzz);
	} else {
	divzz.appendAfter(roomAddElement.children[numberOfChildren - 1]);
	}
	}

	function removeRoom() {
	var roomAddElement = document.getElementById("roomAdd");
	numberOfChildren = roomAddElement.children.length;
	if (numberOfChildren > 1) {
	//todo: check if room has name and items and ask user for confirmation
	roomAddElement.removeChild(roomAddElement.children[numberOfChildren - 1]);
	} else if (numberOfChildren == 1) {
	roomAddElement.children[0].children[0].value = "";
	}

	addStagingRooms();
	}

	(Element.prototype.appendBefore = function (element) {
	element.parentNode.insertBefore(this, element);
	}),
	false;

	(Element.prototype.appendAfter = function (element) {
	element.parentNode.insertBefore(this, element.nextSibling);
	}),
	false;

	function addStagingRooms() {
	var roomStagingElement = document.getElementById("roomStaging");
	roomStagingElement.textContent = "";

	var roomAddElement = document.getElementById("roomAdd");
	children = roomAddElement.children;
	for (var i = 0; i < children.length - 1; i++) {
	var child = children[i];
	var container = document.createElement("div");
	container.setAttribute("class", "stagingDiv");

	var wrapper = document.createElement("div");
	wrapper.setAttribute("class", "stagingWrapper");

	container.append(wrapper);

	var h4title = document.createElement("h4");
	h4title.setAttribute("class", "stagingRoomName");

	wrapper.append(h4title);

	var RoomName = child.children[0].value;
	h4title.append(RoomName);

	if (RoomName != "") {
	roomStagingElement.append(container);
	}
	}
	}

	function addNewRow(ipbox) {
	var roomAddElement = document.getElementById("roomAdd");
	var allInput = roomAddElement.querySelectorAll("input");
	var allVal = [];
	allInput.forEach(function (userItem) {
	allVal.push(userItem.value);
	});
	if (!allVal.includes("")) {
	addMoreRooms();
	}
	}

	addMoreRooms();
	.stagingDiv {
	min-width: 30vw;
	height: 250px;
	background: black;
	color: white;
	margin: 20px;
	}

	.stagingWrapper {
	padding: 30px;
	}

	.stagingRoomName {
	border-bottom: white 1px dotted;
	}

	#roomStaging {
	display: flex;
	flex-wrap: wrap;
	margin: 20vw;
	}